CSS+DIV是目前最为流行的页面布局技术,这里通过一个实例介绍其具体的使用方法。
下图是效果图:
下面是具体实现步骤:
1.创建6对<div>标记
2.创建css样式表,具体代码如下:
.alldiv
{
width:762px;
text-align:center ;border:#000000 1px solid;/*黑色、1像素宽、实线边框*/
}
#top
{
width:100%;height:56px;
line-height :56px;font-family:黑体;font-size:xx-large ;
}
#navigation
{
/*设置层高(height)与行高(line-height)相等可使单行文字垂直居中*/
width:100%;height:24px;line-height:24px;
}
#left
{
/*"float:left"表示元素向左浮动,使后续元素可跟随在该元素的右侧*/
width:100px;height:104px;line-height:104px;float:left ;
}
#middle
{
width:556px;height:104px;line-height:104px;float:left ;
}
#right
{
/*"clear:right"表示不允许元素的右边有浮动元素*/
width:100px;height:104px;line-height:104px;float:left ; clear:right ;
}
#bottom
{
/*"clear:both"表示不允许元素的左右两边有浮动元素*/
width:100%;height:24px;line-height:24px;font-family:黑体;clear:both ;
}
3.编写aspx代码中代码
<body>
<form id="form1" runat="server">
<div class ="alldiv">
<div id="top" class="alldiv">标题Logo栏</div>
<div id="navigation" class="alldiv">导航栏</div>
<div id="left" class="alldiv">左边</div>
<div id="middle" class="alldiv">中间</div>
<div id="right" class="alldiv">右边</div>
<div id="bottom" class="alldiv">页脚</div>
</div>
</form>
</body>
然后就完成了该实例,这里只是布局方法介绍,实际的参数根据需要取值。