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

摘要：html代码YPE html><html><head><meta charset="UTF-8"><title>小米商城</title><link rel="shortcut icon" type="image/x-icon" href="static/im

html代码

YPE html>

<html>

<head>

</head>

<body>

<div>

<ul>

<li><a href="#">小爱分享平台</a><span>|</span></li>

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

</ul>

</div>

<div>

<ul>

</ul>

</div>

<div>

<div>

</div>

<div>

</div>

<div>

</div>

</div>

<div>

<div>

<div>

</div>

</div>

<div>

</div>

<div>

<div>

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

<div>

<dl>

</dl>

<dl>

</dl>

<dl>

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

</dl>

<dl>

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

</dl>

<dl>

</dl>

<dl>

</dl>

<div>

<p>周一至周日 8:00-18:00<br>(仅收市话费)</p>

</div>

</div>

</body>

</html>

css代码

0px;list-style:none;text-decoration: none;}

.clear{clear: both;}

/* 头部 */

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

.top{height: 40px;width: 1250px;margin:0px auto;font-size: 12px;}

.top_a{line-height: 40px;margin-left: 10px;}

.top_a li{height:20px;float: left;text-align: center;}

.top_a li a{color: #CCCCCC;}

.top_a li a:hover{color: #fff;}

.top_a li span{margin: 0px 5px;color: #6c6d69;}

.top_b{line-height: 40px;float: right;}

.top_b li{float: left;}

.top_b li a{color: #CCCCCC;}

.top_b li a[href="#"]:hover{color:#fff; }

.top_b li span{margin: 0px 5px;color: #6c6d69;}

/* 中部主体 */

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

.content_a{height: 68px;background: pink;margin-top: 10px;}

.content_b{height:461px;background: red;margin-top: 10px; }

.content_ba{height:460px;width:248px;background: pink;float: left;}

.content_bb{height:460px;width:992px;background: #ccc;float: right;}

.content_c{height:172px;margin-top: 10px;}

.content_ca{height:170px;width:238px;background: #5F5750;margin-right: 16px;float: left;}

.content_cb{height:170px;width:318px;background: pink;margin-right: 16px;float: left;}

.content_cc{height:170px;width:318px;background: pink;margin-right: 16px;float: left;}

.content_cd{height:170px;width:318px;background: pink;float: left;}

.content_d{height:362px;margin-top: 10px;}

/* 小米闪购 */

.content_db{height: 318px;width: 237px;background: pink;float: left;}

.content_e{height:101px;background: red;margin-top: 10px;}

/* 中部1 */

.contents{background: #F5F5F5;margin-top: 20px;}

.contents_w{margin: 0px auto;width: 1250px;}

.contents_a{height: 615px;width: 1250px;margin-top: 10px;}

.contents_l{height: 615px;width:234px;float: left;}

.contents_r{height: 615px;width:1006px;float: right;}

.contents_top{height: 303px;width:1010px;}

.contents_top1{height: 300px;width: 239px;background: #fff;float: left;}

.contents_xia{height: 303px;width:1010px;margin-top: 10px;}

.contents_b{height: 101px;background: pink;margin: 10px 0px;}

.contents_c{width: 1250px;margin-top: 10px;}

.contents_c1{height: 300px;width: 1250px;margin-top: 10px;}

.contents_c2{height: 300px;width: 1250px;margin-top: 10px;}

.contents_caa{height: 300px;width: 237px;background: #fff;float: left;}

.contents_c22{height: 146px;width: 237px;background: #ccc;}

.contents_c33{height: 146px;width: 237px;background: #ccc;margin-top: 10px;}

.contents_e{;width: 1250px;margin-top: 10px;}

.contents_f{height: 101px;width: 1250px;background: pink;margin-top: 10px;}

/* 底部 */

.footer{background: #fff;margin: 0px auto;}

.footer_r{margin: 0px auto;width: 1250px;}

.footer_a{height: 80px;margin: 0px auto;line-height: 80px;}

.footer_a1{border-bottom: 1px solid #e0e0e0;text-align: center;}

.footer_a1 a{width: 244px;margin-right: 50px;margin-left: 60px;color: #616161;margin-top: 10px;}

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

.footer_a1 a i{margin-right: 8px;font-size: 20px;}

.footer_a1 span{border-left: 1px solid #e0e0e0;}

.footer_b{height: 160px;margin-top: 10px;}

.footer_b1{height: 100px;}

.footer_b1 dl{float: left;margin-right: 104px;margin-top: 35px;}

.footer_b1 dd{margin-top: 14px;font-size:12px; }

.footer_b1 dt{margin-bottom: 20px;font-size:14px;}

.footer_b1 dd a{color: #757575;}

.footer_b1 dd a:hover{color: #FF6700;}

.connect{width: 258px;height: 112px;border-left: 1px solid #e0e0e0;float: right;margin-top:40px;}

.footer_b1 .telephone{margin-left: 56px;font-size: 21px;color: #FF6700;}

.footer_b1 .time{margin-left: 56px;font-size: 13px;}

.footer_b1 button{margin-left: 56px;width:120px;height: 30px;margin-top: 15px;background: #fff;color: #FF6700;border: 1px solid #FF6700;}

.footer_b1 button:hover{background: #FF6700;color: #fff;}

.footer_c{height: 85px;margin-top: 10px;background: pink}

QQ截图20181227155905.png

小米商城底部布局

热门词条