小米商城底部布局2_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;}

a,li{cursor: pointer;}

.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;margin-right: 12.7px;}

/*手机*/

.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;margin-right: 12.7px;margin-top: 10px;}

/*家电*/

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

/*智能*/

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

/*搭配*/

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

/*配件*/

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

/*周边*/

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

/*为您推荐*/

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

/*更多*/

.more{width: 1226px;margin-top:60px;font-size: 12px;}

.milogo img,.milogo,.img{float: left;}

.milogo{width: 780px;}

.milogo img{margin-right: 10px;}

.milogo ul li{float: left;list-style: none;color: #757575;}

.milogo span{font-size: 12px;border-left: 1px solid #E0E0E0;margin: 0 3px;height: 8px;}

.milogo div{color: #B0B0B0;}

.milogo ul li:hover{color: #FF6700;}

.milogo a:hover{color: #FF6700;}

.img img{height: 28px;width: 85px;}

.title{width: 1226px;margin: 30px auto;text-align: center;}

.title p{font-size: 20px;font-family: '楷体';color: #BABABA;}

</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>

<ul>

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

<li>Seclect Region</li>

</ul><br />

<div>

<a>mi.com</a>京ICP110507号

<a>京ICP备10046444号</a>

<a>京公网安备11010802020134号</a>

<br />

<a>（京）网械平台备字（2018）第00005号</a>

<a>互联网药品信息服务资格证（京）-非经营性-2014-0090</a>

<a>医疗器械公告</a><br />

违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

<p>探索黑科技，小米为发烧而生！</p>

</div>

</body>

</html>

批改老师：灭绝师太批改时间：2018-11-27 15:03:25
老师总结：布局是个耐心活，花了心思，但是布局需要自己的思路奥！

小米商城底部布局2

热门词条