简单网页布局
布局预览：
代码如下：
<html>
<head>
<title></title>
<style type="text/css">
body{
padding:0px;
margin-top:2px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
text-align:center;
}
#wrap{
width:800px;
padding:0px;
margin-right:auto;
margin-left:auto;
border:1px solid #000000;
background-color:#CCCCCC;
}
#top{
width:100%;
height:100px;
background-color:#99CC00;
border-bottom-width:1px;
border-bottom-style:dashed;
border-bottom-color:#000000;
}
#bottom{
width:100%;
height:100px;
background-color:red;
clear:both;
}
#left{
float:left;
width:150px;
height:400px;
background-color:#996600;
margin:0px;
padding:0px;
}
#right{
float:right;
width:150px;
height:400px;
background-color:#999999;
margin:0px;
padding:0px;
}
#center{
padding:0px;
width:auto;
margin-right:1px;
margin-left:1px;
background-color:#FFFFFF;
height:400px;
}
#main{
width:100%;
height:200px;
margin:0px;
padding:0px;
background-color:#9999FF;
}
#main1{
padding:0px;
height:198px;
width:100%;
margin-top:2px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
background-color:#FFFFFF;
}
#child1{
float:left;
padding:0px;
height:180px;
width:48%;
background-color:#66CCCC;
margin-top:5px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
#left ul{
margin:0px;
padding:0px;
}
#child2{
float:right;
width:48%;
padding:0px;
background-color:black;
height:180px;
margin-top:5px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
font-size:30px
}
#left li{
padding:0px;
width:120px;
margin-top:5px;
margin-right:0px;
margin-bottom:0px;
margin-left:10px;
border:1px solid #000000;
background-color:#FFFFFF;
line-height:25px;
list-style-type:none;
}
#right ul{
margin:0px;
padding:0px;
}
#right li{
background-color:#CC9900;
height:35px;
width:130px;
padding:0px;
margin-top:5px;
margin-right:0px;
margin-bottom:0px;
margin-left:5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top"></div>
<div id="left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="center">
<div id="main"></div>
<div id="main1">
<div id="child1"></div>
<div id="child2">rtrtrtr</div>
</div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/yueyue_jwfm/archive/2009/12/01/1614906.html