abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="shortcut ic
<!DOCTYPE html> <html lang="en"> <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/css/style1.css"/> <link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css"> <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script> <title>Document</title> </head> <body> <!-- 头部 --> <div class="top"> <div class="top_nav"></div> </div> <!-- 焦点区域 --> <div class="focus"> <!--焦点导航区域--> <div class="focus_nav"></div> <!--焦点区--> <div class="focusm"> <div class="focusm_left"></div> <div class="focusm_right"></div> <div class="clear"></div> </div> <!--焦点图片列表--> <div class="focus_ul"> <div class="focus_ul_1" style="margin-right:12px; "></div> <div class="focus_ul_2" style="margin-right:14px;background-image: url(/static/images/midAD1.jpg)"></div> <div class="focus_ul_2" style="margin-right:14px;background-image: url(/static/images/midAD2.jpg)"></div> <div class="focus_ul_2" style="background-image: url(/static/images/midAD3.jpg)"></div> <div class="clear"></div> </div> <!--焦点小米闪购--> <div class="focus_shop"> <p>小米闪购</p> <div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(229,57,53);"></div> <div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(255,172,19);"></div> <div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(131,196,78)"></div> <div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(33,150,243)"></div> <div class="focus_shop_1"style="border-top:1px solid RGB(229,57,53);"></div> <div class="clear"></div> </div> <!--焦点区广告图片--> <div class="focus_img"style="background-image:url(/static/images/longAD1.jpg)"></div> </div> <!-- 产品内容 --> <div class="mains"> <div class="main"> <p>手机</p> <div class="main_left"></div> <div class="main_right"> <div style="margin:0px 0px 14px 13px; "> <div class="main_r_a">新品</div> <img src="/static/images/buy/手机新1.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/手机新2.png" alt=""> <h3><a href="#">小米Play </a></h3> <p class="main_right_p1">内置每月10GB高速流量，高颜值流光...</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1099 元</span> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_b">享8折</div> <img src="/static/images/buy/手机新3.jpg" alt=""> <h3><a href="#">小米8 SE 6GB+64GB </a></h3> <p class="main_right_p1">AI 超感光双摄，三星AMOLED 屏幕</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1599 元</span> <del>1999 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_b">享8折</div> <img src="/static/images/buy/手机新4.jpg" alt=""> <h3><a href="#">小米MIX 2S 8GB+256GB </a></h3> <p class="main_right_p1">骁龙845 年度旗舰处理器，艺术品般...</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">3399 元</span> <del>3999 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">享8折</div> <img src="/static/images/buy/手机新5.jpg" alt=""> <h3><a href="#">小米6X 6GB+128GB </a></h3> <p class="main_right_p1">轻薄美观的拍照手机</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1499 元</span> <del>1999 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">减100元</div> <img src="/static/images/buy/手机新6.jpg" alt=""> <h3><a href="#">小米Max 3 4GB+64GB </a></h3> <p class="main_right_p1"></p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1599 元</span> <del>1699 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">享8折</div> <img src="/static/images/buy/手机新7.jpg" alt=""> <h3><a href="#">红米6 Pro </a></h3> <p class="main_right_p1">高颜值大电量 红米旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">999 元</span> <del>1299 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">减50元</div> <img src="/static/images/buy/手机新8.jpg" alt=""> <h3><a href="#">红米6A 2GB+16GB </a></h3> <p class="main_right_p1"></p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">549 元</span> <del>599 元</del> </p> </div> </div> <div class="clear"></div> <!--内容区广告图片--> <div class="main_img"style="background-image:url(/static/images/longAD2.jpg)"></div> <p>家电</p> <div class="main_left_2"> <div class="main_left_t"style="background-image: url(/static/images/buy/家电AD1.jpg)"></div> <div class="main_left_b"style="background-image: url(/static/images/buy/家电AD2.jpg)" ></div> </div> <div class="main_right"> <div style="margin:0px 0px 14px 13px; "> <div class="main_r_a">新品</div> <img src="/static/images/buy/家电1.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/家电2.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/家电3.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/家电4.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/家电5.png" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/家电6.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">享8折</div> <img src="/static/images/buy/家电7.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">8折优惠</div> <img src="/static/images/buy/家电8.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> </div> <div class="clear"></div> <!--内容区域广告--> <div class="main_img"style="background-image:url(/static/images/longAD3.jpg)"></div> <!-- 以下智能、搭配、配件、周边、与上面家电布局一致--> <p>智能</p> <div class="main_left_2"> <div class="main_left_t"style="background-image: url(/static/images/buy/智能AD1.jpg)"></div> <div class="main_left_b"style="background-image: url(/static/images/buy/智能AD2.jpg)" ></div> </div> <div class="main_right"> <div style="margin:0px 0px 14px 13px; "> <div class="main_r_a">新品</div> <img src="/static/images/buy/智能1.png" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/智能2.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <img src="/static/images/buy/智能3.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin:0px 0px 14px 13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/智能4.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/智能5.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_a">新品</div> <img src="/static/images/buy/智能6.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">享8折</div> <img src="/static/images/buy/智能7.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <div style="margin-left:13px;"> <div class="main_r_b">8折优惠</div> <img src="/static/images/buy/智能8.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色，2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> </div> <div class="clear"></div> <div class="main_img"style="background-image:url(/static/images/longAD3.jpg)"></div> <p>搭配</p> <div class="main_left_2"> <div class="main_left_t"style="background-image: url(/static/images/buy/家电AD1.jpg)"></div> <div class="main_left_b"style="background-image: url(/static/images/buy/家电AD2.jpg)" ></div> </div> <div class="main_right"> &Correcting teacher：灭绝师太Correction time：2019-02-18 17:22:16
Teacher's summary：代码提交不全面,小米商城是一个前端练习大型案例,要耐着性子,一点一点完成,虽然繁琐,但是很锻炼基础知识哦!