小米商城网页版（js+css）

js：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="" content=""/>
  <title>小米商城</title>
  <link rel="stylesheet" type="text/css" href="css/xiaomi.css"/>
</head>
<body>
  <div>
   
   <div class="header">
    <div class="top center">
     
     <div class="left fl">
      <ul>
       <li><a href="#">小米商城</a></li>
       <li>|</li>
       <li><a href="#">MIUI</a></li>
       <li>|</li>
       <li><a href="#">米聊</a></li>
       <li>|</li>
       <li><a href="#">游戏</a></li>
       <li>|</li>
       <li><a href="#">多看阅读</a></li>
       <li>|</li>
       <li><a href="#">云服务</a></li>
       <li>|</li>
       <li><a href="#">金融</a></li>
       <li>|</li>
       <li><a href="#">移动端APP</a></li>
       <li>|</li>
       <li><a href="#">问题反馈</a></li>
       <li>|</li>
       <li><a href="#">areyouok</a></li>
       <div class="clear"></div>
      </ul>
     </div>

    
     <div class="right fr">
      <div class="gouwuche fr"><a href="#">购物车</a></div>
      <div class="fr">
       <ul>
        <li><a href="#">登陆</a></li>
        <li>|</li>
        <li><a href="#">注册</a></li>
        <li>|</li>
        <li><a href="#">消息通知</a></li>

       </ul>
      </div>
     </div>
    </div>
   </div>

   
   <div class="header2">
    <div class="header2 center">
     
     <div class="images">
      <img src="img/logo_foot.png"/>
      <img src="img/yyymix.gif" />
     </div>
     
     <div class="text">
      <ul>
       <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><a href="#">智能硬件</a></li>
       <li><a href="#">服务</a></li>
       <li><a href="#">社区</a></li>
      </ul>
     </div>
    
     <div class="search">
      <input type="text" placeholder="小米6小米MIX现货" style="height: 60px; 240px;"/>
      <input type="button" value="搜索" style=" 50px;height: 66px;"/>
     </div>
    </div>
   </div>
   
   <div class="main center">
   
    <div class="main_left fl">
     <ul>
      <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><a href="#">保护套贴膜</a></li>
      <li><a href="#">线材支架储存卡</a></li>
      <li><a href="#">箱包服饰鞋</a></li>
      <li><a href="#">米兔生活周边</a></li>
     </ul>
    </div>
    <div class="clear"></div>
   </div>
   
   <div class="ad center">
    <div class="ad_left fl">
     <div class="ad_small fl"><img src="img/hjh_01.gif"><a href="#"></a></div>
     <div class="ad_small fl"><img src="img/hjh_02.gif"/><a href="#"></a></div>
     <div class="ad_small fl"><img src="img/hjh_03.gif"/><a href="#"></a></div>
     <div class="ad_small fl"><img src="img/hjh_04.gif"/><a href="#"></a></div>
     <div class="ad_small fl"><img src="img/hjh_05.gif"/><a href="#"></a></div>
     <div class="ad_small fl"><img src="img/hjh_06.gif"/><a href="#"></a></div>
     <div class="clear"></div>
    </div>
    <div class="ad_big fl">
     <a href="#"><img src="img/hongmi4x.png" ></a>
    </div>
    <div class="ad_big fl">
     <a href="#"><img src="img/pinghengche.jpg" ></a>
    </div>
    <div class="ad_big fl">
     <a href="#"><img src="img/xiaomi5.jpg" ></a>
    </div>
    <div class="clear"></div>
   </div>
   
   <div class="star center">
    
    <div class="title">
     小米明星单品
    </div>
    
    <div class="pds">
     <div class="one_pds fl">
      <div class="pic">
       <a href="#"><img src="img/pinpai1.png" alt=""></a>
      </div>
      <div class="sosi">
       <a href="#"><p>小米MIX</p></a>
       <p>5月9日-12人享花呗12期分期免息</p>
       <p>3499元起</p>
      </div>
     </div>
     <div class="one_pds fl">
      <div class="pic">
       <a href="#"><img src="img/pinpai2.png" alt=""></a>
      </div>
      <div class="sosi">
       <a href="#"><p>小米5s</p></a>
       <p>5月9日-10日，下单立减200元</p>
       <p>1999元</p>
      </div>
     </div>
     <div class="one_pds fl">
      <div class="pic">
       <a href="#"><img src="img/pinpai3.png" alt=""></a>
      </div>
      <div class="sosi">
       <a href="#"><p>小米手机5 64GB</p></a>
       <p>5月9日-10日，下单立减100元</p>
       <p>1799元</p>
      </div>
     </div>
     <div class="one_pds fl">
      <div class="pic">
       <a href="#"><img src="img/pinpai4.png" alt=""></a>
      </div>
      <div class="sosi">
       <a href="#"><p>小米电视3s 55英寸</p></a>
       <p>5月9日，下单立减200元</p>
       <p>3999元</p>
      </div>
     </div>
     <div class="one_pds fl">
      <div class="pic">
       <a href="#"><img src="img/pinpai5.png" alt=""></a>
      </div>
      <div class="sosi">
       <a href="#"><p>小米笔记本</p></a>
       <p>更轻更薄，像杂志一样随身携带</p>
       <p>3599元起</p>
      </div>
     </div>
     <div class="clear"></div>
    </div>
   </div>
   
   <div class="parts center">
    
    <div class="title">
     配件
    </div>
    
    <div class="pd">
     
     <div class="pd_left fl">
      <div><a href="#"><img src="img/peijian1.jpg"/></a></div>
      <div><a href="#"><img src="img/peijian6.png"/></a></div>
     </div>
     
     <div class="pd_right fr">
      <div class="pd_top">
       <div class="one_pd fl">
        <div class="pic">
         <img src="img/peijian2.jpg"/>
        </div>
        <div class="sosi">
         <a href="#">小米6 硅胶保护套</a>
         <p>49元</p>
         <p>372人评价</p>
        </div>
       </div>
       <div class="one_pd fl">
        <div class="pic">
         <img src="img/peijian3.jpg"/>
        </div>
        <div class="sosi">
         <a href="#">小米手机4c 小米4c 智能</a>
         <p>69元</p>
         <p>42人评价</p>
        </div>
       </div>
       <div class="one_pd fl">
        <div class="pic">
         <img src="img/peijian4.jpg"/>
        </div>
        <div class="sosi">
         <a href="#">红米NOTE 4X 红米note4X</a>
         <p>29元</p>
         <p>32人评价</p>
        </div>
       </div>
       <div class="one_pd fr">
        <div class="pic">
         <img src="img/peijian5.jpg"/>
        </div>
        <div class="sosi">
         <a href="#">小米支架式自拍杆</a>
         <p>99元</p>
         <p>972人评价</p>
        </div>
       </div>
       <div class="clear"></div>
      </div>
      <div class="pd_bot">
       <div class="one_pd fl">
        <div class="pic">
         <img src="img/peijian7.jpg"/>
        </div>
        <div class="sosi">
         <a href="#">小米指环支架</a>
         <p>77元</p>
         <p>88人评价</p>
        </div>
       </div>
       <div class="one_pd fl">
        <div class="pic">
         <img src="img/peijian8.jpg"/>
        </div>
        <div class="sosi">
         <a href="#">小米随身风扇</a>
         <p>33元</p>
         <p>66人评价</p>
        </div>
       </div>
       <div class="one_pd fl">
        <div class="pic">
         <img src="img/peijian9.jpg"/>
        </div>
        <div class="sosi">
         <a href="#">一只黑杆</a>
         <p>59元</p>
         <p>39人评价</p>
        </div>
       </div>
       <div>
        <div>
         <a href="#"><img src="img/hongmin4.png" ></a></a>
        </div>
        <div>
         <a href="#"><img src="img/liulangengduo.png" ></a>
        </div>
       </div>
       <div class="clear"></div>
      </div>
     </div>
    </div>
   </div>
   
   <div class="footer center">
    <p>
     <a href="#">小米商城</a>
     <span>|</span>
     <a href="#">MIUI</a>
     <span>|</span>
     <a href="#">米聊</a>
     <span>|</span>
     <a href="#">多看书城</a>
     <span>|</span>
     <a href="#">小米路由器</a>
     <span>|</span>
     <a href="#">视频电话</a>
     <span>|</span>
     <a href="#">小米天猫店</a>
     <span>|</span>
     <a href="#">小米淘宝直营店</a>
     <span>|</span>
     <a href="#">小米网盟</a>
     <span>|</span>
     <a href="#">小米移动</a>
     <span>|</span>
     <a href="#">隐私政策</a>
     <span>|</span>
     <a href="#">Select Region</a>
    </p>
    <p>@mi.com 京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014]0059-0009号</p>
    <p>违法和不良举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
   </div>
  </div>
</body>
</html>

css：

*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-size: 12px;
font-family: 微软雅黑;
color: #000000;
border-style: none;
border-collapse: collapse;
}
.center{
margin: 0 auto;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.ml{
margin-left: 8px;
}
a{
color: white;
}
button{
cursor: pointer;
}
/*---------------------------------------------------------*/
/*导航1*/
.header{
100%;
background: #333;
height: 40px;
}
.header .top{
1226px;
height: 40px;
line-height: 40px;
}
.header .top .left ul li{
float: left;
color: #ccc;
font-size:12px;
}
.header .top .left ul li a{
display: block;
color: #b0b0b0;
padding: 0 8px;
}
.header .top .left ul li a:hover{
color: #fff;
}
.header .top .right ul li{
float: left;
font-size:12px;
color: #CCCCCC;
}
.header .top .right ul li a{
display: block;
color: #b0b0b0;
padding: 0 8px;
}
.header .top .right ul li a:hover{
color: #fff;
}
.gouwuche a{
color:#fff;
font-size: 15px;
}
.gouwuche{
margin:0 20px;
background: #424242;
120px;
text-align: center;
cursor: pointer;
background: #FF6700;
color: #fff;

}
.gouwuche:hover{
background: #666;
color: #000;
}
/*---------------------------------------------------------*/
/*导航2*/
.header2{
100%;
height: 100px;
}
.header2 .center{
1226px;
height: 100px;
line-height: 100px;
margin: 10px auto;
}

.images{
height: 100px;
padding: 20px;
float: left;
}
.header2 .center .text ul li{
float: left;
color: #ccc;
font-size:15px;
}
.header2 .center .text ul li a{
display: block;
color: #000;
padding: 0 8px;
}
.header2 .center .text ul li a:hover{
color: pink;
}
.header2 .center .search{
padding: 0;
float: right;
}
/*---------------------------------------------------------*/
/*轮播图*/
.main{
margin-top: 25px;
1226px;
height: 460px;
background: url(../img/banner.jpg) no-repeat;
position: relative;
}
.main_left{
background: #0C0C13;
235px;
height: 460px;
position: absolute;
float: left;
}
.main .main_left ul li{
235px;
height: 46px;

}
.main .main_left ul li a{
display: inline-block;
line-height: 46px;
margin-left: 16px;

}
.main .main_left ul li:hover{
background: #FF6700;
}
/*---------------------------------------------------------*/
/*广告页*/
.ad{
1226px;
height: 170px;
margin-top: 15px;
}
.ad_left{
235px;
height: 170px;
}
.ad_small{
78px;
height: 85px;
}
.ad_big{
330px;
height: 170px;
text-align: center;
}
.ad .ad_big img{
325px;
height: 170px;
float: left;
}
/*---------------------------------------------------------*/
/*明星单品*/
.star{
1226px;
height: 300px;
margin-top: 15px;
}
.title{
height: 30px;
font-size: 20px;
font-weight: 900;
}
/* 商品 */
.products{
1226px;
height: 220px;
text-align: center;
margin-top: 10px;

}
.one_pds{

245px;
height: 220px;
}
.pic{
245px;
}
.star .pds .one_pds .pic img{
border-top: 1px solid pink;
120px;
height: 120px;
}
.star .pds .one_pds .sosi p{
margin-top: 10px;
}
.star .pds .one_pds .sosi p:nth-child(1){
font-size: 12px;
}
.star .pds .one_pds .sosi p:nth-child(2){
color: #B0B0B0;
font-size: 10px;
}
.star .pds .one_pds .sosi p:nth-child(3){
color: red;
}
.star .pds .one_pds .sosi a p:hover{
color: red;
}
/*---------------------------------------------------------*/
/*配件*/
.parts{
1226px;
height: 630px;
margin-top: 15px;
}
.pd{
1226px;
height: 600px;
text-align: center;
margin-top: 10px;
}
.pd_left{
230px;
height: 600px;
}
.parts .pd .pd_left img{
230px;
height: 300px;
}
.pd_right{
996px;
height: 600px;
}
.pd_top{
996px;
height: 300px;
}
.pd_bot{
996px;
height: 300px;
}
.one_pd{
249px;
height: 300px;
}
.parts .pd .pd_right .one_pd .sosi p{
margin-top: 15px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(1){
font-size: 12px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(2){
color: red;
font-size: 10px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(3){
color: #B0B0B0;
}
.parts .pd .pd_right .one_pd .sosi a p:hover{
color: red;
}
/*---------------------------------------------------------*/
/*底部链接*/
.footer{
1226px;
height: 250px;
margin-top: 150px;
}
.footer p{
font-family: 微软雅黑;
text-align: center;
margin: 10px auto;
}
.footer p a{
color: #000000;
}
.footer p a:hover{
color: #FF0000;
}

相关阅读:
【BZOJ1087】状压dp
【数据库课程设计】
【BZOJ1295】最短路
vue组件间通信六种方式（完整版）
常见六大Web安全攻防解析
4、css之position
hue集成各种组件
1.25-1.26 Coordinator数据集和oozie bundle
1.22-1.24 Oozie企业使用案例
1.18-1.21 Oozie Coordinator调度

原文地址：https://www.cnblogs.com/sonerwx/p/10385979.html