(案例)品优购项目-公共部分header和footer的制作

2. nav导航栏制作

2.1 dropdown的做法

• 这边是一个通栏的盒子不需要给宽度，给一个高度47px再给一个下边框就可以了。

• 左边给定一个div盒子叫做dropdown,右边给定一个div盒子叫做navitems，因为都是块级元素，这里给一个左浮动。

• dropdown要给一个宽度210px，给一个高度45px，再给一个背景颜色，高度是放在盒子里面的就不要量下边框

• dropdown盒子的细节: 这边要看上下布局的细节(上下按照相关性应该放在一起的)
  

• 根据上面的概念应该知道，在dropdown 里面其实存在两个div盒子，一个dt,一个dd，dt是全部商品分类，dd里面是商品的详细分类，dt的宽度和高度要和父亲一样宽高100%，dd的宽度210px，高度是465px

• dd的高度是从这个地方开始测量的:

• dd都是用ul li来制作的,小箭头arrow用伪元素::after 来制作，因为是行内元素，会贴在文字的旁边，所以要以li的右边用定位来显示

2.2.navitems的做法

ul>li>a 的做法
这里给a一个高度，再给左右的padding值，把a调整的很大，这样经过很大的区域都可以点击

最后还有一个细节:这个dd压住了这个nav的下边框，我们就给一个margin-top:2px

3.footer 制作

• 不要给宽度，直接给一个高度415px就可以了
• footer里面包含版心,总共有三个部分
  

3.1. mod_service制作

这里面给footer padding-top:30px把下面的正品保障挤下来

这里的1号盒子 mod_service : height:80px border-bottom:1px solid #ccc
里面的小li一共是4个，所以一个的宽度是300px,高度是50px。
li里面放一个h5(图片),50px*50px 加上一个div,div 里面放一个h4叫做正品保障在一个p标签叫做正品保障提供发票
这里用精灵图技术背景插入图片

3.2.mod_help制作

高度185px外加一个下边框，dl + dt+dd 的方法制作 宽度和高度都不要给，浮动就可以了

3.2.mod_copyright制作