Community
Learn
Tools Library
AI Tools
Leisure
search
English

小米商城底部布局

Original 2019-03-20 16:46:38 681
abstract：<!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="#">云服务</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="#">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><!--头部导航-->



<div class="contents">


<div class="content-menu"><!--内容导航-->

<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="#">小米手机</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 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">大空间，大循环</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">小米手环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">小米手环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">小米手环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;">手机</h2>

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

</div>


<div class="sjtp1"><img src="static/img/buy/手机AD.jpg">



</div>

<div class="phone1"><img src="static/img/buy/手机1.jpg" width="150px" height="150px">

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

<p>光学变焦双摄，拍人更美</p>

<span>1499 元</span>


</div>


<div class="phone2"><img src="static/img/buy/手机2.jpg" width="150px" height="150px">

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

<p>光学变焦双摄，拍人更美</p>

<span>1499 元</span>


</div>

<div class="phone3"><img src="static/img/buy/手机3.jpg" width="150px" height="150px">

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

<p>光学变焦双摄，拍人更美</p>

<span>1499 元</span>


</div>

<div class="phone4"><img src="static/img/buy/手机4.jpg" width="150px" height="150px">

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

<p>光学变焦双摄，拍人更美</p>

<span>1499 元</span>


</div>

</div>




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

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

<div class="wntj">为你推荐</div>

<div class="rpcp">热评产品</div>

<div class="xmnr">内容</div>

<div class="xmsp">视频</div>

</div><!--内容-->



<!--底部-->

<div class="foot">

<div class="foot-shdh">


<span class="shdh1"><a href="#"><i class="fa fa-wrench"></i>&nbsp;&nbsp;预约维修服务</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天免费换货</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余家售后网点</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>(仅收市话费)</li>

</ul>

<span class="foot-fwzx2-lxkf"><button type="button"><i class="fa fa-commenting "></i>&nbsp;联系客服</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>政企服务<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号 京公网安备11010802020134号 京网文[2014]0059-0009号 </li>

                  <li>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</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">探索黑科技，小米为发烧而生！</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}



/*主体内容*/

.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;

}


/*小米导航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;}


Correcting teacher：天蓬老师Correction time：2019-03-20 17:30:28
Teacher's summary：代码写得很规范, 不错的

Release Notes

Popular Entries