今天先将淘宝的布局给分割了出来，后续再一一还原：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝</title>
<link rel="stylesheet" href="taobao.css">
<body>
<div class="abc">固定标签</div>
<div class="top-tag">
<div class="top-tag-mine">页面登陆功能</div>
</div>
<div class="nav">
<div class="nav-left">logo</div>
<div class="nav-mine">搜索栏</div>
<div class="nav-right">二维码</div>
小分类栏
</div>
<div id="main">
<div class="main-tag">小分类栏2
</div>
<div class="cont">
<div class="cont-left">分类区</div>
<div class="cont-mine">
<div class="cont-mine-top">nihao</div>
<div class="cont-mine-bottom-left">nihao
</div>
<div class="cont-mine-bottom-right">nihao</div>
</div>
<div class="cont-right">
<div>
<div class="top1">1</div>
<div class="top2">2</div>
<div class="top3">3</div>
<div class="top4">4</div>
<div class="bottom1">1</div>
<div class="bottom2">2</div>
<div class="bottom3">3</div>
<div class="bottom4">4</div>
</div>
</div>
</div>
<div class="shop">shop</div>
<div class="foot">底部</div>
</body>
</html>
——————————————————————————————————————————
附上我的外联文件taobao.css
.abc{
position: fixed;
width: 80px;
height: 180px;
background-color: rgb(165, 226, 22);
right: 176px;
bottom: 100px;
}
*{
margin: 0 auto;
padding: 0;
}
body{
background-color: rgb(33, 143, 158);
}
.top-tag{
width: 100%;
height: 30px;
background-color: #f5f5f5;
}
.top-tag-mine{
width: 1000px;
height: 30px;
background-color: aqua;
}
.nav{
width: 1000px;
height: 60px;
background-color: orange;
}
.nav-left{
float: left;
width: 20%;
height: 30px;
background-color: rgb(167, 228, 70);
}
.nav-mine{
float: left;
width: 70%;
height: 30px;
background-color: rgb(193, 79, 228);
}
.nav-right{
float: left;
width: 10%;
height: 30px;
background-color: rgb(192, 34, 68);
}
#main{
width: 1000px;
height: 535px;
background-color: blueviolet;
}
.main-tag{
width: 100%;
height: 30px;
background-color:green;
}
.cont{
width: 1000px;
height: 515px;
background-color: gold;
}
.cont-left{
float: left;
width: 30%;
height: 515px;
background-color:pink;
}
.cont-mine{
float: left;
width: 40%;
height: 515px;
background-color: rgb(147, 206, 120);
}
.cont-mine-top{
height: 250px;
width: 400px;
background-color: rgb(45, 110, 207);
}
.cont-mine-bottom-left{
float: left;
width: 50%;
height: 265px;
background-color: rgb(80, 211, 193);
}
.cont-mine-bottom-right{
float: left;
width: 50%;
height: 265px;
background-color: rgb(167, 74, 185);
}
.cont-right{
float: left;
width: 30%;
height: 515px;
background-color: pink;
}
.top1{
width: 100%;
height: 100px;
background-color: rgb(69, 16, 129);
color: rgb(233, 233, 220);
}
.top2{
width: 100%;
height: 40px;
background-color: rgb(231, 56, 56);
}
.top3{
width: 100%;
height: 200px;
background-color: rgb(10, 47, 150);
}
.top4{
width: 100%;
height: 100px;
background-color: rgb(56, 211, 231);
}
.bottom1{
float: left;
width: 25%;
height: 75px;
background-color: green;
}
.bottom2{
float: left;
width: 25%;
height: 75px;
background-color: rgb(250, 4, 65);
}
.bottom3{
float: left;
width: 25%;
height: 75px;
background-color: rgb(206, 13, 164);
}
.bottom4{
float: left;
width: 25%;
height: 75px;
background-color: rgb(40, 221, 40);
}
.shop{
width: 1000px;
height: 535px;
background-color:blue;
}
.foot{
width: 1000px;
height: 160px;
background-color: brown;
}
