电商案例首页布局

命名集合：

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwrods
导航	nav
导航左侧	dorpdown 包含 .dd .dt
导航右侧	navitems

1). shortcut 制作

1.png

• 通栏的盒子 命名为shortcut 快捷导航的意思， 注意，这里给行高，可以继承给里面的子盒子。
• 里面包含 版心的盒子
• 版心盒子里面包含1号左侧盒子左浮动
• 版心盒子里面包含2号右侧盒子右浮动

2). header 制作

2.png

• header盒子必须要有高度
• 1号盒子是 logo 标志 定位
• 2号盒子是 search 搜索模块 定位
• 3号盒子是 hotwrods 热词模块 定位
• 4号盒子是 shopcar 购车车模块
  • count 统计部分 用绝对定位做
  • count 统计部分 不要给宽度，因为可能买的件数比较多，让件数撑开就好了 给一个高度
  • 一定注意左下角 不是圆角 其余三个是圆角

3). nav 制作

3.png

• nav 盒子通栏有高度 而且有个下边框
• 1号盒子 左侧浮动 dorpdown 下拉导航 里面包含 dt dd
• 2号盒子右侧浮动 navitems 导航栏组

11. logo 优化

• logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
• h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片
• 连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
  • 要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法
  • 直接给font-size: 0; 就看不到文字了， 京东的做法。
• 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了