-
按要求将淘宝的首页布局块具体化
-
在写的过程中(小傻猫)出现了点问题,个人理解是可能将整体的
框架布局完了,下面的具体化分块的时候,就出现了布局块的 叠加遮盖
问题,最后没办法将打布局一些做了点改动(个人觉得应该不先把所有
打布局以此写完,应该是将大布局里面的小布局先具体化点,再续写下
面的大布局,这样就会防止出现布局的叠加问题,也可能是个人的问题,
小傻猫,哈哈哈!) -
具体代码
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;
}