亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

小米商城底部布局

original 2019-03-20 16:46:38 689
abstrait：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>仿小米商城</title>

<link rel="stylesheet" type="text/css" href="static/css/index.css">

   <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

   <style type="text/css">

   body,td,th {

color: #CCC;

}

   </style>

</head>


<body>

<div class="header">

<div class="main">

<div class="main-left">

<ul>

<li><a href="#">小米商城</a></li>

<li> <a href="#">MIUI城</a></li>

<li> <a href="#">IOT</a></li>

<li> <a href="#">云服務(wù)</a></li>

<li> <a href="#">小愛分享平臺</a></li>

<li> <a href="#">金融</a></li>

<li> <a href="#">有品</a></li>

<li> <a href="#">企業(yè)服務(wù)</a></li>

<li> <a href="#">selectRegion</a></li>

</ul>

</div>


<div class="main-right">

<ul>

<li><a href="#">登錄</a></li>

<li><a href="#">注冊</a></li>

<li><a href="#">我的訂單</a></li>

<li><a href="#">購物車</a></li>

</ul>

</div>


</div>


</div><!--頭部導(dǎo)航-->



<div class="contents">


<div class="content-menu"><!--內(nèi)容導(dǎo)航-->

<div class="xmdh">

<div class="xmtp1"><img src="static/img/footlogo.png" width="56" height="57" /></div>

<div class="xmtp2"><img src="static/img/logoAD.gif" width="163" height="66" /></div>

<div class="xmdhnr">

<ul>

<li><a href="#">小米手機(jī)</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="#">服務(wù)</a></li>

<li><a href="#">社區(qū)</a></li>

</ul>


<div class="xmcx"><form>

<input type="text" name="" >

</form>


</div>


</div>

<div class="clear"></div>


</div>

</div>

</div>

<div class="xmdh2"></div>

<div class="xmsg">

<h3 style="color: #000000;">小米閃購</h3>

<div class="xmsg1">


<div class="xmsg-time">18:00 場</div>

 <div class="flash fa fa-flash fa-4x" style="color: #ef3a3b; margin-left:90px; margin-top:20px;"></div>

 <div class="xmsg-wz">距離開始還有</div>

 <div class="xmsg-sj">

 <span class="sj-sz">00</span>

 <span class="maohao1">:</span>

 <span class="sj-fz">00</span>

 <span class="maohao2">:</span>

 <span class="sj-mz">00</span>

 </div>



</div>


<div class="xmsg2">

<div class="xmsgtp2"><img src="static/img/flashbuy/flashbuy1.jpg" width="200" height="200" />

<h3 class="xmsg-sm">米家空氣凈化器Pro 白色</h3>

<h3 class="xmsg-sm">大空間，大循環(huán)</h3>

<p><span class="xmsg-jg">1399&nbsp;&nbsp;<del style="color: gray;">1499</del></span> </p>

</div> 

  

</div>


<div class="xmsg2"><img src="static/img/flashbuy/flashbuy2.jpg">

<h3 class="xmsg-sm">小米手環(huán)2 黑色</h3>

<h3 class="xmsg-sm">OLED顯示屏，觸摸操作</h3>

<p><span class="xmsg-jg">142&nbsp;&nbsp;<del style="color: gray;">149</del></span> </p>


</div>



<div class="xmsg2">

<img src="static/img/flashbuy/flashbuy3.jpg">

<h3 class="xmsg-sm">小米手環(huán)2 黑色</h3>

<h3 class="xmsg-sm">OLED顯示屏，觸摸操作</h3>

<p><span class="xmsg-jg">142&nbsp;&nbsp;<del style="color: gray;">149</del></span> </p>


</div>

<div class="xmsg2">

<img src="static/img/flashbuy/flashbuy4.jpg">

<h3 class="xmsg-sm">小米手環(huán)2 黑色</h3>

<h3 class="xmsg-sm">OLED顯示屏，觸摸操作</h3>

<p><span class="xmsg-jg">142&nbsp;&nbsp;<del style="color: gray;">149</del></span> </p>


</div>

<div class="longAD1"><img src="static/img/longAD1.jpg"></div>

</div>


<div class="phone">

<h2 style="color: #000000;">手機(jī)</h2>

<div class="phone-ck">查看更多<span ><i class="fa fa-angle-right"></i></span>

</div>


<div class="sjtp1"><img src="static/img/buy/手機(jī)AD.jpg">



</div>

<div class="phone1"><img src="static/img/buy/手機(jī)1.jpg" width="150px" height="150px">

<h3>小米5X 4GB+64GB</h3>

<p>光學(xué)變焦雙攝，拍人更美</p>

<span>1499 元</span>


</div>


<div class="phone2"><img src="static/img/buy/手機(jī)2.jpg" width="150px" height="150px">

<h3>小米5X 4GB+64GB</h3>

<p>光學(xué)變焦雙攝，拍人更美</p>

<span>1499 元</span>


</div>

<div class="phone3"><img src="static/img/buy/手機(jī)3.jpg" width="150px" height="150px">

<h3>小米5X 4GB+64GB</h3>

<p>光學(xué)變焦雙攝，拍人更美</p>

<span>1499 元</span>


</div>

<div class="phone4"><img src="static/img/buy/手機(jī)4.jpg" width="150px" height="150px">

<h3>小米5X 4GB+64GB</h3>

<p>光學(xué)變焦雙攝，拍人更美</p>

<span>1499 元</span>


</div>

</div>




<div class="xmjd">家電</div>

<div class="xmzn">智能</div>

<div class="wntj">為你推薦</div>

<div class="rpcp">熱評產(chǎn)品</div>

<div class="xmnr">內(nèi)容</div>

<div class="xmsp">視頻</div>

</div><!--內(nèi)容-->



<!--底部-->

<div class="foot">

<div class="foot-shdh">


<span class="shdh1"><a href="#"><i class="fa fa-wrench"></i>&nbsp;&nbsp;預(yù)約維修服務(wù)</a><span class="foot-fgx">|</span></span>

<span class="shdh2"><a href="#"><i class="fa fa-rotate-right"></i>&nbsp;&nbsp;7天無理由退貨</a><span class="foot-fgx">|</span></span>

<span class="shdh3"><a href="#"><i class="fa fa-refresh"></i>&nbsp;&nbsp;15天免費(fèi)換貨</a><span class="foot-fgx">|</span></span>

    <span class="shdh4"><a href="#"><i class="fa fa-gift"></i>&nbsp;&nbsp;滿150元包郵</a><span class="foot-fgx">|</span></span>

<span class="shdh5"><a href="#"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;520余家售后網(wǎng)點</a></span>

</div>

  

  <div class="foot-fwzx">

    <div class="foot-fwzx1">

<div class="foot-fwzx1-1">

<h4">幫助中心</h4>

<ul>

<li>賬戶管理</li>

<li>購物指南</li>

<li>訂單操作</li>

</ul>

</div> 



    <div class="foot-fwzx1-2">

   <h4">幫助中心</h4>

   <ul>

   <li>賬戶管理</li>

   <li>購物指南</li>

    <li>訂單操作</li>

    </ul>

     </div> 

  <div class="foot-fwzx1-3">

    <h4">幫助中心</h4>

    <ul>

   <li>賬戶管理</li>

   <li>購物指南</li>

    <li>訂單操作</li>

     </ul>

  </div> 

   <div class="foot-fwzx1-4">

     <h4">幫助中心</h4>

     <ul>

     <li>賬戶管理</li>

     <li>購物指南</li>

      <li>訂單操作</li>

      </ul>

   </div> 

    <div class="foot-fwzx1-5">

      <h4">幫助中心</h4>

      <ul>

       <li>賬戶管理</li>

       <li>購物指南</li>

        <li>訂單操作</li>

       </ul>

    </div> 

<div class="foot-fwzx1-6">

   <h4">幫助中心</h4>

   <ul>

   <li>賬戶管理</li>

   <li>購物指南</li>

    <li>訂單操作</li>

    </ul>

</div> 

 

</div>


     <div class="foot-fwzx2">

<span class="foot-fwzx2-dh">Feir-520-1314</span>

<ul>

<li>周一至周日 8:00-18:00</li>

<li>(僅收市話費(fèi))</li>

</ul>

<span class="foot-fwzx2-lxkf"><button type="button"><i class="fa fa-commenting "></i>&nbsp;聯(lián)系客服</button></span>

</div>

  </div>

  <div class="foot-dp">

  <div class="foot-dp0">

  <span><img src="static/img/footlogo.png"></span>

  </div>

  <div class="foot-dp1">

  

  <ul>

  <li>小米商城<span></span></li>

  <li>MIUI<span></span></li>

  <li>米家<span></span></li>

  <li>米聊<span></span></li>

  <li>多看<span></span></li>

  <li>游戲<span></span></li>

  <li>路由器<span></span></li>

  <li>米粉卡<span></span></li>

  <li>政企服務(wù)<span></span></li>

  <li>小米天貓店<span></span></li>

   <li>隱私政策<span></span></li>

  <li>問題反饋<span></span></li>

  <li>Select Region</li>


</ul>

  

  </div>

  

  <div class="foot-dp2">

  <ul>

  <li>?mi.com 京ICP證110507號 京ICP備10046444號 京公網(wǎng)安備11010802020134號 京網(wǎng)文[2014]0059-0009號 </li>

                  <li>違法和不良信息舉報電話：185-0130-1238，本網(wǎng)站所列數(shù)據(jù)，除特殊說明，所有數(shù)據(jù)均出自我司實驗室測試</li>

  </ul>

  

  </div>

  <div class="foot-dp3">

  <img src="static/img/footericon1.png">

  <img src="static/img/footericon2.png">

  <img src="static/img/footericon3.png">

  <img src="static/img/footericon4.png">

  <img src="static/img/footericon5.png">

  </div>

  <div class="foot-dp4">探索黑科技，小米為發(fā)燒而生！</div>

  </div>

</div>

</body>

</html>




@charset "utf-8";

/* CSS Document */

a{  color: #000000;

text-decoration: none;

cursor: pointer;

}

*{ margin:0px; padding:0px}

.clear{ clear: both}

/*頭部*/

.header{ width:100%;

          height:40px; 

  background: #333}

.main{ width:1200px; 

       height:40px; 

        margin:auto; 

       }

   

.main-left{ 

          

           height:40px; 

           float:left; 

   

           }


.main-right{ 

          

           height:40px; 

           float:right; 

   

           }  

.main-right ul li{

              float:left;

              padding: 10px;            

          font-size: 12px;

             }


ul{ list-style-type: none;          


         }

.main-right li a[href="#"]{ color:#CCC}

.main-left li a[href="#"]{ color:#CCC}

.main-left ul li{

float: left;

padding: 10px;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #CCC;

font-size: 12px;


             }

.main-left ul li a:hover{ color:#FFF}



/*主體內(nèi)容*/

.contents{ width:1200px; height:100%;  margin-top:10px; margin-left:auto; margin-right:auto}

.xmdh{ height:60px; }

.xmtp1{ float:left; margin-top:5px;}

.xmtp2{ float:left; margin-left:10px;}

.xmdhnr{ float:left;}

.xmdhnr ul li{ float:left; padding:5px; line-height:50px;}

.xmdhnr li a[href="#"]{ color:#000}

.xmdhnr li a:hover{ color:#F00}

/*查詢表單*/

.xmcx{

float:right;

width: 310px;

height: 50px;

border: 1px solid #CCC;

position: absolute;

left:1235px;


}

input{

width:240px;

height: 50px;

border-top-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #CCC;

border-bottom-color: #CCC;

border-left-color: #CCC;

padding-left: 10px;

}


/*小米導(dǎo)航2*/

.xmdh2{ height:640px; background:#ccc; width:1200px; margin:10px auto;}

/*小米閃購*/

.xmsg{



height: 530px;

width: 1200px;


margin-right: auto;

margin-left: auto;

}

.xmsg1{

height: 340px;

width: 230px;

background: #ccc;

float: left;

margin-top: 15px;

border-top-width: 1px;

border-top-style: solid;

border-top-color: #C00;

}

.xmsg-time{

font-size: 25px;

color: red;

margin-top: 40px;

position: relative;

left:55px;

}

.xmsg-wz{ font-size:15px; margin-left:55px; margin-top:30px;}

.xmsg-sj{ margin-left:30px; margin-top:30px;}

.sj-sz{ width:47px; height:42px; background:#666; font-size:25px; display:block; text-align:center; float:left; color:white; padding-top:5px;}

.maohao1{ font-size:30px; float:left; margin-left:5px; text-align:center;}

.sj-fz{ width:47px; height:42px; background:#666; font-size:25px; display:block; text-align:center;float:left; margin-left:5px; color:white;padding-top:5px;}

.maohao2{ font-size:30px; float:left; margin-left:5px; text-align:center;}

.sj-mz{ width:47px; height:42px; background:#666; font-size:25px; display:block; text-align:center;float:left; margin-left:5px;color:white;padding-top:5px; }


.xmsg2{ height:340px; width:230px;float:left; margin-top:15px; margin-left:10px;border-top-width:1px ;border-top-style: solid;border-top-color: crimson;}

.xmsgtp2{margin-left: 15px; }

.xmsg-sm{font-size: 15px; text-align: center;margin-top: 20px;}

.xmsg-jg{color: red; margin-top: 20px;margin-left: 50px;display: block;}

.longAD1{position: relative;top: 20px;}


.phone{ margin-top:10px; margin-left:auto; margin-right:auto; width:1200px; height:650px;background: #F5F5F5;}

.sjtp1{margin-top: 20px;width: 230px;height: 630px;position: absolute;}

.phone-ck{float: right;color: #000000;}

.phone1{width: 230px;height: 300px;background:white;position: absolute; left:600px; text-align: center;margin-top: 20px;padding-top: 10px;}

.phone2{width: 230px;height: 300px;background:white;position: absolute; left: 840px; text-align: center;margin-top: 20px;padding-top: 10px;}

.phone3{width: 230px;height: 300px;background:white;position: absolute; left: 1080px; text-align: center;margin-top: 20px;padding-top: 10px;}

.phone4{width: 230px;height: 300px;background:white;position: absolute; left: 1320px; text-align: center;margin-top: 20px;padding-top: 10px;}


.xmjd{ margin-top:10px; margin-left:auto; margin-right:auto; width:1200px; height:500px; background:#CCC}


.xmzn{ margin-top:10px; margin-left:auto; margin-right:auto; width:1200px; height:300px; background:#CCC}

.wntj{ margin-top:10px; margin-left:auto; margin-right:auto; width:1200px; height:300px; background:#CCC}

.rpcp{ margin-top:10px; margin-left:auto; margin-right:auto; width:1200px; height:300px; background:#CCC}

.xmnr{ margin-top:10px; margin-left:auto; margin-right:auto; width:1200px; height:300px; background:#CCC}

.xmsp{ margin-top:10px; margin-left:auto; margin-right:auto; width:1200px; height:300px; background:#CCC}



/* 底部 */

.foot{ margin-top:30px;width:100%; height:300px;}  

.foot-shdh{width: 1200px;height: 80px; margin: auto;border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C9C9C9;}  


.shdh1{width: 235px;height: 80px;display: block;float: left;text-align: center;line-height: 80px;}

.shdh2{width: 235px;height: 80px;display: block;float: left;text-align: center;line-height: 80px;}

.shdh3{width: 235px;height: 80px;display: block;float: left;text-align: center;line-height: 80px;}

.shdh4{width: 235px;height: 80px;display: block;float: left;text-align: center;line-height: 80px;}

.shdh5{width: 235px;height: 80px;display: block;float: left;text-align: center;line-height: 80px;}

.foot-shdh a:hover{color: red;}

.foot-fgx{position: relative;left: 60px;}

.foot-fwzx{width: 1200px;height: 200px;margin: auto;margin-top: 20px;}

.foot-fwzx1-1{color: #000000;width: 100px;height: 130px;}

.foot-fwzx1-1 ul{font-size: 10px;margin-top: 20px;line-height: 30px;}

.foot-fwzx1-2{color: #000000;position: relative;left: 150px;width: 100px;height: 130px;top: -130px;}

.foot-fwzx1-2 ul{font-size: 10px;margin-top: 20px;line-height: 30px;}

.foot-fwzx1-3{color: #000000;position: relative;left:300px;width: 100px;height: 130px;top: -260px;}

.foot-fwzx1-3 ul{font-size: 10px;margin-top: 20px;line-height: 30px;}

.foot-fwzx1-4{color: #000000;position: relative;left: 450px;width: 100px;height: 130px;top: -390px;}

.foot-fwzx1-4 ul{font-size: 10px;margin-top: 20px;line-height: 30px;}

.foot-fwzx1-5{color: #000000;position: relative;left: 600px;width: 100px;height: 130px;top: -520px;}

.foot-fwzx1-5 ul{font-size: 10px;margin-top: 20px;line-height: 30px;}

.foot-fwzx1-6{color: #000000;position: relative;left: 750px;width: 100px;height: 130px;top: -650px;}

.foot-fwzx1-6 ul{font-size: 10px;margin-top: 20px;line-height: 30px;}

.foot-fwzx2{width:260px;height: 120px;border-left-width:1px;border-left-style: solid;border-left-color: #ccc;position: relative;left: 900px;top: -770px;}

.foot-fwzx2-dh{color: red;margin-left: 80px;font-size: 18px; font-weight: bold;}

.foot-fwzx2 ul{margin-top: 10px;}

.foot-fwzx2 ul li{color: #000000;text-align: center;font-size: 10px;margin-left: 35px;}

.foot-fwzx2-lxkf{margin-left: 100px;}

.foot-fwzx2-lxkf button{width: 118px;height: 30px;color: red;background: white;border-width: 1px;border-color: red;line-height: 30px;margin-top: 20px;}

.foot-dp{width: 1200px;height: 56px;margin: -50px auto;}

.foot-dp0, .foot-dp1 ,.foot-dp2{float: left;}

.foot-dp0{margin-right: 10px;}

.foot-dp1{height: 19px;width: 640px;}

.foot-dp1 li{height: 19px;font-size: 12px;float: left;color: #757575;}

.foot-dp1 span{height: 8px; border-left: 1px solid #B0B0B0;margin: 3px 3px;}

.foot-dp2 li{height: 19px; width: 640px;font-size: 13px;}

.foot-dp3 img{width: 83px;float: right;margin-right: 10px;margin-top: -12px;}

.foot-dp4{text-align: center;clear: left;font-size: 20px;}


Professeur correcteur：天蓬老師Temps de correction：2019-03-20 17:30:28
Résumé du professeur：代碼寫得很規(guī)范, 不錯的

Notes de version

Entrées populaires