1. IT分享知识网首页
  2. 开发框架
  3. CSS

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

老牧童 • • CSS • 阅读 172

小米商城网页版（js+css）js：<!DOCTYPEhtml><html> <head><metacharset="utf-8"/><metaname=""content=""/>

大家好，欢迎来到IT知识分享网。小米商城网页版（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>
   <!–1 导航1–>
   <div class=”header”>
    <div class=”top center”>
     <!–1.1左–>
     <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>
    
    <!–1.2右–>
     <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>
   
   <!–2 导航2–>
   <div class=”header2″>
    <div class=”header2 center”>
     <!–2.1 logo–>
     <div class=”images”>
      <img src=”img/logo_foot.png”/>
      <img src=”img/yyymix.gif” />
     </div>
     <!–2.2 ul文本–>
     <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>
    <!– 2.3 搜索框–>
     <div class=”search”>
      <input type=”text”  placeholder=”小米6小米MIX现货” style=”height: 60px;width: 240px;”/>
      <input type=”button” value=”搜索” style=”width: 50px;height: 66px;”/>
     </div>
    </div>
   </div>
   <!– 3 轮播图–>
   <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>
   <!–4 广告页面–>
   <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>
   <!–5 小米明星单品–>
   <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>
   <!–6 配件–>
   <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>
   <!–7 底部链接–>
   <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{

 width: 100%;

 background: #333;

 height: 40px;

}

.header .top{

 width: 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;

 width: 120px;

 text-align: center;

 cursor: pointer;

 background: #FF6700;

 color: #fff;

 

}

.gouwuche:hover{

 background: #666;

 color: #000;

}

/*———————————————————*/

/*导航2*/

.header2{

 width: 100%;

 height: 100px;

}

.header2 .center{

 width: 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;

 width: 1226px;

 height: 460px;

 background: url(../img/banner.jpg) no-repeat;

 position: relative;

}

.main_left{

 background: #0C0C13;

 width: 235px;

 height: 460px;

 position: absolute;

 float: left;

}

.main .main_left ul li{

 width: 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{

 width: 1226px;

 height: 170px;

 margin-top: 15px;

}

.ad_left{

 width: 235px;

 height: 170px;

}

.ad_small{

 width: 78px;

 height: 85px;

}

.ad_big{

 width: 330px;

 height: 170px;

 text-align: center;

}

.ad .ad_big img{

 width: 325px;

 height: 170px;

 float: left;

}

/*———————————————————*/

/*明星单品*/

.star{

 width: 1226px;

 height: 300px;

 margin-top: 15px;

}

.title{

 height: 30px;

 font-size: 20px;

 font-weight: 900;

}

 /* 商品 */

.products{

 width: 1226px;

 height: 220px;

 text-align: center;

 margin-top: 10px;

 

}

.one_pds{

 

 width: 245px;

 height: 220px;

}

.pic{

 width: 245px;

}

.star .pds .one_pds .pic img{

 border-top: 1px solid pink;

 width: 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{

 width: 1226px;

 height: 630px;

 margin-top: 15px;

}

.pd{

 width: 1226px;

 height: 600px;

 text-align: center;

 margin-top: 10px;

}

.pd_left{

 width: 230px;

 height: 600px;

}

.parts .pd .pd_left img{

 width: 230px;

 height: 300px; 

}

.pd_right{

 width: 996px;

 height: 600px;

}

.pd_top{

 width: 996px;

 height: 300px;

}

.pd_bot{

 width: 996px;

 height: 300px;

}

.one_pd{

 width: 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{

 width: 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;

}

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/31994.html

赞 (0)
老牧童老牧童
0
上一篇 2023-11-14 22:33
下一篇 2023-11-18 17:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信