使用CSS+DIV布局页面

最新推荐文章于 2021-10-16 09:49:03 发布

VIProgram

最新推荐文章于 2021-10-16 09:49:03 发布

阅读量1.1k

点赞数 1

分类专栏： Asp.Net 文章标签：页面布局

本文链接：https://blog.csdn.net/VIProgram/article/details/51076143

版权

Asp.Net 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

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