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

本文链接：https://blog.csdn.net/weixin_43981402/article/details/97699151

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的位置。