ASP.NET程序设计教程7---CSS级联样式表(3)

3 页面布局
页面布局是网页设计的重要工作之一,它决定了页面中各板块的显示位置和显示方式。传统的页面布局通常采用表格布局技术,适合一些页面结构不太复杂的小型网站,其优点是布局方便、直观,缺点是显示速度较慢,需要将整个表格下载完毕才开始显示页面内容。表格布局方式也不利于“结构和表现分离”的设计理念。目前最为流行的页面布局方法是采用CSS+DIV的布局技术,这是Web标准推荐的布局方法。
(1)使用表格布局页面
早期的网页布局设计一般都采用表格进行页面布局,这种方法将整个页面规划到一个或多个表格中,在需要时也可以使用表格嵌套的方法实现页面布局。
目前虽然CSS+DIV布局技术占据了主导地位,但在一些小型环境、页面布局设计或页面元素定位中,表格布局仍有自己的一席之地。
在本课程中,不对表格布局进行讲解,需要了解的同学自行学习。
(2)DIV+CSS布局页面
使用DIV+CSS进行页面布局最大的优点是体现结构和表现分离的网页设计思想,另外,浏览器对CSS+DIV定义的页面是边解析边显示的,较表格布局的页面显示速度更快。
使用DIV+CSS进行页面布局的时候,一般分为以下三个环节。
1)页面结构分析,是根据页面所表现的内容构思和规划页面组成的过程。也就是说在设计一个网页时首先应考虑页面应包含哪些板块,这些板块应放置在页面的什么位置等。必要时可画出页面结构的设计草图。
2)页面布局,是指在页面结构确定后使用<div>标记创建需要的各板块区域。
3)样式设置,是指对所有<div>及其他页面元素的表现所进行的设置。
下面通过一个实例来介绍具体的使用方法,页面布局效果图见图1所示。

图1 页面布局效果图

从图1页面布局效果图中可以看出,该页面由6个板块组成,其中“左边”、“中间”、“右边”3个板块需要横向排成一行。设计时可以将6个板块分别放置在6个不同的层(<div>)结构中,通过分别对各层属性进行设置以实现页面布局效果。
接下来,新建一个空网站,在空网站中添加一个Web窗体,并将其命名为Default。在该页面下找到由系统自动添加的<div></div>标记,在其中再添加6对<div>标记。示例如下:

<body>
    <form id="form1" runat="server">
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    </form>
</body>

接下来创建CSS样式表,创建操作类似于添加新的Web窗体,只不过这里是创建“样式表”,创建过程如图2所示。

图2 样式表创建过程
在创建的StyleSheet.css文件中编写如下代码:
div
{
    box-sizing:border-box;   /*/
    width:100%;
    text-align: center; border: #00ff00 1px solid;        /*绿色、1像素宽、实线边框*/
}
#top
{
    width: 100%; height: 56px;
    line-height:56px; font-family:黑体; font-size:xx-large;
}
#navigation
{
    /*设置层高(height)与行高(line-heigh)相等可使单行文字垂直居中*/
    width: 100%; height: 24px; line-height:24px;
}
#left
{
    /*“float:left”表示元素向左浮动,使后续元素可跟随在该元素的右侧*/
    width: 10%; height: 104px; line-height:104px; float: left; 
}
#mid
{
    width: 80%; height: 104px; line-height:104px; float: left;
}
#right
{
    /*“clear:right”表示不允许元素的右边有浮动元素*/
    width: 10%; height: 104px; line-height:104px; float:left; clear: right;
}
#bottom
{
    /*“clear:both”表示不允许元素的左右两边有浮动元素*/
    width: 100%; height: 24px; line-height:24px; font-family:黑体; clear: both;
}

CSS+DIV布局技术中经常用到float属性和clear属性。
float属性用于确定是否允许元素在页面中浮动及浮动的方向。可以取值none(不允许元素浮动)、left(元素可以向左浮动)、right(元素可以向右浮动)。
clear属性用于设置元素的左右是否允许出现其他浮动元素。可以取值left(左边不允许出现其他浮动元素)、right(右边不允许出现其他浮动元素)、both(左右两边都不允许)、none(左右两边都允许)。
再次修改“Default.aspx”文件的代码,head和body部分修改如下:

<head runat="server">
    <title></title>
    <link href = "StyleSheet.css" rel = "Stylesheet" type = "text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="top">标题Logo栏</div>
        <div id="navigation">导航栏</div>
        <div id="left">左边</div>
        <div id="mid">中间</div>
        <div id="right">右边</div>
        <div id="bottom">页脚</div>
    </div>
    </form>
</body>

再次运行代码,运行效果如图3所示。

图3 CSS+DIV示例的实现效果图

页面元素定位
网页中元素的显示位置,在浏览器窗口大小发生变化时可能出现一些变化。为了避免元素位置变化而导致页面布局错乱,需要使用元素定位属性进行设置。页面元素定位分为流布局定位(static)、坐标绝对值定位(absolute)、坐标相对定位(relative)3种形式。
1)static定位方式使页面中的所有元素按照从左到右、从上到下的顺序显示,各元素之间不重叠。
2)absolute定位方式使元素显示在页面中的位置由style样式中的left、right、top、bottom及z-index属性值决定。
3)relative定位方式使页面元素显示在页中的位置由style样式中left、top、z-index属性值决定。与绝对定位不同,具有相同z-index属性值的元素不会重叠。
下面给出一个例程来讲解页面元素定位中不同形式的区别:

<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>绝对定位与相对定位的比较</title>
      <style type="text/css">
        #div1
        {
           margin: 0 auto;width: 257px; text-align: left; height: 185px; border: solid 1px #009999;
        }
        #div2
        {
            width: 118px; height: 34px; text-align: left; border: solid 1px #ff66cc;
        }
        #div3
        {
            position:absolute; top:76px; left: 48px; width: 200px;
            z-index: 100; height: 100px; border: solid 1px #ff0033;
        }
        #div4
        {
            top: 20px; left: 30px; position: absolute; width: 96px; height: 42px;
            border: solid 1px #3366ff;
        }
    </style>
</head>
<body style="text-align:center">
    <form id="form1" runat="server">   
        <div id="div1">div1
            <div id="div2">div2
                <div id="div3" >div3
                    <div id="div4">div4</div>
                </div>
            </div>
        </div>
    </form>
</body>

看一下运行效果如图4所示。改变浏览器的宽度,观察各个层位置的变化情况。

图4 页面元素各层相对位置显示效果的一种情况
代码讲解,层div1相对父容器body水平居中显示(margin: 0 auto),且div1未设置position属性,故无论浏览器的宽度如何变化,div1都居中显示。 div2的父容器是div1,也就是说div2是div1的一个元素,故其显示方式要相对父容器左对齐。 div3的父容器是div2,但是由于div1和div2都没有设置position属性,而div3设置了position属性(absolute),并设置了top、left、z-index属性值,导致div3的显示位置相对浏览器窗口固定不变。 div4的父容器是div3,故其所有位置设置都是相对div3而言。div4的显示位置无论浏览器窗口如何变化,始终保持在距div3顶端20px,左边框30px的位置。
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值