![](https://i-blog.csdnimg.cn/blog_migrate/c7b2f2fcb0c66acd6c8deacf9478c2e4.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一行两列式</title>
<style type="text/css">
body,ul{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.container{
width:1000px;
height:1500px;
/*border:2px solid red;*/
margin:30px auto 0px;
}
/*.column2{
border:2px solid black;
}*/
.column2 .column2-1{
width:700px;
height:300px;
background-color:red;
float:left;
}
.column2 .column2-2{
width:280px;
height:300px;
background-color:yellow;
float:right;
}
.clear{
clear:both;
}
.column3{
/*border:2px solid blue;*/
margin-top:20px;
}
.column3 .column3-1{
width:200px;
height:300px;
background-color:aqua;
float:left;
}
.column3 .column3-2{
width:400px;
height:300px;
background-color:coral;
float:left;
margin-left:20px;
}
.column3 .column3-3{
width:360px;
height:300px;
background-color:blueviolet;
float:right;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
.column-n{
/*border:2px solid blue;*/
margin-top:20px;
}
/*.column-n ul{
background-color:blue;
}*/
.column-n ul li{
/*border:1px solid red;*/
width:190px;
height:200px;
float:left;
margin:5px;
background-color:aquamarine;
}
</style>
</head>
<body>
<div class="container">
<div class="column2">
<div class="column2-1"></div>
<div class="column2-2"></div>
<div class="clear"></div>
</div>
<div class="column3 clearfix">
<div class="column3-1"></div>
<div class="column3-2"></div>
<div class="column3-3"></div>
</div>
<div class="column-n">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/99379824890f6116a359d9750cf00f17.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纵向列表</title>
<style type="text/css">
body {
font-family: Verdana;
font-size: 12px;
line-height: 1.5;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
color:#F00;
}
.menu{
width:100px;
border: 1px solid #CCC;
}
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu ul li{
background:#eee;
padding:0px 8px;
height:26px;
line-height:26px;
border-bottom:1px solid #CCC;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版式布局</a></li>
<li><a href="#">div+class实例</a></li>
<li><a href="#">div+class教程</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>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/079d69ac90b51152196cbc738c3d1a71.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横向列表</title>
<style type="text/css">
body{
font-family: Verdana;
font-size: 12px;
line-height: 1.5;
}
a{
color:#000;
text-decoration:none;
}
a:hover{
color:#F00;
}
.menu{
width:500px;
height:28px;
margin:0 auto;
border-bottom:3px solid #E10001;
}
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu ul li{
float:left;
margin-left:2px;
}
.menu ul li a{
display:block;
width:87px;
height:28px;
line-height:28px;
text-align:center;
background:url(images/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat;
font-size:14px;
}
.menu ul li a:hover{
background:url(images/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;
}
.menu ul li a#current{
background:url(images/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat;
font-weight:bold;
color:#fff;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a></li>
<li><a href="#">web教程</a></li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/eb2a21c7351d262456c2db4b8644f43e.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标准布局</title>
<style type="text/css">
body {
margin:0 auto;
font-size:12px;
font-family:Verdana;
line-height:1.5;
}
#header{
width:500px;
height:20px;
background-color:aquamarine;
border:2px solid black;
margin:30px auto 0px;
padding:20px;
line-height:2px;
}
#nav{
width:530px;
height:20px;
background-color:aquamarine;
border:2px solid black;
margin:10px auto 0px;
padding:5px;
}
#body{
width:540px;
height:400px;
background-color:aquamarine;
border:2px solid black;
margin:10px auto 0px;
}
.main{
width:300px;
height:350px;
background-color:yellow;
border:2px solid black;
margin:20px 5px 20px 20px;
float:left;
}
.side{
width:180px;
height:350px;
background-color:chocolate;
border:2px solid black;
margin:20px 20px 20px 5px;
float:left;
}
#footer{
width:500px;
height:20px;
background-color:aquamarine;
border:2px solid black;
margin:20px auto 0px;
padding:20px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="body">
<div class="main">main</div>
<div class="side">side</div>
</div>
<div id="footer">footer</div>
</body>
</html>