abstrak：<!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> <!-- 焦點區(qū)域 --> <div class="focus"> <!--焦點導(dǎo)航區(qū)域--> <div class="focus_nav"></div> <!--焦點區(qū)--> <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> <!--焦點區(qū)廣告圖片--> <div class="focus_img"style="background-image:url(/static/images/longAD1.jpg)"></div> </div> <!-- 產(chǎn)品內(nèi)容 --> <div class="mains"> <div class="main"> <p>手機(jī)</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/手機(jī)新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/手機(jī)新2.png" alt=""> <h3><a href="#">小米Play </a></h3> <p class="main_right_p1">內(nèi)置每月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/手機(jī)新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/手機(jī)新4.jpg" alt=""> <h3><a href="#">小米MIX 2S 8GB+256GB </a></h3> <p class="main_right_p1">驍龍845 年度旗艦處理器，藝術(shù)品般...</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/手機(jī)新5.jpg" alt=""> <h3><a href="#">小米6X 6GB+128GB </a></h3> <p class="main_right_p1">輕薄美觀的拍照手機(jī)</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/手機(jī)新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/手機(jī)新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/手機(jī)新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> <!--內(nèi)容區(qū)廣告圖片--> <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折優(yōu)惠</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> <!--內(nèi)容區(qū)域廣告--> <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折優(yōu)惠</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"> &Guru membetulkan：滅絕師太Masa pembetulan：2019-02-18 17:22:16
Rumusan guru：代碼提交不全面,小米商城是一個前端練習(xí)大型案例,要耐著性子,一點一點完成,雖然繁瑣,但是很鍛煉基礎(chǔ)知識哦!