苏宁页面2

哼哼蘅

已于 2022-09-09 23:23:27 修改

阅读量117

点赞数

文章标签： css html 前端

于 2022-09-09 23:23:16 首次发布

本文链接：https://blog.csdn.net/m0_62270197/article/details/126790884

版权

*{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.top{
    height: 30px;
    line-height: 35px;
    font-size: 13px;
    background-color: #f5f5f5;
}

.top  ul li a{
    float: left;
    padding: 0 5px;
    font-size: 12px;
    color: #666;
}

.w{
    width: 1200px;
    margin: 0 auto;
}
.header{
    width: 1200px;
    height: 60px;
    margin: 30px auto;
     background-color: aliceblue; 
}
.logo{
    float: left;
    width: 198px;
    height: 60px;
    /* display:block;
    float: left; */
    background-color: blue; 
}
.search{
    float: left;
    height: 60px;
     margin-left: 200px; 
    margin-top: 10px;
  
}
.search input{
    float:left;
    width: 370px;
    height: 40px;
    border: 2px solid #ff6600;
    border-radius: 10px 0 0 10px;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
}
.search button{
    float: left;
    width: 120px;
    height: 44px;
    background-color: #ff6600;
    border: 0;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 18px;
    text-align: center;
}
.hotkey a{
    text-decoration: none;
    color: #333;
    font-size: 14px;
    text-align: center;
}
.hotkey{
    margin-top: 3px;
    text-align: center;
}
.hotkey a:hover{
    color: #ff6600;
}
.nav{
    width: 1200px;
    margin: 0 auto;
}
.nav ul li{
    float: left;
}
.nav ul li a{
    display: block;
    height: 42px;
    padding: 0 20px;
    line-height: 42px;
    font-size: 18px;
    color: #000000; 
}
.nav ul li a:hover{
    color:#ff6600 ;
}
.nav .fl a{
    float: left;
    width: 150px;
    background-color: #ff6600;
    color: #fff;
    font-size: 15px;
    border-radius: 10px 10px 0 0;
    border: 0;
}
.nav .gg{
    float: left;
    width: 355px;
    height: 70px;
}
.layer{
    float: left;
    width: 1200px;
    margin: 0 auto;
}
.baner{
    height: 600px;
    background-color: #f5f5f5;
    margin: 0 auto;
}
.baner .w{
    
    height: 600px;
    background: url(baner图片.png) no-repeat  center;
}
.baner ul li { 
    color: #000000;
    font-size: 15px;

}
.baner ul li a:hover{
    color:#ff6600 ;
}
.footer{
    height: 415px;
    background-color: #fff;
    padding-top: 30px;

}
.mod_service{
    height: 80px;
    border-bottom: 1px solid #ccc;
}
.mod_service ul li{
    float: left;
    width: 200px;
    height: 50px;
   
    padding-left: 35px;
}
.mod_service ul li h5{
    float: left;
    width: 50px;
    height: 50px;
    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: 30px;
}
.mod_help dl{
    float: left;
    width: 200px;
}
.mod_help dl:last-child{
    width: 90px;
}
.mod_help dl dt{
    font-size: 16px;
    margin-bottom: 10px;
}
.mod_help dl dt dd {
    font-size: 12px;
}
.mod_help dl dt dd a:hover{
    color:#666 ;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁易购页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="top">
        <ul class="left">
            <li class="mr">
                <a href="#">网站导航&nbsp;</a>
            </li>
            <li class="mr">
                <a href="#">商家入驻&nbsp;</a>
            </li>
            <li class="mr">
                <a href="#">客户服务&nbsp;</a>
            </li>
            <li>
                <a href="#">网页无障碍&nbsp;</a>
            </li>
            <li>
                <a href="#">菏泽</a>
            </li>
        </ul>
        <ul class="right">
            <li class="mr">
                <a href="#">请登录&nbsp;</a>
            </li>
            <li class="mr">
                <a href="#">注册有礼&nbsp;</a>
            </li>
            <li class="mr">
                <a href="#">我的订单&nbsp;</a>
            </li>
            <li class="mr">
                <a href="#">我的易购&nbsp;</a>
            </li>
            <li>
                <a href="#">苏宁会员&nbsp;</a>
            </li>
            <li>
                <a href="#">购物车&nbsp;</a>
            </li>
            <li><a href="#">易付宝&nbsp;</a>
            </li>
            <li><a href="#">企业采购&nbsp;</a>
            </li>
            <li><a href="#">手机苏宁&nbsp;</a>
            </li>
        </ul>

    </div>
   <div class="header w">
    <div class="logo">
         <img src="logo.jpg" alt="" >
    </div>
     <div class="search">
         <input type="text" value="热水器精选">
         <button>
        搜索
         </button>
     </div>
   </div>
   <div class="hotkey">  
    <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="#">|</a>
    <a href="#">电视</a>
    <a href="#">|</a>
    <a href="#">ipad</a>    
    <a href="#">|</a>
    <a href="#">热水器</a>
    <a href="#">|</a>
    <a href="#">沙发</a>
   </div>
   <div class="nav ">
       <ul>
           <li class="fl"><a href="#">分类</a></li>
           <li><a href="#">大聚惠</a></li>
           <li><a href="#">苏宁家电</a></li>
           <li><a href="#">手机数码</a></li>
           <li><a href="#">苏宁超市</a></li>
           <li><a href="#">家具建材</a></li>
           <li><a href="#">生活家电</a></li>
           <li class="gg"><a href="#"><img src="公告.png"></li>
       </ul>
   </div>
   <div class="baner">
       <div class="w">
    <ul>
        <li><a href="#">手机/</a><a href="#">运营商</a></li>
        <li><a href="#">厨卫/</a><a href="#">生活家电/</a><a href="#">厨具</a></li>
        <li><a href="#">电脑办公/</a><a href="#">相机</a></li>
        <li><a href="#">家具/</a><a href="#">家装/</a><a href="#">家纺/</a><a href="#">灯具</a></li>
        <li><a href="#">美妆/</a><a href="#">个护/</a><a href="#">清洁/</a><a href="#">宠物</a></li>
        <li><a href="#">母婴/</a><a href="#">玩具/</a><a href="#">车床/</a><a href="#">童床</a></li>
        <li><a href="#">运动/</a><a href="#">户外/</a><a href="#">国米/</a><a href="#">骑行</a></li>
        <li><a href="#">女装/</a><a href="#">男装/</a><a href="#">内衣/</a><a href="#">鞋靴</a></li>
        <li><a href="#">箱包/</a><a href="#">钟表/</a><a href="#">珠宝/</a><a href="#">艺术</a></li>
        <li><a href="#">汽车/</a><a href="#">电摩/</a><a href="#">汽车用品</a></li>
        <li><a href="#">图书/</a><a href="#">艺术/</a><a href="#">原版/</a><a href="#">文学</a></li>
        <li><a href="#">医疗健康/</a><a href="#">计生情趣</a></li>
        <li> <a href="#">理财/</a><a href="#">分期/</a><a href="#">便民</a></li>
    </ul>
</div>
   </div>
   <footer class="footer">
       <div class="w">
           <div class="mod_service">
               <ul>
                   <li>
                      <h5>
                          <img src="正.jpg">
                      </h5> 
                      <div class="service_txt">
                       <h4>正品保障</h4>
                       <p>正品保障，提供发票</p>   
                      </div>
                   </li>
                   <li>
                    <h5>
                        <img src="急.jpg">
                    </h5> 
                    <div class="service_txt">
                     <h4>极速物流</h4>
                     <p>如约送货、送货入户</p>   
                    </div>
                 </li>
                 <li>
                    <h5>
                        <img src="正.jpg">
                    </h5> 
                    <div class="service_txt">
                     <h4>售后无忧</h4>
                     <p>30天包退、365天包换</p>   
                    </div>
                 </li>
                 
                 <li>
                    <h5>
                        <img src="正.jpg">
                    </h5> 
                    <div class="service_txt">
                     <h4>帮助中心</h4>
                     <p>您的购物指南</p>   
                    </div>
                 </li>
                 <li>
                    <h5>
                        <img src="正.jpg">
                    </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>   
        </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>   
        </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>  
            <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>   
        </dl>
          </div>
       </div>
   </footer>
</body>
</html>