本文主要是介绍HTML+CSS简单的淘宝首页框架布局小练(二），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
-
按要求将淘宝的首页布局块具体化
-
在写的过程中（小傻猫）出现了点问题，个人理解是可能将整体的
框架布局完了，下面的具体化分块的时候，就出现了布局块的 叠加遮盖
问题，最后没办法将打布局一些做了点改动（个人觉得应该不先把所有
打布局以此写完，应该是将大布局里面的小布局先具体化点，再续写下
面的大布局，这样就会防止出现布局的叠加问题，也可能是个人的问题，
小傻猫，哈哈哈！） -
具体代码
HTML<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DIV框架首页</title><link href="../CSS/text4.css" type="text/css" rel="stylesheet">
</head>
<body><div class="index"><div class="header">页眉</div><div class="nav"><div class="nav_1"><div class="logo">logo</div><div class="nav_1_1">一</div><div class="nav_1_2">二</div><div class="nav_1_3">三</div><div class="nav_1_4">四</div><div class="nav_1_5">五</div><div class="nav_1_6">六</div></div></div><div class="focus"><div class="focus_1"><div class="focus_1_1">主题市场</div><div class="focus_1_2">广告</div><div class="news">淘宝头条</div></div><div class="focus_2">账户</div></div><div class="content"><div class="column_1"><div class="column_1_1"><p>有好货</p><div class="column_1_1_1"></div><div class="column_1_1_2"></div><div class="column_1_1_3"></div><div class="column_1_1_4"></div><div class="column_1_1_5"></div><div class="column_1_1_6"></div></div><div class="column_1_2"><p>爱逛街</p><div class="column_1_2_1"></div><div class="column_1_2_2"></div><div class="column_1_2_3"></div><div class="column_1_2_4"></div><div class="column_1_2_5"></div><div class="column_1_2_6"></div></div></div><div class="column_2"><div class="column_2_1"><P>淘抢购</P><div class="column_2_1_1"></div><div class="column_2_1_2"></div><div class="column_2_1_3"></div></div><div class="column_2_2">广告</div></div><div class="column_3"><div class="column_3_1"><p>每日好店</p><div class="column_3_1_1"></div><div class="column_3_1_2"></div><div class="column_3_1_3"></div><div class="column_3_1_4"></div></div><div class="column_3_2"><p>淘宝直播</p><div class="column_3_2_1"></div><div class="column_3_2_2"></div><div class="column_3_2_3"></div><div class="column_3_2_4"></div></div></div></div><div class="content1"><div class="column_4"><div class="column_4_1"><p>时尚爆料王</p><div class="column_4_1_1"></div><div class="column_4_1_2"></div><div class="column_4_1_3"></div></div><div class="column_4_2">今新品</div></div><div class="column_5"><div class="column_5_1"><p>品质生活</p><div class="column_55_1"><div class="column_5_1_1">一</div><div class="column_5_1_2">二</div><div class="column_5_1_3">三</div><div class="column_5_1_4">四</div></div><div class="column_55_2"><div class="column_5_1_5">五</div><div class="column_5_1_6">六</div><div class="column_5_1_7">七</div></div></div><div class="column_5_2"><p>特色玩味控</p><div class="column_55_1"><div class="column_5_1_1">一</div><div class="column_5_1_2">二</div><div class="column_5_1_3">三</div><div class="column_5_1_4">四</div></div><div class="column_55_2"><div class="column_5_1_5">五</div><div class="column_5_1_6">六</div><div class="column_5_1_7">七</div></div></div></div><div class="column_6"><p>实惠专业户</p><div class="column_6_1"></div><div class="column_6_2"></div><div class="column_6_3"></div><div class="column_6_4"></div><div class="column_6_5"></div></div><div class="column_7"><p>热卖单品</p><div class="column_7_1"></div><div class="column_7_2"></div><div class="column_7_3"></div><div class="column_7_4"></div><div class="column_7_5"></div><div class="column_7_6"></div><div class="column_7_7"></div><div class="column_7_8"></div><div class="column_7_9"></div><div class="column_7_10"></div><div class="column_7_11"></div><div class="column_7_12"></div><div class="column_7_13"></div></div></div><div class="content2"><div class=" column_22_1"><p>猜你喜欢</p><div class="column_22_1_1"></div><div class="column_22_1_2"></div><div class="column_22_1_3"></div><div class="column_22_1_4"></div><div class="column_22_1_5"></div><div class="column_22_1_6"></div><div class="column_22_1_7"></div><div class="column_22_1_8"></div><div class="column_22_1_9"></div><div class="column_22_1_10"></div><div class="column_22_1_11"></div><div class="column_22_1_12"></div><div class="column_22_1_13"></div><div class="column_22_1_14"></div><div class="column_22_1_15"></div><div class="column_22_1_16"></div><div class="column_22_1_17"></div><div class="column_22_1_18"></div><div class="column_22_1_19"></div><div class="column_22_1_20"></div><div class="column_22_1_21"></div><div class="column_22_1_22"></div><div class="column_22_1_23"></div><div class="column_22_1_24"></div><div class="column_22_1_25"></div><div class="column_22_1_26"></div></div></div><div class="footer">页脚</div>
</div></body>
</html>
CSS*{margin:0;padding: 0;
}
body{background-color: azure;
}
.header{margin: 0 auto;width: 100%;height: 40px;background-color: #f6dfff;
}
.nav{margin: 0 auto;width: 1150px;height: 100px;background-color: #333333;
}
.nav_1{margin: 0 auto;width: 100%;height: 100%;
}
.logo{float: left;width: 250px;height: 100%;background-color: #f0ebff;
}
.nav_1_1{float: left;width: 150px;height: 100%;background-color: #f9deff;
}
.nav_1_2{float: left;width: 150px;height: 100%;background-color: #fee1ff;
}
.nav_1_3{float: left;width: 150px;height: 100%;background-color: #f2d1fb;
}
.nav_1_4{float: left;width: 150px;height: 100%;background-color: #edbeee;
}
.nav_1_5{float: left;width: 150px;height: 100%;background-color: #ecc7f9;
}
.nav_1_6{float: left;width: 150px;height: 100%;background-color: #f2caff;}
.focus {margin: 0 auto;width: 1150px;height: 770px;background-color: white;
}
.focus_1{float: left;margin: 0 auto;width: 850px;height: 100%;background-color: white;
}
.focus_1_1{margin :0 auto;float: left;width: 250px;height: 500px;background-color: #fae4f9;
}
.focus_1_2{float: left;margin-top: 10px;margin-left: 10px;width: 580px;height: 490px;background-color: #f1dcff;
}
.news {float: left;margin-top: 10px;width: 840px;height: 260px;background-color: #f4cbff;
}
.focus_2{float: left;margin-top: 10px;width: 300px;height: 760px;background-color: #e8bcfa;}
.content{margin: 0 auto;width: 1150px;height: 1260px;background-color: white;
}
.column_1{margin: 0 auto;width: 100%;height: 500px;
}
.column_1_1{float: left;margin-top: 10px;width: 570px;height: 490px;background-color: white;
}
.column_1_1_1{float: left;margin-left: 20px;margin-top: 20px;width: 170px;height: 170px;background-color: #f7efff;
}
.column_1_1_2{float: left;margin-left: 10px;margin-top: 20px;width: 170px;height: 170px;background-color: #f6e6ff;
}
.column_1_1_3{float: left;margin-left: 10px;margin-top: 20px;width: 170px;height: 170px;background-color: #fae5ff;
}
.column_1_1_4{float: left;margin-top: 55px;margin-left: 20px;width: 170px;height: 170px;background-color: #f1d8ff;
}
.column_1_1_5{float: left;margin-left: 10px;margin-top: 55px;width: 170px;height: 170px;background-color: #fed3ff;
}
.column_1_1_6{float: left;margin-left: 10px;margin-top: 55px;width: 170px;height: 170px;background-color: #fecfff;
}
.column_1_2{float: left;margin-top: 10px;margin-left: 10px;width: 570px;height: 490px;background-color: white;
}
.column_1_2_1{float: left;margin-left: 20px;margin-top: 20px;width: 170px;height: 170px;background-color: #f7efff;
}
.column_1_2_2{float: left;margin-left: 10px;margin-top: 20px;width: 170px;height: 170px;background-color: #f6e6ff;
}
.column_1_2_3{float: left;margin-left: 10px;margin-top: 20px;width: 170px;height: 170px;background-color: #fae5ff;
}
.column_1_2_4{float: left;margin-top: 55px;margin-left: 20px;width: 170px;height: 170px;background-color: #f1d8ff;
}
.column_1_2_5{float: left;margin-left: 10px;margin-top: 55px;width: 170px;height: 170px;background-color:#fed3ff;
}
.column_1_2_6{float: left;margin-left: 10px;margin-top: 55px;width: 170px;height: 170px;background-color: #fecfff;
}
.column_2{margin: 0 auto;width: 100%;height: 250px;
}
.column_2_1{margin-top: 10px;width: 100%;height: 190px;background-color:white;
}
.column_2_1_1{float: left;width:383px;height: 169px;background-color: #f6e6ff;
}
.column_2_1_2{float: left;width:383px;height: 169px;background-color: #f4dbff;
}
.column_2_1_3{float: left;width:383px;height: 169px;background-color: #ead8ff;
}
.column_2_2{float: left;margin-top: 10px;width: 1150px;height: 40px;background-color: white;
}
.column_3{margin: 0 auto;width: 100%;height: 500px;background-color: white;
}
.column_3_1{float: left;margin-top: 10px;width: 570px;height: 490px;background-color: white;
}
.column_3_1_1{float: left;margin-top: 25px;margin-left: 20px;width: 260px;height: 200px;background-color: #f6edff;
}
.column_3_1_2{float: left;margin-top: 25px;margin-left: 10px;width: 260px;height: 200px;background-color: #fee7ff;
}
.column_3_1_3{float: left;margin-top: 30px;margin-left: 20px;width: 260px;height: 200px;background-color: #f4dfff;
}
.column_3_1_4{float: left;margin-top: 30px;margin-left: 10px;width: 260px;height: 200px;background-color: #ffd4ff;
}
.column_3_2{float: left;margin-top: 10px;width: 570px;height: 490px;background-color: white;
}
.column_3_2_1{float: left;margin-top: 25px;margin-left: 20px;width: 260px;height: 200px;background-color: #f6edff;
}
.column_3_2_2{float: left;margin-top: 25px;margin-left: 10px;width: 260px;height: 200px;background-color: #fee7ff;
}
.column_3_2_3{float: left;margin-top: 30px;margin-left: 20px;width: 260px;height: 200px;background-color:#f4dfff;
}
.column_3_2_4{float: left;margin-top: 30px;margin-left: 10px;width: 260px;height: 200px;background-color:#ffd4ff;
}
.content1{margin :0 auto;width: 1150px;height: 1600px;background-color: white;
}
.column_4{margin: 0 auto;width: 1150px;height: 200px;
}
.column_4_1{float: left;margin-top: 10px;width: 740px;height: 190px;background-color:white;
}
.column_4_1_1{float: left;margin-top: 10px;width:246px;height: 160px;background-color: #f4e6ff;
}
.column_4_1_2{float: left;margin-top: 10px;margin-left: 1px;width:246px;height: 160px;background-color: #fae1ff;
}
.column_4_1_3{float: left;margin-top: 10px;margin-left: 1px;width:246px;height: 160px;background-color: #fce0ff;
}
.column_4_2 {float: left;margin-top: 10px;margin-left: 10px;width: 400px;height: 190px;background-color: #f2d8ff;
}
.column_5{margin:0 auto;width: 1150px;height: 560px;
}
.column_5_1{float: left;margin-top: 10px;width: 570px;height: 550px;background-color: white;
}
.column_55_1{float: left;width:306px;height: 530px;
}
.column_5_1_1{float: left;margin-top: 10px;margin-left: 1px;width: 305px;height: 280px;background-color: #fbf0ff;
}
.column_5_1_2 {float: left;margin-left: 1px;margin-top: 1px;width: 305px;height: 78px;background-color: #feebff;
}
.column_5_1_3{float: left;margin-left: 1px;margin-top: 1px;width: 305px;height: 78px;background-color: #eadfff;
}
.column_5_1_4 {float: left;margin-left: 1px;margin-top: 1px;width: 305px;height: 78px;background-color: #ebe1fe;
}
.column_5_1_5{float: left;margin-top: 10px;margin-left: 1px;width: 260px;height: 172px;background-color: #f1d8ff;
}
.column_5_1_6{float: left;margin-left: 1px;margin-top: 1px;float: left;width: 260px;height: 172px;background-color: #f2d8ff;
}
.column_5_1_7{float: left;margin-left: 1px;margin-top: 1px;float: left;width: 260px;height: 172px;background-color: #edcdff;
}
.column_5_2{float: left;margin-top: 10px;margin-left: 10px;width: 570px;height: 550px;background-color: white;
}
.column_6{margin-top: 10px;width: 1150px;height: 190px;background-color: white;
}
.column_6_1{float: left;margin-top: 10px;margin-left: 1px;width:229px; ;height: 160px;background-color: #efe6ff;
}
.column_6_2{float: left;margin-left: 1px;margin-top: 10px;width:229px; ;height: 160px;background-color: #f3edff;
}
.column_6_3{float: left;margin-left: 1px;margin-top: 10px;width:229px; ;height: 160px;background-color: #eddfff;
}
.column_6_4{float: left;margin-left: 1px;margin-top: 10px;width:229px; ;height: 160px;background-color: #f4d5ff;
}
.column_6_5{float: left;margin-left: 1px;margin-top: 10px;width:229px; ;height: 160px;background-color: #efd1ff;
}
.column_7{margin-top: 10px;width: 1150px;height: 690px;background-color:white;
}
.column_7_1{float: left;margin-top: 10px;margin-left: 1px;width: 229px;height: 260px;background-color: #f8f4ff;
}
.column_7_2{float: left;margin-top: 10px;margin-left: 1px;width: 229px;height: 260px;background-color: #f7ecff;
}
.column_7_3{float: left;margin-top: 10px;margin-left: 1px;width: 229px;height: 260px;background-color: #fbe9ff;
}
.column_7_4{float: left;margin-top: 10px;margin-left: 1px;width: 229px;height: 260px;background-color: #fde2ff;
}
.column_7_5{float: left;margin-top: 10px;margin-left: 1px;width: 229px;height: 260px;background-color: #fde0ff;
}
.column_7_6{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 260px;background-color: #f8f4ff;
}
.column_7_7{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 260px;background-color:#f7ecff;
}
.column_7_8{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 260px;background-color:#fbe9ff;
}
.column_7_9{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 260px;background-color: #fde2ff;
}
.column_7_10{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 260px;background-color: #fde0ff;
}
.column_7_11{float: left;margin-left: 10px;margin-top: 1px;width:370px; ;height: 135px;background-color: #fff7ff;
}
.column_7_12{float: left;margin-left: 10px;margin-top: 1px;width:370px; ;height: 135px;background-color: #fff6fc;
}
.column_7_13{float: left;margin-left: 10px;margin-top: 1px;width:370px; ;height: 135px;background-color: #ffeafd;
}.content2 {margin: 0 auto;width: 1150px;height: 1125px;}.column_22_1{float: left;margin-top: 10px;width: 100%;height: 100%;background-color: white;
}
.column_22_1_1{float: left;margin-top: 20px;margin-left: 1px;width: 229px;height: 270px;background-color: #fffafe;
}
.column_22_1_2{float: left;margin-top: 20px;margin-left: 1px;width: 229px;height: 270px;background-color: #fff1fa;
}
.column_22_1_3{float: left;margin-top: 20px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffebf4;
}
.column_22_1_4{float: left;margin-top: 20px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffe6f4;
}
.column_22_1_5{float: left;margin-top: 20px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffecf7;
}
.column_22_1_6{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #fffafe;
}
.column_22_1_7{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #fff1fa;
}
.column_22_1_8{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffebf4;
}
.column_22_1_9{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color:#ffe6f4;
}
.column_22_1_10{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffecf7;
}
.column_22_1_11{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #fffafe;
}
.column_22_1_12{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #fff1fa;
}
.column_22_1_13{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffebf4;
}
.column_22_1_14{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color:#ffe6f4;
}
.column_22_1_15{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffecf7;
}
.column_22_1_16{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color:#fffafe;
}
.column_22_1_17{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color:#fff1fa;
}
.column_22_1_18{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffebf4;
}
.column_22_1_19{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffe6f4;
}
.column_22_1_20{float: left;margin-top: 1px;margin-left: 1px;width: 229px;height: 270px;background-color: #ffecf7;
}
.footer{margin: 0 auto;width: 1150px;height: 300px;background-color:lavenderblush;
}这篇关于HTML+CSS简单的淘宝首页框架布局小练(二）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
