小米商城底部布局1_PHP中文网手记

摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>小米商城 - 小米MIX 3、小米8、红米6 Pro、小米电视官方网站</title> <link rel="shortcut icon" type=&q

<!DOCTYPE html>

<html>

<head>

<title>小米商城 - 小米MIX 3、小米8、红米6 Pro、小米电视官方网站</title>

</head>

<style>

*{margin: 0;padding: 0;}

.clear{clear: both;}

.top{height: 40px;width: 100%;background: #333333;}

.topBar{height: 40px;width: 1226px;background: #ccc;margin: 0 auto;}

.content{width: 1226px;margin: 0px auto;}

.content .menu{height:60px;background: #CCCCCC;margin:10px auto;}

/*轮播图*/

.content .pic{height:480px;margin: 10px auto;}

.pic_left{height: 480px;width:246px;background: #CCCCCC;float: left;}

.pic_right{height: 480px;width: 980px;background: blue;float: left;}

.content .picList{height: 170px;margin: 10px auto;}

.picList_1{height: 170px;width: 235px;background: #5f5750;margin-right: 13px;float: left;}

.picList_2{height: 170px;width: 317px;float: left;}

/*小米闪购*/

.content .miShop{height: 340px;margin: 10px auto;}

.miShopList{height: 340px;width:235px;float: left;background: #CCCCCC;}

/*手机*/

.phone_left{height: 620px;width: 235px;float: left;background: #CCCCCC;}

.phone_right{height: 620px;width:980px;float: left;margin-left: 10px;}

.phone_right div{height: 305px;width: 235px;background: #CCCCCC;float: left;}

/*家电*/

.house{float: left;height: 300px;width: 235px;background: #CCCCCC;}

/*智能*/

.brain{float: left;height: 300px;width: 235px;background: #CCCCCC;}

/*搭配*/

.match{float: left;height: 300px;width: 235px;background: #CCCCCC;}

/*配件*/

.component{float: left;height: 300px;width: 235px;background: #CCCCCC;}

/*周边*/

.circum{float: left;height: 300px;width: 235px;background: #CCCCCC;}

/*为您推荐*/

.recommend{float: left;height:300px;width: 235px;background: #CCCCCC;margin-right: 12.7px;}

/*热评产品*/

.hot{float: left;height: 420px;width: 297px;background: #CCCCCC;margin-right:12.6px;}

/*内容*/

.content1{float: left;height: 420px;width: 297px;background: #CCCCCC;margin-right:12.6px;}

/*视频*/

.video{float: left;height:300px;width: 297px;background: #CCCCCC;margin-right:12.6px;}

.content .img{height: 120px;margin: 30px auto;}

.content .title{height: 80px;background: #CCCCCC;margin: 10px auto;}

.content .productList{height:620px;margin: 10px auto;}

/*底部*/

.foots{width: 100%;margin: 10px auto;}

.foot{width: 1226px;margin: 0 auto;}

.service{height:80px;width:1226px;line-height: 80px;text-align: center;}

.service a:hover{color: #ff6700;}

.service a{font-size: 16px;color: #616161;font-weight: 300;}

.service a i{font-size: 20px;margin-right:10px;}

.service .line0{font-size: 20px;border-left: 1px solid #e0e0e0;margin: 0 56px;}

.line{font-size: 20px;border-bottom: 1px solid #E0E0E0;display:block;width: 1226px;}

/*关于*/

.about{height: 100px;width: 1226px;margin:40px 0;}

.about dl{float: left;height: 100px;margin-right: 95px;}

.about dt{color: #424242;margin-bottom:30px;}

.about dd{color: #616161;font-size: 12px;margin-top: 10px;}

.contact{height: 120px;width: 260px;border-left: 1px solid #E0E0E0;float: right;text-align: center;}

.contact .telphone{font-size: 20px;color: #FF6700;}

.contact .time{font-size: 12px;margin-top: 5px;}

.contact button{height: 30px;width: 120px;background: none;border: 1px solid #FF6700;margin-top: 20px;color: #FF6700;font-size: 12px;}

.contact button i{margin-right: 5px;}

.contact button:hover{color: #FFFFFF;background: #FF6700;}

</style>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a><i class="fa fa-wrench"></i>预约维修服务</a><span class="line0"></span>

<a><i class="fa fa-rotate-right"></i>7天无理由退货</a><span class="line0"></span>

<a><i class="fa fa-refresh"></i>15天免费换货</a><span class="line0"></span>

<a><i class="fa fa-map-marker"></i>520余家售后网点</a>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd>授权体验店</dd>

</dl>

<dl>

<dd>投资者关系</dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<p class="time">周一至周日 8:00-18:00<br>（仅收市话费）</p>

</div>

</div>

</body>

</html>

<dl>     列表
<dt></dt>  列表头
<dd></dd>  列表项
</dl>

小米商城底部布局1

热门词条