品优购（超干货详细）

头部导航栏部分

html

<!-- 头部导航栏部分star -->
<div class="shortcut">
    <div class="w">
        <!-- 导航栏左侧向左浮动 -->
        <div class="fl">
            <ul>
                <li>品优购欢迎您！&nbsp;</li>
                <li>
                    <a href="">请登录</a>&nbsp;<a href="" class="style-red">免费注册</a>
                </li>
            </ul>
        </div>
        <!-- 右侧盒子向右浮动 -->
        <div class="fr">
            <ul>
                <li>我的订单</li>
                <li></li>
                <li class="arrow-icon">我的品优购</li>
                <li></li>
                <li>品优购会员</li>
                <li></li>
                <li>企业采购</li>
                <li></li>
                <li class="arrow-icon">关注品优购</li>
                <li></li>
                <li class="arrow-icon">客户服务</li>
                <li></li>
                <li class="arrow-icon">网站导航</li>
          
            </ul>
        </div>
    </div>
</div>
<!-- 头部导航栏部分end -->

css

/* 头部导航栏部分star */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
.shortcut .fl ul li {
    float: left;
}
.shortcut .fr ul li {
    float: left;
    /* 是盒子里面的li进行浮动 */
}
.shortcut .fr ul li:nth-child(2n) {
    margin: 0 14px;
    /* 外边距，li和li之间的距离 */
    margin-top: 9px;
    height: 12px;
    width: 1px;
    background-color: #c3c3c3;
    /* li不是字体而是一个盒子，所以只能使用背景颜色bgc */
}
.arrow-icon::after {
    font-family: 'icomoon';
    content: "";
    padding-left: 2px;

header部分

代码：
html

<!-- header部分star -->
<div class="header w">
    <!-- logo部分开始 -->
    <div class="logo">
        <h1>
            <a href="index.html" title="品优购商城">品优购</a>
            <!-- title给链接添加提示信息，当鼠标滑过链接时显示 -->
        </h1>
    </div>
    <!-- search部分开始 -->
    <div class="search">
        <input type="text" placeholder="语言开发">
        <!-- placeholder当输入文字后语言开发消失删除后又出现 -->
        <button>搜索</button>
    </div>
    <!-- hotwords部分开始 -->
    <div class="hotwords">
        <a href="#" class="style-red">优惠购首发</a>
        <!-- 对于单个文字添加特性，可以直接在html中调用 -->
        <a href="#">亿元优惠</a>
        <a href="#">9.9元优惠</a>
        <a href="#">美满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
    </div>
    <!-- shopcars部分开始 -->
    <div class="shopcars">
        我的购物车
        <span>84</span>
    </div>
</div>
 <!-- header部分end -->

/* header部分star */
/* 都使用定位制作 */
.header {
    position: relative;
    height: 106px;
}
.logo {
   position: relative;
    left: 0;
    top: 24px;
    width: 180px;
    height: 57px;    
}
.logo a {
    position: absolute;
    display: block;
    /* a是行内元素，设置大小需改为块级元素 */
    width: 180px;
    height: 57px;
    /* 隐藏链接里面的字 */
    /* 第一种方法 */
    /* font-size: 0; */
    /* 第二种方法 */
    text-indent: -100px;
    overflow: hidden;
    background: url(../images/logo.png) no-repeat;
    /* logo作为背景图片放到盒子里 */
}
.search {
    position: absolute;
    left: 347px;
    top: 25px;
    width: 540px;
    height: 36px;
    border: 2px solid #b1191a;
}
.search input {
    padding-left: 10px;
    /* 使得语言开发向里面移动 */
    /* 文字移动用padding盒子移动用margin */
    float: left;
    height: 32px;
    width: 456px;
}
.search button {
    float: left;
    width: 80px;
    height: 32px;
    background-color: #b1191a;    
}
.hotwords {
    position: absolute;
    left: 359px;
    top: 69px;
}
.hotwords a {
    margin-right: 26px;
    font-size: 12px;
}
.shopcars {
    text-align: center;
    position: absolute;   
    right: 64px;
    top: 25px;
    width: 140px;
    height: 36px;
    font-size: 12px;
    color: #666;
    line-height: 36px;
    border: 1px solid #f2f2f2;
    background-color: #f7f7f7;
}
.shopcars::before {
    font-family: 'icomoon';
    margin-right: 5px;
    content: "";
    color:  #b1191a;
}
.shopcars::after {
    font-family: 'icomoon';
    margin-left: 10px;
    content: "";
    color:  #b1191a;
}
.shopcars span {
    position: absolute;
    top: -2px;
    left: 105px;
    padding: 0 5px;
    height: 15px;
    line-height: 15px;
    border-radius: 7px 7px 7px 0;
    /* 圆角制作 */
    font-size: 12px;
    color: #fefefe;
    background-color: #b1191a; 
}

footer部分

 <!-- footer部分star -->
 <div class="footer">
     <div class="w">
         <!-- mod_serves部分star -->
         <div class="mod_serves">
             <ul>
                 <li>
                     <h5></h5>
                     <!-- 使用精灵图制作 -->
                     <div class="serves_txt">
                         <h4>正品保障</h4>
                         <p>正品保障，提供发票</p>
                     </div>
                 </li>
             </ul>
             <ul>
                 <li>
                 </li>
             </ul>
             <ul>
             </ul>
             <ul>
             </ul>
             <ul>
                 <li>
                     <h5></h5>
                     <!-- 使用精灵图制作 -->
                     <div class="serves_txt">
                         <h4>帮助中心</h4>
                         <p>您的购物指南</p>
                     </div>
                 </li>
             </ul>
         </div>
         <!-- mod_serves部分end -->
         <!-- mod_help部分star -->
         <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>
                 <dd><a href="#">联系客服 </a></dd>
             </dl>
             <dl>
             </dl>
             <dl>
             </dl>
             <dl>
             </dl>
             <dl>
             </dl>                                        
             <dl>
                 <dt>帮助中心</dt>
                 <img src="images/help.png" alt="">
                 <p>品优购客户端</p>
             </dl>
         </div>
         <!-- mod_help部分end -->
         <!-- mod_copyright部分star -->
         <div class="mod_copyright">
             <div class="links">
                     <a href="#">关于我们</a>|
                     <a href="#">联系我们</a>|
                     <a href="#">商家入驻</a>|
                     <a href="#">营销中心</a>|
                     <a href="#">手机品优购</a>|
                     <a href="#">友情链接</a>|
                     <a href="#">销售联盟</a>|
                     <a href="#">品优购社区</a>|
                     <a href="#">品优购公益</a>|
                     <a href="#">English Si</a>|
                     <a href="#">Contact</a></li>
             </div>
             <div class="copyright">
                 地址：北京市昌平区建材城西路金燕龙办
                 公楼一层 邮编：100096 电话：400-618-
                 4000 传真：010-82935100 邮箱: zhangh
                 j+itcast.cn</br>
                 京ICP备08001421号京公网安备110108007702
             </div>
         </div>                                           
     </div>
 </div>
 <!-- footer部分end -->
ody>
tml>

/* footer部分开始 */
.footer {
    height: 418px;
    background-color: #f5f5f5;
}
.mod_serves {
    padding: 30px 0;
    height: 110px;
    border-bottom: 1px solid #e0e0e0;
}
.mod_serves ul li {
    float: left;
    padding-left: 35px;
    height: 50px;
    width: 240px;
}
.mod_serves ul li h5 {
    margin-right: 7px;
    float: left;
    height: 50px;
    width: 50px;
    background: url(../images/icons.png) no-repeat -252p
}
.serves_txt h4 {
    font-size: 14px;
    color: #333333;
}
.serves_txt p {
    font-size: 12px;
    color: #666666;
}
.mod_help {

    height: 188px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.mod_help dl {
    padding: 20px 0 0 50px;
    float: left;
    height: 188px;
    width: 200px;
}
.mod_help dl dt {
    font-size: 16px;
    color: #333333;
}
.mod_help dl dd {
    line-height: 22px;
    font-size: 12px;
    color: #666666;
}
.mod_help dl:last-child {
    text-align: center;
    padding-right: 60px
}
.mod_help dl:last-child img {
    margin: 15px 0 8px 0;
}
.mod_copyright {
   text-align: center;
    height: 120px;
}
.links {

    margin-bottom: 15px;
}
.links a {
    padding: 0 10px;
}
.copyright {
    line-height: 20px;
}