abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页-小米商城</title> &n
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页-小米商城</title> <link rel="stylesheet" href="static/layui/css/layui.css"> <link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png"> <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="static/css/index.css"> <script src="static/layui/layui.js"></script> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <!-- top --> <div></div> <!-- 导航 --> <div></div> <div></div> <!-- 主体内容 --> <div></div> <!-- 灰色部分 --> <div> <!-- 热门手机 --> <div> <div> 手机 </div> <div> <div>手机广告图</div> <div> <ul> <li>手机1</li> <li style="margin-left:14px;">手机2</li> <li style="margin-left:14px;">手机3</li> <li style="margin-left:14px;">手机4</li> <li style="margin-top:14px;">手机1</li> <li style="margin-left:14px;margin-top:14px;">手机2</li> <li style="margin-left:14px;margin-top:14px;">手机3</li> <li style="margin-left:14px;margin-top:14px;">手机4</li> </ul> </div> </div> </div> <!-- 广告栏 --> <div> <a href=""> <img src="static/images/ad01.jpg" width="1226" height="120"> </a> </div> <!-- 热门商品 --> <div> <div> 家电 </div> <div> <div><a href=""></a></div> <div><a href=""></a></div> </div> <div> <ul> <li><a href="">1</a></li> <li style="margin-left:14px;"><a href="">2</a></li> <li style="margin-left:14px;"><a href="">3</a></li> <li style="margin-left:14px;"><a href="">4</a></li> <li style="margin-top:14px;"><a href="">1</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">2</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">3</a></li> <div>0</div> <div>0</div> </ul> </div> </div> <!-- 广告栏 --> <div> <a href=""> <img src="static/images/ad02.jpg" width="1226" height="120"> </a> </div> <!-- 热门商品 --> <div> <div> 智能 </div> <div> <div><a href=""></a></div> <div><a href=""></a></div> </div> <div> <ul> <li><a href="">1</a></li> <li style="margin-left:14px;"><a href="">2</a></li> <li style="margin-left:14px;"><a href="">3</a></li> <li style="margin-left:14px;"><a href="">4</a></li> <li style="margin-top:14px;"><a href="">1</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">2</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">3</a></li> <div>0</div> <div>0</div> </ul> </div> </div> <!-- 广告栏 --> <div> <a href=""> <img src="static/images/ad03.jpg" width="1226" height="120"> </a> </div> <!-- 热门商品 --> <div> <div> 搭配 </div> <div> <div><a href=""></a></div> <div><a href=""></a></div> </div> <div> <ul> <li><a href="">1</a></li> <li style="margin-left:14px;"><a href="">2</a></li> <li style="margin-left:14px;"><a href="">3</a></li> <li style="margin-left:14px;"><a href="">4</a></li> <li style="margin-top:14px;"><a href="">1</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">2</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">3</a></li> <div>0</div> <div>0</div> </ul> </div> </div> <!-- 广告栏 --> <div> <a href=""> <img src="static/images/ad04.jpg" width="1226" height="120"> </a> </div> <!-- 底部1--> <div> <div> <a href=""><i class="fa fa-wrench"></i>预约维修服务</a><span>|</span> <a href=""><i class="fa fa-undo"></i>7天无理由退货</a><span>|</span> <a href=""><i class="fa fa-rotate-right"></i>15天免费换货</a><span>|</span> <a href=""><i class="fa fa-thumbs-o-up"></i>满150元包邮</a><span>|</span> <a href=""><i class="fa fa-send-o"></i>520余家售后网点</a> <hr> <dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> <dd>订单操作</dd> </dl> <dl> <dt>服务支持</dt> <dd>售后政策</dd> <dd>自助服务</dd> <dd>相关下载</dd> </dl> <dl> <dt>线下门店</dt> <dd>小米之家</dd> <dd>服务网点</dd> <dd>授权体验店</dd> </dl> <dl> <dt>关于小米</dt> <dd>了解小米</dd> <dd>加入小米</dd> <dd>投资者关系</dd> </dl> <dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl> <dl> <dt>特色服务</dt> <dd>F 码通道</dd> <dd>礼物码</dd> <dd>防伪查询</dd> </dl> <div> <span>400-100-5678</span> <p>周一至周日 8:00-18:00</p> <p>(仅收市话费)</p> <div><i class="fa fa-commenting"></i>联系客服</div> </div> </div> </div> <!-- 底部2 --> <div> <div><img src="static/images/footlogo.png"></div> <div> <ul> <li><a href="">小米商城</a><span>|</span></li> <li><a href="">MIUI</a><span>|</span></li> <li><a href="">米家</a><span>|</span></li> <li><a href="">米聊</a><span>|</span></li> <li><a href="">多看</a><span>|</span></li> <li><a href="">游戏</a><span>|</span></li> <li><a href="">路由器</a><span>|</span></li> <li><a href="">米粉卡</a><span>|</span></li> <li><a href="">政企服务</a><span>|</span></li> <li><a href="">小米天猫店</a><span>|</span></li> <li><a href="">隐私政策</a><span>|</span></li> <li><a href="">商城用户协议</a><span>|</span></li> <li><a href="">账号协议</a><span>|</span></li> <li><a href="">问题反馈</a><span>|</span></li> <li><a href="">廉正举报</a><span>|</span></li> <li><a href="">诚信合规</a><span>|</span></li> <li><a href="">Select Region</a></li> </ul> <p>© mi.com 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2017]1530-131号</a> </p> <p> <a href="">(京)网械平台备字（2018）第00005号</a> <a href="">互联网药品信息服务资格证 (京) -非经营性-2014-0090 </a> <a href=""> 营业执照 </a> <a href=""> 医疗器械公告</a> </p> <p> <a href="">增值电信业务许可证</a> 网络食品经营备案（京）【2018】WLSPJYBAHF-12 <a href=""> 食品经营许可证</a> </p> <p>违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p> <img src="static/images/foot01.png"> <img src="static/images/foot02.png"> <img src="static/images/foot03.png"> <img src="static/images/foot04.png"> <img src="static/images/foot05.png"> <b>探索黑科技, 小米为发烧而生</b> </div> </div> </div> </body> </html> <script> </script>
CSS:
*{margin: 0;padding: 0;}
a{text-decoration: none;}
li{list-style: none;}
.clear{clear: both;}
/* top */
.top{width: 100%;height: 40px;background: #ccc;}
/* 导航 */
.nav{width: 1226px;height: 100px;margin: 0 auto;background: #aaa;}
.hide-menu{width: 100%;height: 229px;display: none;background: lightblue;}
/* 主体内容 */
.main{width: 1226px;height: 1272px;margin: 0 auto;background: #444}
/* 灰色部分 */
.content{width: 100%;max-height: 7000px;margin: 0 auto;margin-top:40px;background: #F5F5F5;}
.hot-phone{width: 1226px;height: 686px;margin: 0 auto;background: #ccc;}
.title-box{width: 1226;height: 58px;background: pink;}
.phone-box{width: 1226px;height: 628px;background: olive;}
.phone-ad{width: 234px;height: 628px;float: left;background: #888}
.phone-goods{width: 978px;height: 628px;float: right;background: silver;}
.phone-goods ul{width: 978px;height: 628px;}
.phone-goods ul li{width: 234px;height: 307px;float:left;background: #fff;}
/* 广告条 */
.ad-img{width: 1226px;height: 120px;margin: 40px auto;}
/* 热门商品 */
.hot-goods{width: 1226px;height: 686px;margin:0 auto;background: #888;}
.ad-goods{width: 234px;height: 628px;float: left;background: #ccc;}
.ad-goods .top{width: 234px; height: 307px;background: red;}
.ad-goods .bottom{width: 234px; height: 307px;margin-top: 14px;background: green;}
.goods-list{width: 978px;height: 628px;float: right;background: silver;}
.goods-list ul{width: 978px;height: 628px;}
.goods-list ul li{width: 234px;height: 307px;float:left;background: #fff;}
.goods-list .page{width: 234px;height: 146.5px;float:left;
margin-top: 14px;margin-left:14px;background: indianred;}
/* 底部 */
.footer{width: 100%;height: 250px;margin-top: 60px;background: #fff;}
.footer-content{width: 1226px;height: 250px;margin: 0 auto;}
.footer-content a{color: #616161;display: inline-block;font-size: 18px;margin-left: 10px;
height: 40px;text-align: center;line-height: 50px;margin: 10px 48px;}
.footer-content a i{font-size: 22px;margin-right: 6px;}
.footer-content a:hover{color: #ff6700;}
.footer-content span{color: #ccc;}
.footer-content dl{width: 120px;height: 120px;float:left;margin-right:40px;}
.footer-content dl dt{font-size: 16px;margin: 20px 0px;color: #000;}
.footer-content dl dd{color: #757575;font-size: 12px;padding-bottom: 15px;}
.footer-content dl dd:hover{cursor: pointer;color: #ff6700;}
.footer-content .tel{width:240px;height:110px;float:left;border-left: 1px solid #ccc;
margin-left: -12px;margin-top: 20px;}
.tel span{font-size: 22px;color: #ff6700;margin-left: 50px;}
.tel p{font-size: 12px;color: gray;margin-left: 0px;text-align:center;}
.tel .btn{width: 110px;height: 30px;background: #fff;border: 1px solid #ff6700;line-height: 30px;
text-align: center;color: #ff6700;margin-top: 20px;margin-left: 64px;}
.tel .btn:hover{background: #ff6700;color: #fff;cursor: pointer;}
.footer-2{width: 1226px;height: 230px;margin: 0 auto;}
.buttom-logo, .font{float: left;}
.buttom-logo{margin-top: 30px;}
.font ul li{float: left;margin-top: 30px;margin-left: 6px;margin-bottom: 5px;}
.font ul li a{font-size: 14px;color: #616161;}
.font ul li span{color: #ccc;margin-left: 5px;}
.font ul li a:hover{color: #ff6700;}
.font p{font-size: 13px;color: gray;margin-left: 8px;margin-top: 5px;}
.font p a{color: gray;}
.font p a:hover{color: #ff6700;}
.font img{width: 80px;height: 28px;margin-left: 8px;margin-top: 5px;}
.footer-2 b{display: block;color: #ccc;font-family: '楷体';font-size: 20px;text-align: center;
margin: 25px auto;}
Correcting teacher：天蓬老师Correction time：2019-02-15 15:46:52
Teacher's summary：这样图文并茂的作业, 让人非常舒服, 代码写得也比较规范,如果是你自己完成,而不是复制教学代码, 那你就太厉害了