品优购：nav导航、footer部分

                    目录

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;
}

                

                    全部商品样式

                
                

                    

                        
家用电器
                        
手机、数码、电器
                        
电脑、办公
                        
家用电器
                        
家用电器
                        
家用电器


                    
                
            

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;
}

        

            

                

                    

                        

                        

                            
正品保障
                            
正品保障，提供发票
                        
                    
                    

                        

                        

                            
正品保障
                            
正品保障，提供发票
                        
                    
                    

                        

                        

                            
正品保障
                            
正品保障，提供发票
                        
                    
                    

                        

                        

                            
正品保障
                            
正品保障，提供发票
                        
                    

                
            

            

                

                    
服务指南
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                

                

                    
服务指南
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                

                

                    
服务指南
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                

                

                    
服务指南
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                

                

                    
服务指南
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                    
购物流程
                

                

                    
服务指南
                    
品优购客户端


                




            

mod-copyright

版权部分，links里设置好边距后copyright部分设置行高，links里的链接之间设置margin

                

                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U

                
                

                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
                    京ICP备08001421号京公网安备110108007702
                
            

.mod_copyright {
    text-align: center;
    padding-top: 20px;
    /* 首先所有文字都居中 */
}

.links {
    margin-bottom: 15px;


}

.links a {
    margin: 0 3px;
}

.copyright {
    line-height: 20px;
}