本文主要是介绍品优购：nav导航、footer部分，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
mod-copyright
nav导航栏
nav盒子通栏有高度，有下边框
1号盒子左浮动，dropdown
2号盒子左侧浮动，navitems导航栏组
先看dropdown里，先表头，这里意思是description term, 然后是一系列表格内容，其中text-align，line-height调整
整个盒子距离边框有2px距离，此外文字距离盒子要有10px padding值
利用伪元素以及icomoon字体图标设置小三角，利用absolute定位三角
当鼠标经过后字体要变色背景要变色，字体变色通过li:hover a来表示，意思是鼠标经过后a里字有变化
.nav {height: 47px;border-bottom: 2px solid red;
}.nav .dropdown {float: left;height: 45px;width: 210px;background-color: red;
}.nav .navitems {float: left;
}.dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}.dropdown .dd {display: none;width: 210px;height: 465px;background-color: red;}.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;padding-left: 10px;margin-left: 2px;color: #fff;
}.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;font-family: 'icomoon';content: '\e920';
}.dropdown .dd ul li:hover a {/* 表示鼠标经过后a变颜色 */color: red;
}.dropdown .dd ul li:hover {background-color: #fff;
}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.navitems ul li {float: left;
}
<div class="dropdown"><div class="dt">全部商品样式</div><div class="dd"><ul><li><a href="#">家用电器</a></li><li><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">电器</a></li><li><a href="#">电脑、办公</a></li><li><a href="#">家用电器</a></li><li><a href="#">家用电器</a></li><li><a href="#">家用电器</a></li></ul></div></div>navitems用无序列表写，他们都是并列的，文字要垂直居中，防止文字个数不一样，使用margin，最好给a，这样用户点击链接跳转范围大
.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}footer部分
准备modify-service大盒子给下边框，一共1200，让每个li浮动，指定padding-left
对于盒子右边有文字的情况，让盒子浮动，文字自然就环绕了
这里盒子背景是精灵图，定位通过坐标。
准备.mod_help大类，注意这里盒子间间距通过宽度来设置，每个盒子都由data list组成，但是最后一个list因此会掉下去，通过last-child选中后重新设置宽度。
.footer {padding-top: 30px;height: 415px;background-color: #f5f5f5;
}.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}.mod_service ul li {float: left;width: 300px;height: 50px;/* background-color: pink; */padding-left: 30px;/* 盒子右边有文字的情况，让盒子浮动，文字自然就围绕了 */
}.mod_service ul li h5 {float: left;width: 50px;height: 50px;/* background-color: purple; */background: url(../images/icons.png) no-repeat -252px -3px;/* 这里好离谱，向左侧是负的越大，向下侧是负的越小 */margin-right: 8px;
}.service_txt h4 {font-size: 14px;
}.service_txt p {font-size: 12px;
}.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}.mod_help dl {float: left;/* 间距通过设置宽度 */width: 200px;
}.mod_help dl:last-child {width: 90px;text-align: center;}.mod_help dl dt {/* definition list定义列表，term，definition */font-size: 16px;margin-bottom: 10px;}.mod_help dl dd {font-size: 14px;
}<footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">购物流程</a></dd></dl><dl><dt>服务指南</dt><dd><img src="images/wx_cz.jpg">品优购客户端</dd></dl></div>mod-copyright
版权部分，links里设置好边距后copyright部分设置行高，links里的链接之间设置margin
<div class="mod_copyright"><div class="links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn京ICP备08001421号京公网安备110108007702</div></div>.mod_copyright {text-align: center;padding-top: 20px;/* 首先所有文字都居中 */
}.links {margin-bottom: 15px;}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}
这篇关于品优购：nav导航、footer部分的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
