css+div可以实现很多复杂的布局，下面来看其中一个比较经典的布局：
我们可以把整个布局当做一个大的div，里面套着四个div，一个是头部，一个是导航栏，一个是主体（里面再分为两个div，利用浮动排成水平方向），一个是尾部。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin: 0;/*清除浏览器自带的margin,使后面设置container的margin生效*/
}
.container{
height: 700px;
width: 1000px;
border: 1px solid black;
box-sizing: border-box; /*边框内置,作为内容的一部分,不突出去*/
margin:0 auto; /*前面一个参数0表示上下margin为0,后面auto表示左右居中*/
}
.header{
width: 100%;
height: 10%;
border: 1px solid black;
box-sizing: border-box;
background-color: green;
}
.navbar{
width: 100%;
height: 5%;
background-color: blue;
border: 1px solid black;
box-sizing: border-box;
margin-top: 5px;
}
.maincontainer{
margin-top: 5px;
width: 100%;
border: 1px solid black;
box-sizing: border-box;
//background-color: green;
height: 75%;
}
.footer{
height: 9%;
background-color: blue;
margin-top: 4px;
box-sizing: border-box;
}
.left{
border: 1px solid black;
box-sizing: border-box;
height: 100%;
width: 30%;
background-color: yellow;
float: left;
}
.main{
border: 1px solid black;
box-sizing: border-box;
height: 100%;
width: 65%;
background-color: deepskyblue;
float: left;
margin-left: 5%;
}
.footer{
clear: both; /*其实这里可以不需要clear，因为footer是在maincontainer的外面，而不是在里面，
如果是和left、main并列的则必须clear*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="navbar">导航条</div>
<div class="maincontainer">
<div class="left">侧边栏</div>
<div class="main">内容</div>
</div>
<div class="footer">尾部</div>
</div>
</body>
</html>
下面来实战模仿csdn的首页进行布局：
首先写出大致布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
background-color:darkgray;
}
.div1{
height: 40px;
background-color: #333;
}
.div2{
height: 40px;
background-color: white;
}
.container{
width: 1000px;
height: 800px;
background-color: wheat;
margin: 0 auto;
margin-top: 0px;
clear: both;
}
/*.header{
width: 100%;
background-color: green;
height: 6%;
} */
.navbar{
width: 100%;
height: 10%;
background-color: yellow;
}
.maincontainer{
width: 100%;
height: 76%;
margin-top: 2%;
background-color: pink;
}
.footer{
width: 100%;
height: 10%;
margin-top: 2%;
background-color: royalblue;
}
.main{
height: 100%;
width: 70%;
background-color: peru;
float: left;
}
.right{
height: 100%;
width: 28%;
background-color: blueviolet;
float: left;
margin-left: 2%;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
</div>
<div class="container">
<div class="navbar">导航</div>
<div class="maincontainer">
<div class="main">内容</div>
<div class="right">右侧</div>
</div>
<div class="footer">尾部</div>
</div>
</body>
</html>
效果是这样的：
再逐步填充里面的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
background-color:#e7ecef;
}
.div1{
height: 40px;
background-color: #333;
}
.div2{
height: 40px;
background-color: white;
}
.container{
width: 1200px;
height: 800px;
margin: 0 auto;
margin-top: 0px;
clear: both;
margin-top: 10px;
}
.navbar{
width: 100%;
height: 10%;
}
.navbar1{
width: 83%;
height: 100%;
float: left;
background-image: url(img/dh.png);
}
.navbar2{
height: 100%;
width: 15%;
margin-left: 2%;
float: left;
border: 1px solid gainsboro;
box-sizing: border-box;
background-color: white;
}
.maincontainer{
width: 100%;
height: 76%;
margin-top: 2%;
background-color: #e7ecef;
}
.footer{
height: 100px;
text-align: center;
background-color: white;
vertical-align: middle;
}
.main{
height: 100%;
width: 70%;
background-color: white;
float: left;
}
.right{
height: 100%;
width: 28%;
background-color: white;
float: left;
margin-left: 2%;
}
.bk{
margin-left: 16%;
font-size: 25px;
color: white;
text-indent: 50px;
}
ul{
display: inline;/*变为行级元素，否则下移了*/
}
ul li{
width: 100px;
list-style-type: none;
float: left;
}
a{
text-decoration: none;
}
a:link{
color: blue;
}
a:visited{
color: black;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
.csdn{
text-align: center;
}
.div21{
text-align: center;
margin-left: 18%;
font-size: 18px;
}
.main1{
width: 100%;
height: 8%;
background-color: white;
border-bottom: 15px solid #e7ecef;
}
.main1_div1{
float: left;
margin-left: 10%;
font-size: 15px;
}
.main1_div2{
float: left;
margin-left: 10%;
font-size: 15px;
}
.main2{
width: 100%;
height: 30%;
//background-color: red;
border-bottom: 1px dashed gainsboro;
}
.main2_left{
width: 20%;
height: 100%;
border-right: 1px dashed gainsboro;
float: left;
}
.main2_left_top {
width: 80%;
height: 60%;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.main2_left_top img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.main2_left_bottom{
text-align: center;
}
.main2_right{
margin-left: 2%;
width: 75%;
height: 100%;
float: left;
}
.float_left{
float: left;
}
.float_right{
float: left;
margin-left: 20%;
}
.right1{
width: 100%;
height: 30%;
border-bottom: 10px solid #e7ecef;
margin: auto;
}
.right2{
width: 100%;
height: 30%;
border-bottom: 10px solid #e7ecef;
}
.right3{
width: 100%;
height: 30%;
}
.right1_1{
width: 40%;
height: 60%;
margin-left: 30%;/*左右边距相等，即可居中*/
margin-right: 30%;
margin-top: 5%;
}
.right1_1 img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.right1_2{
height: 10%;
text-align: center;
}
.right1_3{
height: 10%;
text-align: center;
}
</style>
</head>
<body>
<div class="div1">
<div class="bk">博客</div>
</div>
<div class="div2">
<div class="div21">
<ul>
<li><a href="">首页</a></li>
<li><a href="">博客专栏</a></li>
<li><a href="">博客专家</a></li>
<li><a href="">行家</a></li>
<li><a href="">观点</a></li>
<li><a href="">排行榜</a></li>
<li><a href="">我的博客</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="navbar">
<div class="navbar1"></div>
<div class="navbar2"><p class="csdn">优快云</p></div>
</div>
<div class="maincontainer">
<div class="main">
<div class="main1">
<div class="main1_div1"><a href="">关于csdn新皮肤的说明</a></div>
<div class="main1_div2"><a href="">关于AI</a></div>
</div>
<div class="main2">
<div class="main2_left">
<div class="main2_left_top">
<img src="img/wawa.png" />
</div>
<div class="main2_left_bottom">娃娃</div>
</div>
<div class="main2_right">
<h3>史上最难的java面试题</h3>
<div>
<a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。
题目如下：public class TestSync2 implements Runnable { int b...</a>
</div>
<div class="float_left"><ul>
<li><a href="">云计算</a></li>
<li><a href="">高并发</a></li>
</ul>
</div>
<div class="float_right">昨天</div>
</div>
</div>
<div class="main2">
<div class="main2_left">
<div class="main2_left_top">
<img src="img/wawa.png" />
</div>
<div class="main2_left_bottom">娃娃</div>
</div>
<div class="main2_right">
<h3>史上最难的java面试题</h3>
<div>
<a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。
题目如下：public class TestSync2 implements Runnable { int b...</a>
</div>
<div class="float_left"><ul>
<li><a href="">云计算</a></li>
<li><a href="">高并发</a></li>
</ul>
</div>
<div class="float_right">昨天</div>
</div>
</div>
<div class="main2">
<div class="main2_left">
<div class="main2_left_top">
<img src="img/wawa.png" />
</div>
<div class="main2_left_bottom">娃娃</div>
</div>
<div class="main2_right">
<h3>史上最难的java面试题</h3>
<div>
<a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。
题目如下：public class TestSync2 implements Runnable { int b...</a>
</div>
<div class="float_left"><ul>
<li><a href="">云计算</a></li>
<li><a href="">高并发</a></li>
</ul>
</div>
<div class="float_right">昨天</div>
</div>
</div>
</div>
<div class="right">
<div class="right1">
<div class="right1_1"><img src="img/p.png"></div>
<div class="right1_2"><h4>宝宝</h4></div>
<div class="right1_3">精通python</div>
</div>
<div class="right1">
<div class="right1_1"><img src="img/p.png"></div>
<div class="right1_2"><h4>宝宝</h4></div>
<div class="right1_3">精通python</div>
</div>
<div class="right1">
<div class="right1_1"><img src="img/p.png"></div>
<div class="right1_2"><h4>宝宝</h4></div>
<div class="right1_3">精通python</div>
</div></div>
</div>
</div>
<div class="footer">尾部</div>
</body>
</html>
大致效果如下：
再仿淘宝首页：
布局代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
background-color:#e7ecef;
}
.div1{
height: 40px;
background-color: lightgrey;
}
.div2{
height: 120px;
background-color: #f5f5f5;
}
.div3{
height: 30px;
background-color: orange;
}
.container{
//width: 1204px;
height: 2000px;
background-color: pink;
margin: 0 auto;
margin-left: 12%;
margin-right: 12%;
}
.footer{
height: 265px;
background-color: grey;
}
.bottom{
height: 245px;
background-color: red;
}
.div1_left{
width: 30%;
height: 100%;
background-color: red;
margin-left: 12%;
float: left;
border: 1px solid black;
box-sizing: border-box;
}
.div1_right{
height: 100%;
width: 40%;
background-color: blue;
margin-left: 15%;
float: left;
border: 1px solid black;
box-sizing: border-box;
}
.div2_left{
height: 100%;
width: 12%;
background-color: purple;
float: left;
margin-left: 12%;
border: 1px solid black;
box-sizing: border-box;
}
.div2_mid{
height: 100%;
width: 45%;
background-color: blue;
float: left;
margin-left: 6%;
border: 1px solid black;
box-sizing: border-box;
}
.div2_right{
height: 100%;
width: 10%;
background-color: skyblue;
float: left;
margin-left: 6%;
border: 1px solid black;
box-sizing: border-box;
}
.div3_1{
height: 100%;
width: 12%;
margin-left: 12%;
float: left;
border: 1px solid black;
box-sizing: border-box;
background-color: greenyellow;
}
.div3_2{
height: 100%;
width: 15%;
background-color: powderblue;
float: left;
border: 1px solid black;
box-sizing: border-box;
}
.div3_3{
height: 100%;
width: 25%;
background-color: darkcyan;
float: left;
border: 1px solid black;
box-sizing: border-box;
}
.div3_4{
height: 100%;
width: 20%;
background-color: darkgoldenrod;
float: left;
border: 1px solid black;
box-sizing: border-box;
}
.main1{
width: 100%;
height: 32%;
background-color: #e7ecef;
border-bottom: 10px solid #e7ecef;
}
.main1_left{
width: 70%;
height: 100%;
float: left;
background-color: #e7ecef;
border: 1px solid black;
box-sizing: border-box;
}
.main1_right{
width: 29%;
height: 100%;
float: right;
background-color: #e7ecef;
border: 1px solid black;
box-sizing: border-box;
}
.main1_left_top{
width:100%;
height: 80%;
border: 1px solid black;
box-sizing: border-box;
background-color: #e7ecef;
}
.main1_left_bottom{
width:100%;
height: 18%;
border: 1px solid black;
box-sizing: border-box;
background-color: brown;
margin-top: 2%;
}
.main1_left_top_left{
height: 100%;
width: 22.5%;
float: left;
background-color: deepskyblue;
border: 1px solid black;
box-sizing: border-box;
}
.main1_left_top_right{
height: 100%;
width: 77.5%;
float: right;
background-color: #e7ecef;
}
.main1_left_top_right_left{
height: 97%;
width: 63%;
background-color: #e7ecef;
float: left;
margin: 2%;
margin-bottom: 0px;
border: 1px solid black;
box-sizing: border-box;
}
.main1_left_top_right_right{
height: 97%;
width: 30%;
background-color: #e7ecef;
float: right;
margin-top: 2%;
margin-right: 2%;
border: 1px solid black;
box-sizing: border-box;
}
.main1_left_top_right_left_top{
width: 100%;
height: 48%;
border: 1px solid black;
box-sizing: border-box;
background-color: pink;
}
.main1_left_top_right_left_bottom{
width: 100%;
height: 48%;
border: 1px solid black;
box-sizing: border-box;
background-color: deeppink;
}
.main1_left_top_right_left_mid{
width: 100%;
height: 4%;
}
.main1_right_1{
width: 100%;
height: 20%;
box-sizing: border-box;
border: 1px solid black;
background-color: deeppink;
}
.main1_right_2{
width: 100%;
height: 5%;
box-sizing: border-box;
border: 1px solid black;
background-color: red;
}
.main1_right_3{
width: 100%;
height: 60%;
box-sizing: border-box;
border: 1px solid black;
background-color: blue;
}
.main1_right_4{
width: 100%;
height: 15%;
box-sizing: border-box;
border: 1px solid black;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_left"></div>
<div class="div1_right"></div>
</div>
<div class="div2">
<div class="div2_left"></div>
<div class="div2_mid"></div>
<div class="div2_right"></div>
</div>
<div class="div3">
<div class="div3_1"></div>
<div class="div3_2"></div>
<div class="div3_3"></div>
<div class="div3_4"></div>
</div>
<div class="container">
<div class="main1">
<div class="main1_left">
<div class="main1_left_top">
<div class="main1_left_top_left"></div>
<div class="main1_left_top_right">
<div class="main1_left_top_right_left">
<div class="main1_left_top_right_left_top"></div>
<div class="main1_left_top_right_left_mid"></div>
<div class="main1_left_top_right_left_bottom"></div>
</div>
<div class="main1_left_top_right_right">
<div class="main1_left_top_right_left_top"></div>
<div class="main1_left_top_right_left_mid"></div>
<div class="main1_left_top_right_left_bottom"></div>
</div>
</div>
</div>
<div class="main1_left_bottom"></div>
</div>
<div class="main1_right">
<div class="main1_right_1"></div>
<div class="main1_right_2"></div>
<div class="main1_right_3"></div>
<div class="main1_right_4"></div>
</div>
</div>
</div>
<div class="footer"></div>
<div class="bottom"></div>
</body>
</html>
大致填充如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
background-color:#e7ecef;
}
.div1{
height: 40px;
background-color: orangered;
}
.div2{
height: 120px;
background-color: #f5f5f5;
}
.div3{
height: 30px;
background-color: orange;
}
.container{
//width: 1204px;
height: 2000px;
background-color: pink;
margin: 0 auto;
margin-left: 12%;
margin-right: 12%;
}
.floatdiv{
position: fixed;
top:200px;
right: 100px;
background-color: white;
text-align: center;
width: 100px;
height: 500px;
}
.footer{
height: 265px;
background-color: grey;
}
.bottom{
height: 245px;
background-color: red;
}
.div1_left{
width: 30%;
height: 100%;
//background-color: red;
margin-left: 12%;
float: left;
//border: 1px solid black;
box-sizing: border-box;
vertical-align: middle;
font-size: 16px;
}
.div1_right{
height: 100%;
width: 40%;
margin-left: 15%;
float: left;
box-sizing: border-box;
}
.div2_left{
height: 100%;
width: 12%;
// background-color: purple;
float: left;
margin-left: 12%;
//border: 1px solid black;
box-sizing: border-box;
}
.div2_mid{
height: 100%;
width: 45%;
//background-color: blue;
float: left;
margin-left: 6%;
//border: 1px solid black;
box-sizing: border-box;
}
.div2_right{
height: 90%;
width: 6%;
//background-color: skyblue;
float: left;
margin-left: 6%;
//border: 1px solid black;
box-sizing: border-box;
margin-top: 3px;
}
.div3_1{
height: 100%;
width: 12%;
margin-left: 12%;
float: left;
//border: 1px solid black;
box-sizing: border-box;
background-color: orangered;
text-align: center;
}
.div3_2{
height: 100%;
width: 15%;
//background-color: powderblue;
float: left;
//border: 1px solid black;
box-sizing: border-box;
}
.div3_3{
height: 100%;
width: 25%;
//background-color: darkcyan;
float: left;
//border: 1px solid black;
box-sizing: border-box;
}
.div3_4{
height: 100%;
width: 20%;
//background-color: darkgoldenrod;
float: left;
//border: 1px solid black;
box-sizing: border-box;
}
.main1{
width: 100%;
height: 32%;
background-color: #e7ecef;
border-bottom: 10px solid #e7ecef;
}
.main1_left{
width: 70%;
height: 100%;
float: left;
background-color: #e7ecef;
//border: 1px solid black;
box-sizing: border-box;
}
.main1_right{
width: 29%;
height: 100%;
float: right;
background-color: #e7ecef;
//border: 1px solid black;
box-sizing: border-box;
}
.main1_left_top{
width:100%;
height: 80%;
//border: 1px solid black;
box-sizing: border-box;
background-color: #e7ecef;
}
.main1_left_bottom{
width:100%;
height: 18%;
//border: 1px solid black;
//box-sizing: border-box;
//background-color: brown;
margin-top: 2%;
}
.main1_left_top_left{
height: 100%;
width: 22.5%;
float: left;
//background-color: deepskyblue;
border: 1px solid orangered;
box-sizing: border-box;
}
.main1_left_top_right{
height: 100%;
width: 77.5%;
float: right;
background-color: #e7ecef;
}
.main1_left_top_right_left{
height: 97%;
width: 63%;
background-color: #e7ecef;
float: left;
margin: 2%;
margin-bottom: 0px;
//border: 1px solid black;
box-sizing: border-box;
}
.main1_left_top_right_right{
height: 97%;
width: 30%;
background-color: #e7ecef;
float: right;
margin-top: 2%;
margin-right: 2%;
//border: 1px solid black;
box-sizing: border-box;
}
.main1_left_top_right_left_top{
width: 100%;
height: 48%;
//border: 1px solid black;
box-sizing: border-box;
background-color: pink;
}
.main1_left_top_right_left_bottom{
width: 100%;
height: 48%;
//border: 1px solid black;
box-sizing: border-box;
background-color: deeppink;
}
.main1_left_top_right_left_mid{
width: 100%;
height: 4%;
}
.main1_right_1{
width: 100%;
height: 20%;
box-sizing: border-box;
//border: 1px solid black;
background-color: white;
}
.main1_right_2{
width: 100%;
height: 5%;
box-sizing: border-box;
//border: 1px solid black;
background-color: lightpink;
text-align: center;
}
.main1_right_3{
width: 100%;
height: 60%;
box-sizing: border-box;
//border: 1px solid black;
background-color: white;
}
.main1_right_4{
width: 100%;
height: 15%;
box-sizing: border-box;
//border: 1px solid black;
background-color: white;
}
ul{
list-style-type: none;
display: inline;
}
.div2_mid_bottom ul li{
float: left;
width: 10%;
}
/*ul li{
width: 100px;
float: left;
}*/
a{
text-decoration: none;
}
a:link{
color: blue;
}
a:visited{
color: black;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
.reda {
color: red;
}
.nav li{
width: 12%;
float: left;
}
.nav li:nth-child(2){
list-style-image: url(img/car.png);
}
.nav li:nth-child(3){
list-style-image: url(img/sc.png);
}
.nav li:nth-child(5){
list-style-type: |;
}
.nav li:last-child{
list-style-image: url(img/dhj.png);
}
.div2_left img{
width: 100%;
height: 100%;
}
.div2_right img{
width: 100%;
height: 100%;
}
.div2_mid_top{
width: 100%;
height: 20%;
margin-top: 2%;
//background-color: red;
box-sizing: border-box;
//border: 1px solid black;
}
.div2_mid_mid{
width: 100%;
height: 40%;
//background-color: black;
}
.div2_mid_bottom{
width: 100%;
height: 20%;
//background-color: pink;
}
.div2_mid_top a:visited{
color: orangered;
}
.find{
width: 85%;
height: 100%;
margin-right: 0px;
border-top-left-radius: 5%;
border-bottom-left-radius: 5%;
}
.btn{
width: 10%;
height: 100%;
background-color: orangered;
border-bottom-right-radius: 40%;
border-top-right-radius: 40%;
}
.theam{
color: white;
font-size: 18px;
font-family: 宋体;
}
.div2_mid_bottom ul{
display: inline;
}
.div2_mid_bottom li:nth-child(3) a:visited{
color: orangered;
}
.div2_mid_bottom li:last-child{
margin-left: 40px;
}
.div3_2 ul li{
float: left;
width: 25%;
}
.div3_3 ul li{
float: left;
width: 15%;
}
.div3_4 ul li{
float: left;
width: 25%;
}
.div3_2 a:visited{
color: white;
font-size: 20px;
font-family: 宋体;
}
.div3_3 a:visited{
color: white;
font-size: 20px;
font-family: 宋体;
}
.div3_4 a:visited{
color: white;
font-size: 20px;
font-family: 宋体;
}
.main1_left_top_right_left_top img{
width: 100%;
height: 100%;
}
.main1_left_top_right_left_bottom img{
width: 100%;
height: 100%;
}
.main1_left_top_right_right_bottom img{
width: 100%;
height: 100%;
}
.main1_left_top_right_right_top img{
width: 100%;
height: 100%;
}
.main1_right_1_1{
width: 30%;
height: 28%;
margin-left: 35%;
margin-right: 35%;
//background-color: red;
}
.main1_right_1_2{
width: 100%;
height: 20%;
//background-color: yellow;
text-align: center;
}
.main1_right_1_3{
width: 70%;
height: 20%;
//background-color: deeppink;
margin-left: 20%;
margin-right: 10%;
}
.main1_right_1_4{
width: 80%;
height: 25%;
//background-color: orange;
//margin-left: 20%;
margin: auto;
}
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.main1_right_1_3 li{
list-style-image: url(img/jb.png);
}
.main1_right_1_3 li:last-child{
//margin-left: 10%;
}
.main1_right_1_3 ul li{
width: 40%;
float: left;
color: red;
}
.main1_right_1_4 input{
background-color: orangered;
height: 100%;
width: 30%;
border-radius: 15%;
}
.main1_right_4_top{
width: 100%;
height: 40%;
//background-color: red;
}
.main1_right_4_bottom{
width: 100%;
height: 60%;
//background-color: blue;
}
.main1_right_4_top_left{
float: left;
}
.main1_right_4_top_right{
float: right;
}
.t{
border: solid;
width: 100%;
height: 90%;
margin-bottom: 10%;
}
.t tr{
width: 100%;
height: 50%;
}
.t td{
width:20% ;
height: 100%;
}
.timg{
width: 100%;
height: 100%;
border-radius: 10%;
}
.main1_left_bottom_left{
width: 30%;
height: 100%;
float: left;
}
.main1_left_bottom_left img{
width: 100%;
height: 100%;
border-radius: 0px;
}
.main1_left_bottom_right{
width: 70%;
height: 100%;
float: left;
}
.main1_left_bottom_right img{
width: 100%;
height: 100%;
border-radius: 0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_left">
中国大陆
<a href="" class="reda"><font class="reda">亲，请登录</font></a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="div1_right">
<ul class="nav">
<li><a href="">我的淘宝</a></li>
<li><a href="">购物车</a></li>
<li><a href="">收藏夹</a></li>
<li><a href="">商品分类</a></li>
<li><a href="">卖家中心</a></li>
<li><a href="">联系客服</a></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<div class="div2">
<div class="div2_left">
<img src="img/taobao.png" />
</div>
<div class="div2_mid">
<div class="div2_mid_top">
<!--<ul>
<li><a href="">宝贝</a></li>
<li><a href="">天猫</a></li>
<li><a href="">店铺</a></li>
</ul>-->
<a href="">宝贝</a>
<a href="">天猫</a>
<a href="">店铺</a>
</div>
<div class="div2_mid_mid">
<input type="text" class="find"/>
<input type="button" value="搜索" class="btn" />
</div>
<div class="div2_mid_bottom">
<ul>
<li><a href="">新款连衣裙</a></li>
<li><a href="">四件套</a></li>
<li><a href="">潮流T恤</a></li>
<li><a href="">时尚女鞋</a></li>
<li><a href="">短裤</a></li>
<li><a href="">男士外套</a></li>
<li><a href="">美妆</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
</div>
<div class="div2_right">
<img src="img/phone.png" />
</div>
</div>
<div class="div3">
<div class="div3_1"><font class="theam"><b>主题市场</b></font></div>
<div class="div3_2">
<ul>
<li><a href=""><b>天猫</b></a></li>
<li><a href=""><b>聚划算</b></a></li>
<li><a href=""><b>天猫超市</b></a></li>
</ul>
</div>
<div class="div3_3">|
<ul>
<li><a href=""><b>淘抢购</b></a></li>
<li><a href=""><b>电器城</b></a></li>
<li><a href=""><b>司法拍卖</b></a></li>
<li><a href=""><b>中国制造</b></a></li>
<li><a href=""><b>兴农扶贫</b></a></li>
</ul>
</div>
<div class="div3_4">
<ul>
<li><a href=""><b>飞猪旅行</b></a></li>
<li><a href=""><b>智能生活</b></a></li>
<li><a href=""><b>苏宁易购</b></a></li>
</ul>
</div>
</div>
<div class="container">
<div class="main1">
<div class="main1_left">
<div class="main1_left_top">
<div class="main1_left_top_left"></div>
<div class="main1_left_top_right">
<div class="main1_left_top_right_left">
<div class="main1_left_top_right_left_top">
<img src="img/11.png" />
</div>
<div class="main1_left_top_right_left_mid"></div>
<div class="main1_left_top_right_left_bottom">
<img src="img/12.png" />
</div>
</div>
<div class="main1_left_top_right_right">
<div class="main1_left_top_right_left_top">
<img src="img/13.png" />
</div>
<div class="main1_left_top_right_left_mid"></div>
<div class="main1_left_top_right_left_bottom">
<img src="img/14.png" />
</div>
</div>
</div>
</div>
<div class="main1_left_bottom">
<div class="main1_left_bottom_left">
<img src="img/tt.png" />
</div>
<div class="main1_left_bottom_right">
<img src="img/hw.png" />
</div>
</div>
</div>
<div class="main1_right">
<div class="main1_right_1">
<div class="main1_right_1_1">
<img src="img/tx.png" />
</div>
<div class="main1_right_1_2">
Hi!你好
</div>
<div class="main1_right_1_3">
<ul>
<li><a href="">领淘金币抵钱</a></li>
<li><a href="">会员俱乐部</a></li>
</ul>
</div>
<div class="main1_right_1_4">
<input type="button" value="登录" />
<input type="button" value="注册" />
<input type="button" value="开店" />
</div>
</div>
<div class="main1_right_2">
网上有害信息举报专区
</div>
<div class="main1_right_3"></div>
<div class="main1_right_4">
<div class="main1_right_4_top">
<div class="main1_right_4_top_left">
<a href=""><b>阿里APP</b></a>
</div>
<div class="main1_right_4_top_right">
<a href="">更多>></a>
</div>
</div>
<div class="main1_right_4_bottom">
<table id="t">
<tr>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
</tr>
<tr>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
<td><a href=""><img src="img/taobao.png" class="timg"> </a></td>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
<td><a href=""><img src="img/taobao.png" class="timg"></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="floatdiv">爱淘宝</div>
<div class="footer"></div>
<div class="bottom"></div>
</body>
</html>
效果：
扫一扫
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
