摘要：总结：感觉自己进步很缓慢，是不是需要超多代码的练习。。看老师的代码，css都写好几份，有的还覆盖掉之前的样式，感觉自己看的有点吃力。还是要加油啊。代码：HTML：<!DOCTYPE html><html><head> <meta charset="utf-8">
总结：感觉自己进步很缓慢，是不是需要超多代码的练习。。
看老师的代码，css都写好几份，有的还覆盖掉之前的样式，感觉自己看的有点吃力。
还是要加油啊。
代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="menu">
<div class="header-left">
<ul>
<li><a href="">小米商城</a><span>|</span></li>
<li><a href="">MIUI</a><span>|</span></li>
<li><a href="">IOT</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="">SelectRegion</a><span>|</span></li>
</ul>
</div>
<div class="header-right">
<ul>
<li class="header-li"><a href="#">登录</a><span>|</span></li>
<li class="header-li"><a href="#">注册</a><span>|</span></li>
<li class="header-li"><a href="shop/order.html">消息通知</a></li>
<li class="header-right-li">
<a href="shop/cart.html"><i class="fa fa-shopping-cart"></i> 购物车(0)</a>
<div>购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 主体部分 -->
<div class="contents">
<div class="content">
<div class="content-menu">
<div class="content-menu-pic">
<img src="static/images/footlogo.png" alt="" style="margin:5px 0px; margin-right:10px;">
<img src="static/images/logoAD.gif" alt="">
</div>
<ul class="content-menu-ul">
<li >小米手机
<div class="mi-phone">
<div class="mi-phone-div">
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
</div>
</div>
</li>
<li>红米
<div class="mi-phone">
<div class="mi-phone-div">
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</div>
<div class="mi-phone1-shop">
<img src="static/images/phone/phone1.png" alt="">
<br>
<a href="">小米2S</a>
<br>
<a href="" style="color:#ff6700;">3299 元</a>
</div>
</div>
<span></span>
<div class="mi-phone1">
<div class="new">新品</
批改老师：西门大官人批改时间：2019-03-03 10:12:47
老师总结：多练习，不需要贪多贪大，小案例往往能更好的帮助你理解。等各种布局小案例熟练后，再来几个大的案例就不会手忙脚乱了
