使用CSS+DIV布局页面

来源：互联网发布：淘宝宜家代购编辑：程序博客网时间：2024/05/02 00:51

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>

然后就完成了该实例，这里只是布局方法介绍，实际的参数根据需要取值。

0 0