摘要:跟随课堂进度的作业,用内部样式写入: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城首页</title> <link rel="shortcut icon"&n
跟随课堂进度的作业,用内部样式写入: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城首页</title> <link rel="shortcut icon" type="image/x-icon" href="static/img/footlogo.png"> <link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="static/css/css.css"> <script type="text/javascript" src="static/jquery/jquery-3.3.1.min.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} li{list-style: none;} a{text-decoration: none;cursor: pointer;} .clear{clear: both;} /*头部样式*/ .header{width: 100%;height: 40px;background: #333;} .headerMenu{width: 1226px;height: 40px;background: #ccc;margin: 0px auto;line-height: 40px;} /*内容样式*/ .contentMain{width: 1226px;margin: 10px auto;} .contentMainTop{width: 1226px;background: #ccc;margin: 10px auto;height: 60px;} .contentMainOne{margin: 10px auto;height: 460px;} .contentMainOne_l{width: 246px;height:460px;background: #ccc;float: left;} .contentMainOne_r{width: 980px;height:460px;background: #D0E8FF;float: left;} .contentMainTwo{margin: 10px auto;} .contentMainTwo_1{width: 235px;height: 170px;background: #ccc;float: left;} .contentMainTwo_2{width: 316px;height: 170px;float: left;} /*小米闪购*/ .contentMainShop{margin: 10px auto;height: 40px;line-height: 40px;} .contentMainShopUl{margin: 10px auto;} .contentMainShop_1{width: 235px;height: 292px;background: #fff;float: left;} .contentMainImg{width: 1226px;height: 119px;margin: 10px auto;} /*手机*/ .contentMainPhone{width: 1226px;height: 40px;margin: 10px auto;background: #ccc;line-height: 40px;} .contentMainImages{margin: 10px auto;} .contentMainImages_l{width: 234px;height: 614px;margin-right: 10px;background: url(../img/buy/手机AD.jpg);float: left;} .contentMainImages_r{width: 982px;height: 614px;float: left;} .contentMainImages_r1{width: 982px;height: 300px;} .contentMainImages_r1 div{width: 234px;height: 300px;float: left;background:#ccc;} /*家电之后所有样式*/ .contentMainAll{width: 1226px;height: 40px;margin: 10px auto;background: #ccc;line-height: 40px;} .allStyle{margin: 10px auto;} .allStyleTop,.allStyleDown{width: 1226px;height: 300px;} .allStyleTop_1,.allStyleDown_1{width: 234px;height: 300px;background: #ccc;float: left} .allStyleDown_2{float: left;} .allStyleDown_2 div{width: 234px;height: 145px;background: #ccc;} /*为你推荐*/ .contentMainW{width: 1226px;height: 40px;margin: 10px auto;background: #ccc;line-height: 40px;} .tuiJian div{width: 234px;height: 300px;background: #ccc;float: left} /*内部样式写入*/ </style> </head> <body> <div> <div> </div> </div> <div> <div> <div></div> <div> <div></div> <div></div> </div> <div></div> <div> <div style="margin-right: 13.5px;"></div> <div style="background: url(static/img/midAD1.jpg);margin-right: 13.5px;"></div> <div style="background: url(static/img/midAD2.jpg);margin-right: 13.5px;"></div> <div style="background: url(static/img/midAD3.jpg);"></div> </div> <div></div> <div> <h3>小米闪购</h3> </div> <div> <div style="margin-right: 12.7px;border-top: 1px solid red;"></div> <div style="margin-right: 12.7px;border-top: 1px solid orange;"></div> <div style="margin-right: 12.7px;border-top: 1px solid green;"></div> <div style="margin-right: 12.7px;border-top: 1px solid blue;"></div> <div style="border-top: 1px solid red;"></div> </div> <div></div> <div style="background: url(static/img/longAD1.jpg);"></div> <div>手机</div> <div> <div></div> <div> <div> <div style="margin-right: 15px;"></div> <div style="margin-right: 15px;"></div> <div style="margin-right: 15px;"></div> <div ></div> </div> <div style="margin-top: 14px"> <div style="margin-right: 15px;"></div> <div style="margin-right: 15px;"></div> <div style="margin-right: 15px;"></div> <div ></div> </div> </div> </div> <div></div> <div style="background: url(static/img/longAD2.jpg);"></div> <div>家电</div> <div> <div> <div style="margin-right: 10px;background: url(static/img/buy/家电AD1.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div></div> </div> <div style="margin-top: 14px;"> <div style="margin-right: 10px;background: url(static/img/buy/家电AD2.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div > <div></div> <div style="margin-top: 10px;"></div> </div> </div> </div> <div></div> <div></div> <div style="background: url(static/img/longAD3.jpg);"></div> <div>智能</div> <div> <div> <div style="margin-right: 10px;background: url(static/img/buy/智能AD1.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div></div> </div> <div style="margin-top: 14px;"> <div style="margin-right: 10px;background: url(static/img/buy/智能AD2.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div> <div></div> <div style="margin-top: 10px;"></div> </div> </div> </div> <div></div> <div></div> <div style="background: url(static/img/longAD4.jpg);"></div> <div>搭配</div> <div> <div> <div style="margin-right: 10px;background: url(static/img/buy/搭配AD1.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div></div> </div> <div style="margin-top: 14px;"> <div style="margin-right: 10px;background: url(static/img/buy/搭配AD2.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div> <div></div> <div style="margin-top: 10px;"></div> </div> </div> </div> <div></div> <div></div> <div style="background: url(static/img/longAD5.jpg);"></div> <div>配件</div> <div> <div> <div style="margin-right: 10px;background: url(static/img/buy/配件AD1.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div></div> </div> <div style="margin-top: 14px;"> <div style="margin-right: 10px;background: url(static/img/buy/配件AD2.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div> <div></div> <div style="margin-top: 10px;"></div> </div> </div> </div> <div></div> <div></div> <div style="background: url(static/img/longAD6.jpg);"></div> <div>周边</div> <div> <div> <div style="margin-right: 10px;background: url(static/img/buy/周边AD1.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div></div> </div> <div style="margin-top: 14px;"> <div style="margin-right: 10px;background: url(static/img/buy/周边AD2.jpg);"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div> <div></div> <div style="margin-top: 10px;"></div> </div> </div> </div> <div></div> <div></div> <div style="background: url(static/img/longAD7.jpg);"></div> <div>为你推荐</div> <div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div style="margin-right: 10px;"></div> <div></div> </div> <div></div> <div> <div>网页底部</div> </div> </body> </html>