摘要：HTML中有些注释是没有写内容的,那个是需要复制就行,所以省略了HTML<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页-小米商
HTML中有些注释是没有写内容的,那个是需要复制就行,所以省略了
HTML
<!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> <ul> <li><a href="">小米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">loT</a></li> <li><a href="">云服务</a></li> <li><a href="">金融</a></li> <li><a href="">有品</a></li> <li><a href="">小爱开放平台</a></li> <li><a href="">政企服务</a></li> <li><a href="">资质证照</a></li> <li><a href="">协议规则</a></li> <li><a href="">下载app</a> <div> <div></div> <img src="static/images/code.png"> <p>小米商城APP</p> </div> </li> <li><a href="">Select Region</a></li> </ul> </div> <div> <ul> <li><a href="">登录</a></li> <li><a href="">注册</a></li> <li><a href="">消息通知</a></li> <li><i class="fa fa-shopping-cart"></i>购物车(<span>0</span>) <div> 购物车中还没有商品，赶紧选购吧！ </div> </li> </ul> </div> </div> </div> <!-- 导航 --> <div> <div> <img src="static/images/footlogo.png"> <img src="static/images/logoAD.gif" style="margin-left: 11px;"> </div> <div> <ul> <li><a href="">小米手机</a></li> <li><a href="">红米</a></li> <li><a href="">电视</a></li> <li><a href="">笔记本</a></li> <li><a href="">家电</a></li> <li><a href="">新品</a></li> <li><a href="">路由器</a></li> <li><a href="">智能硬件</a></li> <li><a href="">服务</a></li> <li><a href="">社区</a></li> </ul> </div> <div> <form> <input type="text" name=""> <div> <a href="">红米Note 7</a> <a href="">小米8</a> </div> <button><i class="fa fa-search"></i></button> <div> <ul> <li>小米6x<span>约有6件</span></li> <li>小米mix 2s<span>约有5件</span></li> <li>黑鲨游戏手机<span>约有3件</span></li> <li>红米note 5<span>约有6件</span></li> <li>红米5a<span>约有3件</span></li> <li>小米电视4c<span>约有5件</span></li> <li>电视32英寸<span>约有8件</span></li> <li>笔记本pro<span>约有7件</span></li> <li>空气净化器<span>约有9件</span></li> </ul> </div> </form> </div> </div> <!-- 导航的隐藏菜单 --> <div> <div> <ul> <li> <span>热卖</span> <a href=""> <div><img src="static/images/h/1.png"></div> <p>小米电视</p> </a> <p>1399元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/2.png"></div> <p>小米笔记本</p> </a> <p>3399元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/3.png"></div> <p>小米手机</p> </a> <p>2399元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>热卖</span> <a href=""> <div><img src="static/images/h/4.png"></div> <p>红米手机</p> </a> <p>799元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/5.png"></div> <p>小米路由器</p> </a> <p>199元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/6.png"></div> <p>小米电视</p> </a> <p>2399元</p> </li> </ul> </div> </div> <!-- 主体内容 --> <div> <div> <div> <ul> <li style="margin-top:20px;"><a href="">手机 电话卡<span class="fa fa-chevron-right"></span></a> <div>111</div> </li> <li><a href="">电视 盒子<span class="fa fa-chevron-right"></span></a> <div>222</div> </li> <li><a href="">笔记本 平板<span class="fa fa-chevron-right"></span></a> <div>333</div> </li> <li><a href="">家电 插线板<span class="fa fa-chevron-right"></span></a> <div>444</div> </li> <li><a href="">出行 穿戴<span class="fa fa-chevron-right"></span></a> <div>555</div> </li> <li><a href="">智能 路由器<span class="fa fa-chevron-right"></span></a> <div>666</div> </li> <li><a href="">电源 配件<span class="fa fa-chevron-right"></span></a> <div>777</div> </li> <li><a href="">健康 儿童<span class="fa fa-chevron-right"></span></a> <div>888</div> </li> <li><a href="">耳机 音箱<span class="fa fa-chevron-right"></span></a> <div>999</div> </li> <li><a href="">生活 箱包<span class="fa fa-chevron-right"></span></a> <div>10</div> </li> </ul> </div> <div id="slide"> <div id="test1"> <div carousel-item> <div><img src="static/images/slide05.jpg" height="460" width="992"></div> <div><img src="static/images/slide04.jpg" height="460" width="992"></div> <div><img src="static/images/slide03.jpg" height="460" width="992"></div> <div><img src="static/images/slide02.jpg" height="460" width="992"></div> <div><img src="static/images/slide01.jpg" height="460" width="992"></div> </div> </div> </div> </div> <div> <div> <ul> <li> <a href=""><span class="fa fa-building-o"></span><p>选购手机</p></a> </li> <li> <a href=""><span class="fa fa-calendar"></span><p>企业团购</p></a> </li> <li> <a href=""><span class="fa fa-compass"></span><p>F码通道</p></a> </li> <li> <a href=""><span class="fa fa-address-card-o"></span><p>米粉卡</p></a> </li> <li> <a href=""><span class="fa fa-circle-o"></span><p>以旧换新</p></a> </li> <li> <a href=""><span class="fa fa-language"></span><p>话费充值</p></a> </li> </ul> </div> <div> <div><a href=""><img src="static/images/hot01.jpg"></a></div> <div><a href=""><img src="static/images/hot02.jpg"></a></div> <div><a href=""><img src="static/images/hot03.jpg"></a></div> </div> </div> <!-- 广告栏 --> <div> <a href=""> <img src="static/images/ad05.jpg" width="1226" height="120"> </a> </div> </div> <!-- 灰色部分 --> <div> <!-- 热门手机 --> <div> <div> <h1>手机</h1> <a href=""><span>查看全部 <i class="fa fa-chevron-circle-right"></i></span></a> </div> <div> <div><a href=""><img src="static/images/ad06.jpg"></a></div> <div> <ul> <li><a href=""> <div style="background: #E53935;">减200元</div> <img src="static/images/p/1.jpg"> <p id="name">小米8青春版</p> <p>潮流镜面渐变色，2400万自拍旗舰</p> <span>1499元</span><del>1699元</del> </a></li> <li style="margin-left:14px;"><a href=""> <div style="background: #83C44E;">新品</div> <img src="static/images/p/2.png"> <p id="name">小米Play</p> <p>内置每月10GB高速流量，高颜值流光</p> <span>1099元</span> <!-- <del>1699元</del> --> </a></li> <li style="margin-left:14px;"><a href=""> <div style="background: #E53935;">减400元</div> <img src="static/images/p/3.jpg"> <p id="name">小米8</p> &批改老师：灭绝师太批改时间：2019-02-25 16:23:25
老师总结：完成的代码还是很细致的,布局比较考验耐心,继续加油!
