摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="sta
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="static/img/footlogo.png"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> <title>小米商城</title> </head> <body> <!-- 头部 header --> <div> <div></div> </div> <!-- 内容 content --> <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 class=""></div> </div> <!-- 页脚 footer--> <div> <div>网页底部</div> </div> </body> </html>
*{padding: 0px;margin: 0px;}
.clear{clear: both;}
li {list-style: none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
/*头部样式*/
.header{background: #333;width: 100%;height: 40px;}
/*主体样式*/
/*父级给了宽度，一般让子级自己撑开所以content不设高度*/
.content{width: 1226px;margin: 0px auto;}
.content_menu{background: #ccc;height: 90px;margin:10px auto;}
.content_pic{background: #ccc;height: 480px;margin:10px auto;}
.contentpic_ul{background: #ccc;height: 180px;margin:10px auto;}
.contentshop{background: #ccc;height: 280px;margin:10px auto;}
.contentimg{background: #ccc;height: 100px;margin:10px auto;}
.contentul{background: #ccc;height: 80px;margin:10px auto;}
.contentphone{background: #ccc;height: 500px;margin:10px auto;}
/*页脚样式*/
.footer{background: #ccc;width: 1226px;height: 100px;margin: 10px auto;}跟着老师思路做清晰了不少，先做最外面的大盒子，然后一步步修饰小盒子的样式！
