小米底部导航完成项目

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

底部导航.png html代码

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

<div>

<ul>

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

<li>Select Region</li>

<br>

</ul>

</div>

<div>

<ul>

<li><a>京ICP证110507号

</a></li>

<li><a href="#">京ICP备10046444号</a></li>

<li><a href="#">京公网安备11010802020134号</a></li>

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

</li>

</ul>

</div>

<div>

</div></div>

</div>

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

</body>

</html>

css代码

*{padding: 0px;margin: 0px;list-style:none;text-decoration: none;background: #fff;}

.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: 57px;background: red;margin-top: 10px;}

.footer_cc img{float: left;}

.footer_left{height: 57px;background: #fff;}

.footer_lefta{height: 57px;width: 1250px;background: #fff;margin:0px auto;}

.footer_lefta img{float: left;margin-right: 12px;}

.footer_leftb{height: 57px;width:750px;float: left;}

.footer_leftc{height: 57px;width: 430px;float: right;}

.footer_left1 ul li{float: left;color: #757575;font-size: 12px;margin:0px 1px;}

.footer_left1 ul li span{margin:0px 1px;}

.footer_left2{float: left;}

.footer_left2 ul li{float: left;margin:0px 1px;font-size: 12px;}

.footer_left2 .footer_left22 {font-size: 13px;color: #ccc;}

.footer_left2 li a[href="#"]{color: #b0b0b0;}

.footer_left2 li a[href="#"]:hover{color:#ef3a3b ;}

.footer_leftc img{height: 30px;width: 70px;margin-right: 16px;}

.heikeji{background: #fff;margin: 0px auto;margin-top: 10px;font-size: 24px;color: #ccc;text-align: center;font-family:"楷体";}

批改老师：天蓬老师批改时间：2018-12-28 11:32:55
老师总结：代码最好自己独立写出来，自己写出来的东西才是自己的，才能发现自己不会的问题。

小米底部导航完成项目

热门词条