摘要:随堂作业如下,用内部样式写入 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城首页</title> <link rel="shortcut icon"
随堂作业如下,用内部样式写入 <!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;} .contentMainUl{width: 1226px;height: 80px;margin: 10px auto;background: #ccc;line-height: 80px;} .contentMainImages{width: 1226px;height: 500px;margin: 10px auto;background: #ccc} /*底部样式*/ .footerMain{width: 1226px; height: 100px;background: #ccc;margin: 10px auto;line-height: 100px} /*内部样式写入*/ </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 style="background: url(static/img/longAD2.jpg);"></div> <div>家电</div> <div></div> <div style="background: url(static/img/longAD3.jpg);"></div> <div>智能</div> <div></div> <div style="background: url(static/img/longAD4.jpg);"></div> <div>搭配</div> <div></div> <div style="background: url(static/img/longAD5.jpg);"></div> <div>配件</div> <div></div> <div style="background: url(static/img/longAD6.jpg);"></div> <div>周边</div> <div></div> <div style="background: url(static/img/longAD7.jpg);"></div> <div>为你推荐</div> <div></div> </div> </div> <div> <div>网页底部 </div> </div> </body> </html>