一.小米商城项目
第一天示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> </head> <body> <div id="container"> <div id="header"> <div id="header_left"><a>小米商城</a><span>|</span><a>MIUI</a><span>|</span><a>米聊</a><span>|</span><a>游戏</a><span>|</span><a>多看阅读</a><span>|</span><a>云服务</a><span>|</span><a>金融</a><span>|</span><a>小米网移动版</a><span>|</span><a>问题反馈</a><span>|</span><a>Select Region</a></div> <div id="header_right"> <a>登录</a><span>|</span><a>注册</a><span>|</span><a>消息通知</a> <div class="shopping"><span class="glyphicon glyphicon-shopping-cart"></span>购物车(10)</div> </div> <div id="header_button"> <div id="left_cla"> <img src="img/Login.png"> </div> <div id="center_cla"> <ul> <li>小米手机</li> <li>红米</li> <li>平板 笔记本</li> <li>电视</li> <li>盒子 影音</li> <li>路由器</li> <li>智能硬件</li> <li>服务</li> <li>社区</li> </ul> </div> <div id="right_cla"> <div id="spa"> <input type="text"> <div class="span"> <span class="glyphicon glyphicon-search"></span> </div> </div> </div> </div> </div> <div id="center"> <div id="main"> <div id="main-inner"> </div> </div> </div> </div> </body> </html>
运行效果：
第二天示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="mycss.css" /> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <script src="myjs.js"></script> </head> <body> <div id="container"> <div id="header"> <div id="header_left"><a>小米商城</a><span>|</span><a>MIUI</a><span>|</span><a>米聊</a><span>|</span><a>游戏</a><span>|</span><a>多看阅读</a><span>|</span><a>云服务</a><span>|</span><a>金融</a><span>|</span><a>小米网移动版</a><span>|</span><a>问题反馈</a><span>|</span><a>Select Region</a></div> <div id="header_right"> <a>登录</a><span>|</span><a>注册</a><span>|</span><a>消息通知</a> <div class="shopping"><span class="glyphicon glyphicon-shopping-cart"></span>购物车(10)</div> </div> <div id="header_button"> <div id="left_cla"> <img src="img/Login.png"> </div> <div id="center_cla"> <ul> <li>小米手机</li> <li>红米</li> <li>平板 笔记本</li> <li>电视</li> <li>盒子 影音</li> <li>路由器</li> <li>智能硬件</li> <li>服务</li> <li>社区</li> </ul> </div> <div id="right_cla"> <div id="spa"> <input type="text"> <div class="span"> <span class="glyphicon glyphicon-search"></span> </div> </div> </div> </div> </div> <div id="center"> <div id="center_img"> <img id="img" width="100%" height="506" onclick="lcl()"src="img/1.jpg"/> </div> <div id="main"> <div id="main_top"> <div id="main_top1"> <div id="font1"><span class="glyphicon glyphicon-phone"></span><br>选购手机</div> <div id="font2"><span class="glyphicon glyphicon-gift"></span><br>企业团购</div> <div id="font3"><span class="glyphicon glyphicon-refresh"></span><br>官方产品</div> <div id="font4"><span class="glyphicon glyphicon-file"></span><br>小米移动</div> <div id="font5"><span class="glyphicon glyphicon-gift"></span><br>以旧换新</div> <div id="font6"><span class="glyphicon glyphicon-gift"></span><br>话费充值</div> </div> <div id="main_top2"><img src="images/top1.jpg"></div> <div id="main_top3"><img src="images/top2.jpg"></div> <div id="main_top4"><img src="images/top3.jpg"></div> </div> <div id="main-inner"> <!--小米明星单品--> <div id="main-inner_dao"> <div class="cla_left">小米明星单片</div> <div class="cla_right"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-right"></span> </div> </div> <div id="main-inner_center"> <div id="main-inner1"><img src="images/c1.png"><br> <p class="p1"> 小米5s Plus</p> <p class="p2">5.7英寸大屏双摄手机，拍照黑科技</p> <p class="p3"> 2299元起</p> </div> <div id="main-inner2"><img src="images/c2.png"> <p class="p1"> 红米Pro 十核双摄</p> <p class="p2">双摄像头手机，像单反一样去拍照</p> <p class="p3"> 1099元起</p> </div> <div id="main-inner3"><img src="images/c3.png"> <p class="p1"> 小米Max</p> <p class="p2">享花呗分期，最高享 12 期</p> <p class="p3"> 1799元</p> </div> <div id="main-inner4"><img src="images/c4.png"> <p class="p1"> 小米笔记本</p> <p class="p2">独立显卡、超轻薄、金属机身</p> <p class="p3"> 3499元</p> </div> <div id="main-inner5"><img src="images/c5.png"> <p class="p1"> 小米平板2 16GB现货</p> <p class="p2">轻薄全金属，海量内容</p> <p class="p3"> 999元</p> </div> </div> <!--智能硬件部分--> <div id="main-inner_dao2"> <div class="cla_left zhi" >智能硬件</div> <div class="cla_right"> <span class="spa1">查看全部</span> <span class="glyphicon glyphicon-circle-arrow-right"></span> </div> </div> <div id="main-inner_center2"> <div class="center2_left"><img src="images/z1.jpg"></div> <div class="center2_right"> <div ><img src="images/z2.jpg"><br> <p class="p1"> 小米路由器3C</p> <p class="p2">APP智能控制，安全防蹭网</p> <p class="p3"> 99元</p> </div> <div ><img src="images/z3.jpg"><br> <p class="p1"> 小米手环2</p> <p class="p2">OLED 显示屏幕，升级计步算法</p> <p class="p3"> 1299元</p> </div> <div ><img src="images/z4.jpg"><br> <p class="p1"> 小米净水器（厨上式）</p> <p class="p2">限量送 TDS 检测笔</p> <p class="p3"> 2299元起</p> </div> <div ><img src="images/z5.jpg"><br> <p class="p1"> 米家IH电饭煲</p> <p class="p2">IH 电磁环绕加热，多功能智能电饭煲</p> <p class="p3"> 399元</p> </div> <div ><img src="images/z6.png"><br> <p class="p1"> 米家扫地机器人</p> <p class="p2">远程智能控制，扫得干净扫得快</p> <p class="p3"> 1699元</p> </div> <div ><img src="images/z7.jpg"><br> <p class="p1"> 九号平衡车</p> <p class="p2">年轻人的酷玩具，骑行遥控两种玩法</p> <p class="p3"> 1999元</p> </div> <div ><img src="images/z8.jpg"><br> <p class="p1"> 米家小白智能摄像机</p> <p class="p2">360度全景拍摄，双向语音通话</p> <p class="p3"> 399元</p> </div> <div ><img src="images/z9.jpg"><br> <p class="p1"> 米兔儿童手表Q</p> <p class="p2">11 重安全设计，五重精准定位</p> <p class="p3"> 299元</p> </div> </div> </div> <!--搭配部分--> <div id="main-inner_dao3"> <div class="cla_left da" >搭配</div> <div class="cla_right"> <span class="spa1"> <a class="span1"> 热门</a> <a class="span2"> 耳机音箱</a> <a class="span3"> 电源</a> <a class="span4"> 电池</a> <a class="span5"> 存储卡</a> </span> </div> </div> <div id="main-inner_center3"> </div> </div> </div> </div> <script> </script> </body> </html>
CSS样式：
*{ padding: 0; margin: 0; } body{ border: solid gold 1px; } #container{ width: 100%; border: 1px solid red; } /*这里是头部导航*/ #header{ width: 100%; height: 44px; line-height: 44px; background: #333333; font-family: \'Heiti SC\', \'Microsoft YaHei\'; display: inline-block; font-size: 13px; } #header #header_left{ float: left; } #header #header_left a{ margin-right: 7px; margin-left: 7px; cursor:pointer; color: #b0b0b0; text-decoration: none; } #header #header_left a:hover{ color: white; } #header #header_left span{ width: 50%; color: #424242; } #header #header_right{ float: right; text-align: center; } #header #header_right a{ text-decoration: none; margin-right: 7px; margin-left: 7px; cursor:pointer; color: #b0b0b0; } #header #header_right a:hover{ color: white; } #header #header_right span{ width: 50%; color: #b0b0b0; } #header #header_right .shopping{ width: 173px; background: #424242; float: right; color: #b0b0b0; cursor:pointer; } #header #header_right .shopping span{ font-size: 17px; width: 24px; } #header #header_right .shopping:hover{ background: white; color: #ff6700; } /*头部下面宽点的白色导航*/ #header_button{ display: inline-block; width: 100%; height: 120px; } #left_cla{ width: 14.5%; display: inline-block; float: left; line-height: 130px; } #left_cla img{ width: 26%; height: 26%; } #center_cla{ width: 57%; display: inline-block; float: left; line-height: 130px; } #header_button #center_cla ul{ } #header_button #center_cla li{ cursor:pointer; list-style: none; float: left; margin-left: 30px; font-size: 17px; } #header_button #center_cla li:hover{ color: #ef5b00; } #header_button #right_cla { display: inline-block; float: left; line-height: 130px; margin-left: 47px; width: 25%; opacity: 0.6; overflow: hidden;transition: background 0.3s; } #header_button #right_cla:hover{opacity: 1;transition: background 0.3s;} #spa{ width: 100%; height: 60px; margin-top: 37px; float: left; } #header_button #right_cla input{ width: 80%; height: 55px; display: inline-block; float: left; } #header_button #right_cla .span{ transition: background 0.3s; width: 20%; height: 55px; margin-left: -1px; float: left; color: #b0b0b0; } #header_button #right_cla .span:hover{ transition: background 0.3s; background: #ef5b00; } #header_button #right_cla span{ margin-top: 20px; margin-left: 22px; font-size: 18px; float: left; color: #616161; } #header_button #right_cla span:hover{ color: #fff; } #main{ width: 100%; } /*中间那4个盒子的*/ #main_top{ margin-top: 40px; width: 100%; height: 178px; display: inline-block; } #main_top1{ background: #5f5750; } #main_top div{ width:23%; height: 178px; margin: 0 15px 0 11px; float: left; } #main_top div img{ width:100%; height: 178px; } #main_top1 div{ text-align: center; width: 33.3%; height: 50%; color: #cacdc8; padding-top: 26px; margin: 0; cursor:pointer; font-family: \'Heiti SC\', \'Microsoft YaHei\'; } #main_top1 div:hover{ color: white; } /*小米明星单品*/ #main-inner{ width:100%; height: 423px; } #main-inner_dao{ width: 100%; height: 40px; font-family: \'Heiti SC\', \'Microsoft YaHei\'; font-size: 25px; } #main-inner .cla_left{ float: left; }#main-inner .cla_right{ color: #b0b0b0; float: right; margin-right: 18px; font-size: 16px; cursor:pointer; display: inline-block; } #main-inner_center{ display: inline-block; width: 100%; height: 375px; } #main-inner_center div{ width: 18%; height: 375px; background: #fafafa; float: left; margin-right: 10px; margin-left: 15px; } #main-inner_center div img{ margin-left: 33px; height: 45%; width: 70%; } #main-inner #main-inner1{ border-top: #ffac13 1px solid; } #main-inner #main-inner2{ border-top: #83c44e 1px solid; } #main-inner #main-inner3{ border-top: #2196f3 1px solid; } #main-inner #main-inner4{ border-top: #e53915 1px solid; } #main-inner #main-inner5{ border-top: #00c0a5 1px solid; } #main-inner_center div p{ text-align: center; width: 250px; font-size: 15px; font-family: \'Heiti SC\', \'Microsoft YaHei\'; } .p1{ } .p2{ font-size: 14px; color: #b0b0b0; } .p3{ color: #ef5b00; } /*智能硬件部分*/ #main-inner_dao2{ font-family: \'Heiti SC\', \'Microsoft YaHei\'; font-size: 15px; padding-top: 100px; width: 100%; height: 132px; background: #f5f5f5; } .zhi{ font-size: 23px; } #main-inner_dao2 .spa1{ color: #0f0f0f; } #main-inner_center2{ width: 100%; height: 712px; background: #f5f5f5; } .center2_left{ width: 16.6%; height: 100%; float: left; } .center2_left img{ height: 98%; } .center2_right{ margin-top: -35px; width: 80.2%; height: 100%; margin-left: 40px; float: left; } .center2_right div{ text-align: center; float: left; width: 23%; height: 329px; margin-top: 35px; background: white; margin-right: 9px; margin-left: 12px; } .center2_right div img{ height: 43%; width: 73%; margin-bottom: 49px; } .center2_right div p{ text-align: center; width: 250px; font-size: 15px; font-family: \'Heiti SC\', \'Microsoft YaHei\'; } /*搭配部分*/ #main-inner_dao3{ font-family: \'Heiti SC\', \'Microsoft YaHei\'; font-size: 15px; padding-top: 50px; width: 100%; height: 102px; background: #f5f5f5; color:black; } .da{ font-size: 26px; } #main-inner_dao3 a{ margin-left: 15px; font-size: 20px; color: black; } #main-inner_dao3 a:hover{ text-decoration: blink; color: #ff6700; } #main-inner_center3 { width: 100%; height: 712px; background: #f5f5f5; border: 1px solid slateblue; } .center3_left{ width: 16.6%; height: 100%; float: left; } .center3_right{ width: 80.2%; height: 100%; float: left; margin-left: 10px; border: 1px solid brown; } .center3_right div{ text-align: center; float: left; width: 23%; height: 329px; margin-top: 35px; background: #f5f5f5; margin-right: 9px; margin-left: 12px; }
运行效果：
前段部分基本完工：
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="mycss.css" /> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <script src="myjs.js"></script> </head> <body> <div id="container"> <div id="header"> <div id="header_left"><a>小米商城</a><span>|</span><a>MIUI</a><span>|</span><a>米聊</a><span>|</span><a>游戏</a><span>|</span><a>多看阅读</a><span>|</span><a>云服务</a><span>|</span><a>金融</a><span>|</span><a>小米网移动版</a><span>|</span><a>问题反馈</a><span>|</span><a>Select Region</a></div> <div id="header_right"> <a>登录</a><span>|</span><a>注册</a><span>|</span><a>消息通知</a> <div class="shopping"><span class="glyphicon glyphicon-shopping-cart"></span>购物车(10)</div> </div> <div id="header_button"> <div id="left_cla"> <img src="img/Login.png"> </div> <div id="center_cla"> <ul> <li>小米手机</li> <li>红米</li> <li>平板 笔记本</li> <li>电视</li> <li>盒子 影音</li> <li>路由器</li> <li>智能硬件</li> <li>服务</li> <li>社区</li> </ul> </div> <div id="right_cla"> <div id="spa"> <input type="text"> <div class="span"> <span class="glyphicon glyphicon-search"></span> </div> </div> </div> </div> </div> <div id="center"> <div id="center_img"> <img id="img" width="100%" height="506" onclick="lcl()"src="img/1.jpg"/> </div> <div id="main"> <div id="main_top"> <div id="main_top1"> <div id="font1"><span class="glyphicon glyphicon-phone"></span><br>选购手机</div> <div id="font2"><span class="glyphicon glyphicon-gift"></span><br>企业团购</div> <div id="font3"><span class="glyphicon glyphicon-refresh"></span><br>官方产品</div> <div id="font4"><span class="glyphicon glyphicon-file"></span><br>小米移动</div> <div id="font5"><span class="glyphicon glyphicon-gift"></span><br>以旧换新</div> <div id="font6"><span class="glyphicon glyphicon-gift"></span><br>话费充值</div> </div> <div id="main_top2"><img src="images/top1.jpg"></div> <div id="main_top3"><img src="images/top2.jpg"></div> <div id="main_top4"><img src="images/top3.jpg"></div> </div> <div id="main-inner"> <!--小米明星单品--> <div id="main-inner_dao"> <div class="cla_left">小米明星单片</div> <div class="cla_right"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-right"></span> </div> </div> <div id="main-inner_center"> <div class="main-inner1"><img src="images/c1.png"><br> <p class="p1"> 小米5s Plus</p> <p class="p2">5.7英寸大屏双摄手机，拍照黑科技</p> <p class="p3"> 2299元起</p> </div> <div class="main-inner2"><img src="images/c2.png"> <p class="p1"> 红米Pro 十核双摄</p> <p class="p2">双摄像头手机，像单反一样去拍照</p> <p class="p3"> 1099元起</p> </div> <div class="main-inner3"><img src="images/c3.png"> <p class="p1"> 小米Max</p> <p class="p2">享花呗分期，最高享 12 期</p> <p class="p3"> 1799元</p> </div> <div class="main-inner4"><img src="images/c4.png"> <p class="p1"> 小米笔记本</p> <p class="p2">独立显卡、超轻薄、金属机身</p> <p class="p3"> 3499元</p> </div> <div class="main-inner5"><img src="images/c5.png"> <p class="p1"> 小米平板2 16GB现货</p> <p class="p2">轻薄全金属，海量内容</p> <p class="p3"> 999元</p> </div> </div> <!--智能硬件部分--> <div id="main-inner_dao2"> <div class="cla_left zhi" >智能硬件</div> <div class="cla_right"> <span class="spa1">查看全部</span> <span class="glyphicon glyphicon-circle-arrow-right"></span> </div> </div> <div id="main-inner_center2"> <div class="center2_left"><img src="images/z1.jpg"></div> <div class="center2_right"> <div ><img src="images/z2.jpg"><br> <p class="p1"> 小米路由器3C</p> <p class="p2">APP智能控制，安全防蹭网</p> <p class="p3"> 99元</p> </div> <div ><img src="images/z3.jpg"><br> <p class="p1"> 小米手环2</p> <p class="p2">OLED 显示屏幕，升级计步算法</p> <p class="p3"> 1299元</p> </div> <div ><img src="images/z4.jpg"><br> <p class="p1"> 小米净水器（厨上式）</p> <p class="p2">限量送 TDS 检测笔</p> <p class="p3"> 2299元起</p> </div> <div ><img src="images/z5.jpg"><br> <p class="p1"> 米家IH电饭煲</p> <p class="p2">IH 电磁环绕加热，多功能智能电饭煲</p> <p class="p3"> 399元</p> </div> <div ><img src="images/z6.png"><br> <p class="p1"> 米家扫地机器人</p> <p class="p2">远程智能控制，扫得干净扫得快</p> <p class="p3"> 1699元</p> </div> <div ><img src="images/z7.jpg"><br> <p class="p1"> 九号平衡车</p> <p class="p2">年轻人的酷玩具，骑行遥控两种玩法</p> <p class="p3"> 1999元</p> </div> <div ><img src="images/z8.jpg"><br> <p class="p1"> 米家小白智能摄像机</p> <p class="p2">360度全景拍摄，双向语音通话</p> <p class="p3"> 399元</p> </div> <div ><img src="images/z9.jpg"><br> <p class="p1"> 米兔儿童手表Q</p> <p class="p2">11 重安全设计，五重精准定位</p> <p class="p3"> 299元</p> </div> </div> </div> <!--搭配部分--> <div id="main-inner_dao3"> <div class="cla_left da" >搭配</div> <div class="cla_right"> <span class="spa1"> <a class="span1"> 热门</a> <a class="span2"> 耳机音箱</a> <a class="span3"> 电源</a> <a class="span4"> 电池</a> <a class="span5"> 存储卡</a> </span> </div> </div> <div id="main-inner_center3"> <div class="center3_left"> <div class="im1"> <img src="images/d1.jpg"> </div> <div class="im1 im2"> <img src="images/d2.jpg"> </div> </div> <div class="center3_right"> <div class="box"><img src="images/d3.jpg"><br> <p class="p1"> SanDisk 16GB高速存储卡</p> <p class="p2">399元</p> <p class="p3">5677人评价</p> <div class="foot"><div>读写很快！很好用！<p>来自于<span>@永不言畏</span>的评价</p></div></div> </div> <div class="box"><img src="images/d4.jpg"><br> <p class="p1"> 原装快充套餐</p> <p class="p2">58元</p> </div> <div class="box"><img src="images/d5.jpg"><br> <p class="p1"> 彩虹5好电池（10粒装）</p> <p class="p2">9.9元</p> <div class="foot"> <div>彩虹的电量，彩虹的心情，彩虹的每一天。<p>来自于<span>@最爱你的HYU</span>的评价</p></div> </div> </div> <div class="box"><img src="images/d6.jpg"><br> <p class="p1"> 彩虹7好电池（10粒装）</p> <p class="p2">9.9元</p> <div class="foot"><div>好用，好看。。价格实惠<p>来自于<span>天堂爱</span>的评价</p></div></div> </div> <div class="box"><img src="images/d7.jpg"><br> <p class="p1"> SanDisk 16GB高速存储卡（Class）</p> <p class="p2">31.9元</p> <div class="foot"><div>物美价廉，正品新货，发货迅速<p>来自于<span>surtter</span>的评价</p></div></div> </div> <div class="box"><img src="images/d8.jpg"><br> <p class="p1"> 镍氢充电电池套装</p> <p class="p2">88元 98元</p> </div> <div class="box"><img src="images/d9.jpg"><br> <p class="p1"> 小米车载充电器</p> <p class="p2">49.9元</p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="last1 boxx"> <div class="L1 x1"> <span > <p class="p2"> 米兔手机U盘...</p> <p class="p3">49.9元</p> </span> <img src="images/d10.jpg"> </div> <div class="L2 x1"> <span > <p class="p2"> 浏览更多</p> <p class="p3">电池存储卡</p> </span> <div > <img src="img/1right.png"> </div> </div> </div> </div> </div> <!--配件部分内容--> <div id="main-inner_dao4"> <div class="cla_left da" >配件</div> <div class="cla_right"> <span class="spa1"> <a class="span1"> 热门</a> <a class="span2"> 保护套</a> <a class="span3"> 贴膜</a> <a class="span5"> 其他配件</a> </span> </div> </div> <div id="main-inner_center4"> <div class="center3_left"> <div class="im1"> <img src="images/p1.jpg"> </div> <div class="im1 im2"> <img src="images/p2.jpg"> </div> </div> <div class="center3_right"> <div class="box"><img src="images/p3.jpg" height="180"><br> <p class="p1"> 小米指环支架</p> <p class="p2">19元</p> <p class="p3">982人评价 </p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/p4.jpg" height="180"><br> <p class="p1"> 小米USB快速充电数据线</p> <p class="p2">19元</p> <p class="p3">962人评价 </p> </div> <div class="box"><img src="images/p5.jpg" height="180"><br> <p class="p1"> 小米二合一数据线100cm</p> <p class="p2">19.9元</p> <p class="p3">182人评价 </p> </div> <div class="box"><img src="images/p6.jpg" height="180"><br> <p class="p1"> 小米二合一数据线</p> <p class="p2">9.9元</p> <p class="p3">92人评价 </p> </div> <div class="box"><img src="images/p7.jpg" height="180"><br> <p class="p1"> 红米Note3钢化膜</p> <p class="p2">19.9元</p> <p class="p3">342人评价 </p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/p8.jpg" height="180"><br> <p class="p1"> 小米USB快速充电数据线</p> <p class="p2">8.8元</p> <p class="p3">98人评价 </p> </div> <div class="box"><img src="images/p9.jpg" height="180"><br> <p class="p1"> 红米Note3钢化膜</p> <p class="p2">49.9元</p> <p class="p3">82人评价 </p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="last1 boxx"> <div class="L1 x1"> <span > <p class="p2"> 米兔手机U盘...</p> <p class="p3">49.9元</p> </span> <img src="images/p10.jpg"> </div> <div class="L2 x1"> <span > <p class="p2"> 浏览更多</p> <p class="p3">电池存储卡</p> </span> <div > <img src="img/1right.png"> </div> </div> </div> </div> </div> <!--周边部分内容--> <div id="main-inner_dao5"> <div class="cla_left da" >周边</div> <div class="cla_right"> <span class="spa1"> <a class="span1"> 热门</a> <a class="span2"> 服饰</a> <a class="span3"> 玉兔</a> <a class="span5"> 生活周边</a> <a class="span6"> 箱包</a> </span> </div> </div> <div id="main-inner_center5"> <div class="center3_left"> <div class="im1"> <img src="images/b1.jpg"> </div> <div class="im1 im2"> <img src="images/b2.jpg"> </div> </div> <div class="center3_right"> <div class="box"><img src="images/b3.jpg" width="200" height="210"><br> <p class="p1"> 小米路由器3C</p> <p class="p2">399元</p> <p class="p3">5677人评价 </p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/b4.jpg" width="200" height="210"><br> <p class="p1"> 小米手环2</p> <p class="p2">58元</p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/b5.jpg" width="200" height="210"><br> <p class="p1"> 小米净水器（厨上式）</p> <p class="p2">9.9元</p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/b6.jpg" width="200" height="210"><br> <p class="p1"> 米家IH电饭煲</p> <p class="p2">9.9元</p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/b7.jpg" width="200" height="210"><br> <p class="p1"> 米家扫地机器人</p> <p class="p2">31.9元</p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/b8.jpg" width="200" height="210"><br> <p class="p1"> 九号平衡车</p> <p class="p2">8.8元</p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="box"><img src="images/b9.jpg" width="200" height="210"><br> <p class="p1"> 米家小白智能摄像机</p> <p class="p2">49.9元</p> <div class="foot"><div>挺好，挺有质感，充电也快。非常满意<p>来自于<span>8987823223</span>的评价</p></div></div> </div> <div class="last1 boxx"> <div class="L1 x1"> <span > <p class="p2"> 米兔手机U盘...</p> <p class="p3">49.9元</p> </span> <img src="images/b10.jpg"> </div> <div class="L2 x1"> <span > <p class="p2"> 浏览更多</p> <p class="p3">电池存储卡</p> </span> <div > <img src="img/1right.png"> </div> </div> </div> </div> </div> <!--为你推荐--> <div class="main-inner_dao"> <div class="cla_left">为你推荐</div> <div class="cla_right"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-right"></span> </div> </div> <div class="main-inner_center wei"> <div ><img src="images/w1.jpg"><br> <p class="p1"> 小米Note2 智能翻盖保护套</p> <p class="p2">49元</p> <p class="p3"> 201人好评</p> </div> <div ><img src="images/w2.jpg"> <p class="p1"> 红米Pro 十核双摄</p> <p class="p2">双摄像头手机，像单反一样去拍照</p> <p class="p3"> 1099元起</p> </div> <div ><img src="images/w3.jpg"> <p class="p1"> 小米Max</p> <p class="p2">享花呗分期，最高享 12 期</p> <p class="p3"> 1799元</p> </div> <div ><img src="images/w4.jpg"> <p class="p1"> 小米笔记本</p> <p class="p2">独立显卡、超轻薄、金属机身</p> <p class="p3"> 3499元</p> </div> <div ><img src="images/w5.jpg"> <p class="p1"> 小米平板2 16GB现货</p> <p class="p2">轻薄全金属，海量内容</p> <p class="p3"> 999元</p> </div> </div> <!--热评产品--> <div id="main-inner_dao_bottom"> <div class="cla_left">热评产品</div> </div> <div class="main-inner_center re"> <div class=" bonn1"><img src="images/r1.jpg"><br> <p class="p1">非常好的一款小米产品！新国货！净化后的水～有点甜甜的味道！真的是很好的产品！是送亲戚朋友的最好的礼物！</p> <p class="p3">来自于 城中草民 的评价</p> <p class="p2"><span>小米净水器</span> | 1299元</p> </div> <div class="bonn1"><img src="images/r2.jpg"> <p class="p1">这个很萌啊！如果可以接入网关，通过语音互动实现控制电器，是不是会有点钢铁侠他家的味道？</p> <p class="p3">来自于 寂寞成舞 的评价</p> <p class="p2"><span>米家小白智能摄像机 |</span> |399元</p> </div> <div class=" bonn1"><img src="images/r3.jpg"> <p class="p1">小巧，便携，连接方便还有电量显示！总体很不错，可以挂在自己的包包上用！！也可以放在车里当蓝牙电话！！...</p> <p class="p3">来自于 佰亊柒禧 的评价</p> <p class="p2"><span>小米随身蓝牙音箱</span> | 69元</p> </div> <div class=" bonn1"><img src="images/r4.jpg"> <p class="p1">这箱子很好，外观漂亮，实用性强。很轻，有点软但不影响它的坚固。</p> <p class="p3">来自于 子书雁 的评价</p> <p class="p2"><span>90分旅行箱 20寸 |</span> | 299元</p> </div> </div> <!--内容--> <div id="main-inner_dao_bottom1"> <div class="cla_left">内容</div> </div> <div class="main-inner_center"> <div class="main-inner1 bonn1 nei"> <p class="p0 p01">图书</p> <p class="p1">哈利·波特与被诅咒的孩子</p> <p class="p3">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</p> <p class="p4">33.3元</p> <img src="images/n1.png"><br> </div> <div class="main-inner2 bonn1 nei"> <p class="p0 p02">MIUI 主题</p> <p class="p1">小米Note 2</p> <p class="p3">官方定制主题 超多侧边栏功能 等你发现</p> <p class="p4">免费</p> <img src="images/n2.jpg"> </div> <div class="main-inner3 bonn1 nei"> <p class="p0 p03">游戏</p> <p class="p1">剑侠世界</p> <p class="p3">一生不容错过的浪漫武侠！！</p> <p class="p4">免费</p> <img src="images/n3.jpg"> </div> <div class="main-inner4 bonn1 nei"> <p class="p0 p04">应用</p> <p class="p1">2015年度应用</p> <p class="p3">2015年度应用</p> <p class="p4">免费</p> <img src="images/n4.png"> </div> </div> <!--视频--> <div id="main-inner_dao_bottom2"> <div class="cla_left">视频</div> </div> <div class="main-inner_center shi"> <div class=" bonn1"><img src="images/s1.jpg"><br> <p class="p1"> 小米5s Plus</p> <p class="p2">5.7英寸大屏双摄手机，拍照黑科技</p> <p class="p3"> 2299元起</p> </div> <div class=" bonn1"><img src="images/s2.jpg"> <p class="p1"> 红米Pro 十核双摄</p> <p class="p2">双摄像头手机，像单反一样去拍照</p> <p class="p3"> 1099元起</p> </div> <div class=" bonn1"><img src="images/s3.jpg"> <p class="p1"> 小米Max</p> <p class="p2">享花呗分期，最高享 12 期</p> <p class="p3"> 1799元</p> </div> <div class=" bonn1"><img src="images/s4.jpg"> <p class="p1"> 小米笔记本</p> <p class="p2">独立显卡、超轻薄、金属机身</p> <p class="p3"> 3499元</p> </div> </div> <div class="cc"></div> <div id="footer"> <div class="ft"> <div class="dp"> <div class="p1"><p>预约维修服务</p></div> </div> <div class="dp"> <div class="p1"><p>7天无理由退货</p></div> </div> <div class="dp"> <div class="p1"><p>15天免费换货</p></div> </div> <div class="dp"> <div class="p1"><p>满150元包邮</p></div> </div> <div class="dp"> <div class="p1 p0"><p>520余家售后网点</p></div> </div> </div> <div class="fc"> <div class="fc_left"> <div class="ul_div p1"> <span>帮助中心</span> <span>帮助中心</span> <span>帮助中心</span> <span>帮助中心</span> <span>帮助中心</span> <span>帮助中心</span> <div class="li_div p1"> <ul> <li>账户管理</li> <li>购物指南</li> <li>订单操作</li> <li>服务支持</li> <li>售后政策</li> <li>自助服务</li> <li>相关下载</li> <li>相关下载</li> <li>线下门店</li> <li>小米之家</li> <li>服务网点</li> <li>零售网点</li> <li>关于小米</li> <li>了解小米</li> <li>加入小米</li> <li>联系我们</li> <li>关注我们</li> <li>新浪微博</li> <li>小米部落</li> <li>官方微信</li> <li>特色服务</li> <li>F 码通道</li> <li>小米移动</li> <li>防伪查询</li> </ul> </div> </div> </div> <div class="fc_right"> <div class="ke p1"> <div class="phone"> <p class="p2">400-100-5678</p> <p class="p1">周一至周日 8:00-18:00<br>（仅收市话费）</p> <div class="num">24小时在线客服</div> </div> </div> </div> <div id="footer2"> <div class="span p1"> <div class="div_left"><img src="img/Login.png" height="60" width="65"></div> <div class="div_center"> <span >小米商城</span><span>|</span><span>MIUI</span><span >米聊</span><span>|</span><span>多看书城</span><span >小米路由器</span><span>|</span><span>视频电话</span><span >小米后院</span><span>|</span><span>小米天猫店</span> <span >小米淘宝直营店</span><span>|</span><span>小米网盟</span><span >问题反馈</span><span>|</span><span>Select Region</span> <p>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号<br>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p> </div> <div class="div_right"><img src="img/b.png"></div> </div> <p class="pb"><span>探索小米科技</span><span>小米为发烧而生</span></p> </div> </div> </div> </div> </div> </div> </div> </div> <script> </script> </body> </html>
运行效果：
