小米商城框架布局

肖凌2019-05-25 22:19:57

<--页面-->

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

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

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

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

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="#">授权体验店</a></dd>

</dl>

<dl>

<dd><a href="#">投资者关系</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

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

</div>

</div>

<ul>

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

<li>Select Region</li>

</ul>

</div>

©mi.com 京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014]0059-0009号违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

探索黑科技，小米为发烧而生！

</div>

</body>

</html>

<--style.css-->

*{margin:0;padding:0;}

li{list-style:none;}

a{text-decoration:none;color:#ccc;cursor:pointer;}

.fl{float:left;}

.fr{float:right;}

.clear{clear:both;}

/*头部样式*/

.header{background:#333;width:100%;height:40px;}

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

/*主体样式*/

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

.contentMenu{background:#ccc;width:100%;height:90px;margin:10px auto;}

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

.contentPic_l{width:246px;height:480px;background:#000;}

.contentPic_r{width:980px;height:480px;background:#4c004c;}

.contentPic-ul{width:100%;height:170px;margin:10px auto;}

.contentPic-ul-1{width:235px;height:170px;background:#4c004c;margin-right:13px;}

.contentPic-ul-2{width:317px;height:170px;}

/*小米闪购*/

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

.contentShop-1{width:235px;height:340px;background:#ccc;}

.contentImg{background:#ccc;width:100%;height:100px;margin:10px auto;}

.contentUl{background:#ccc;width:100%;height:80px;margin:10px auto;}

.contentPhone{background:#ccc;margin:10px auto;}

.contentPhone-1{background:#ccc;width:234px;height:614px;background:url(../img/buy/手机AD.jpg);margin-right: 12px;}

.contentPhone-2{background:#ccc;width:980px;height:614px;}

.contentPhone-2 div{background:#10cc10;width:235px;height:300px;float:left;}

.contentPhone-a{width: 235px;height:300px;background:#10cc10;}

.contentPhone-b{width: 235px;height:300px;background:#10cc10;}

.contentPhone-b-1{width: 235px;height:145px;background:#ccc;}

/*底部内容*/

.footer{background:#fff;width:1226px;height:100px;margin:10px auto;}

.foot-top{width:100%;height:80px;line-height:80px;text-align:center;}

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

.foot-top a:hover{color:orange;}

.foot-top span{font-size: 20px;color:#616161;border-left:1px solid #e0e0e0;margin:0px 56px;}

.separate{border:1px solid #e0e0e0;display:block;}

.foot-middle{margin-top: 20px;}

.foot-middle dl{float:left;width:160px;}

.foot-middle dt{font-size:14px;line-height:14px;color:#424242;margin-bottom:26px;}

.foot-middle dd{font-size:12px;line-height:12px;color:#424242;margin-top:10px;}

.foot-middle dd a{color:#757575;}

.foot-middle dd a:hover{color:#ff6700;}

.connect{width:258px;height:112px;border-left:1px solid #e0e0e0;float:right;text-align:center;}

.tele{color:#ff6700;margin:0 0 5px;font-size:22px;line-height: 22px;}

.timer{color:#616161;margin:0px 16px;font-size: 12px;}

.connect button{border:1px solid #ff6700;width:118px;height:28px;font-size: 12px;line-height:28px;color:#ff6700;background:#fff;margin-top: 20px;}

.connect button:hover{background: #ff6700;color:#fff;}

.foot-bottom{margin-top: 20px;}

.foot-bottom-middle-a{width:640px;}

.foot-bottom-middle ul li{height:19px;float:left;font-size: 12px;}

.foot-bottom-middle span{height:2px;color:#757575;border-left:1px solid #b0b0b0;margin:3px 3px;}

.foot-bottom-middle-b{width:640px;color:#b0b0b0;font-size: 12px;margin-top: 5px;display: inline-block;}

.foot-bottom-right img{width:83px;}

小米商城框架布局

最新手记推荐

全部回复(0)我要回复