摘要:根据课程不知的总布局如下,用内部样式: <!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{width: 1226px;background: #ccc;margin: 10px auto;height: 460px;} .contentMainTwo{width: 1226px;height: 180px;margin: 10px auto;background: #ccc;} .contentMainShop{width: 1226px;height: 60px;margin: 10px auto;background: #ccc;line-height: 60px;} .contentMainShopUl{width: 1226px;height: 300px;margin: 10px auto;background: #ccc;} .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 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>