在CSS布局中经常使用的布局方式大值分为以下四种:
1、流体浮动布局 2、流体定位布局 3、固定浮动布局 4、固定定位布局
下面首先说下流体浮动布局;
假如我们要实现如下的布局情况:
则应该可以考虑采用流体浮动布局,其中CSS的样式如下:
#header{
border:2px solid black;
height:80px;
background:#ccc;
line-height:60px;
margin-bottom:10px;
}
#header h1{
font-size:18px;
text-align:center;
line-height:80px;
}
#nav{
border:2px solid black;
height:300px;
width:25%;
float:left;
margin-bottom:10px;
}
#nav ul{
list-style-type:none;
text-align:center;
line-height:200%;
/*
width:50px;
margin:0 auto;
*/
}
#main{
border:2px solid black;
width:46%;
height:300px;
margin-bottom:10px;
margin-left:27%;
}
#main p{
text-indent:30px;
padding-left:10px;
letter-spacing:2px;
line-height:200%;
}
#navr{
border:2px solid black;
width:25%;
height:300px;
margin-bottom:10px;
float:right;
}
#navr ul{
list-style-type:none;
line-height:200%;
text-align:center;
}
#footer{
border:2px solid black;
height:60px;
clear:both;
}
#footer p{
text-align:center;
}
在代码中使用上述CSS的样式即可实现上述要求。