abstrakt：總結(jié)：突然感覺前端布局還是有點難度的，需要顧全大局，有時候?qū)懼鴮懼筒恢缹懙侥膬毫?，還得重新去找，，感覺自己天賦還是不行。只能天賦不夠，努力來湊。代碼：HTML：<!DOCTYPE html><html><head> <meta charset="utf-8">
總結(jié)：突然感覺前端布局還是有點難度的，需要顧全大局，有時候?qū)懼鴮懼筒恢缹懙侥膬毫?，還得重新去找，，感覺自己天賦還是不行。只能天賦不夠，努力來湊。
代碼：
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="">企業(yè)服務</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">新品</div>
Zusammenfassung des Lehrers：努力就對了, 前端主要是多多練習邏輯理順了就簡單了!