我的书签
添加书签
移除书签13.2 DIV+CSS布局网页基础
DIV+CSS是现在最流行的一种网页布局格式，以前常用布局表格来布局，而现在一些比较知名的网页设计全部采用DIV+CSS来排版布局。DIV+CSS的优点在于可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比布局表格强得多。
13.2.1 认识DIV
DIV是XHTML的一个标记，DIV在使用时以<div></div>的形式出现。DIV本身就是容器性质的，不但可以内嵌table，还可以内嵌文本和其他的HTML代码。DIV用来为HTML文档内大块的内容提供结构和背景，DIV的起始标记和结束标记之间的所有内容都是用来构成这个块的。其中所包含元素的特性由DIV标记的属性来控制，或是通过使用样式表格式化这个块来进行控制。
DIV是CSS布局方式的核心对象，做一个简单的布局只需要依赖DIV与CSS，因此也称CSS布局为DIV+CSS布局。
13.2.2 一列固定宽度
一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定的像素。下面举例说明一列固定宽度的布局方法，具体步骤如下：
1 在HTML文档的<head>与</head>之间相应的位置输入定义的CSS样式代码，如下所示。
提示
使用background-color:#ffcc33；将div设定为黄色背景，并使用border:3px solid #ff3399；对div设置了粉红色的3像素宽的边框，使用width:500px；设置宽度为500像素，使用height:350px；设置高度为350像素。
2 在HTML文档的<body>></body>之间的正文中输入以下代码，对div使用layer作为id名称。
3 在浏览器中预览，由于是固定宽度，无论怎样改变浏览器窗口的大小，div的宽度都不改变，如图13.1和图13.2所示。
图13.1 浏览器窗口变大效果
图13.2 浏览器窗口变小效果
页面整体居中是网页设计中常见的形式，一列居中布局在实际应用中常常用于网站大框架的建立。如图13.3所示的网站就采用了一列居中布局，将网站整体锁定在浏览器的正中间。
图13.3 网站外部大框架采用一列居中布局
13.2.3 一列自适应
自适应布局是网页设计中常见的一种布局形式，自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。下面是一列自适应布局的CSS代码。
这里将宽度和高度值都设置为80%，从浏览效果可以看到，div的宽度已经变为浏览器宽度的80%。当扩大或缩小浏览器窗口大小时，其宽度和高度还将维持在浏览器当前宽度比例的80%，如图13.4所示。
图13.4 一列自适应布局
自适应布局是比较常见的网页布局方式，如图13.5所示的网页就采用自适应布局。
图13.5 自适应布局
13.2.4 两列固定宽度
两列固定宽度布局非常简单，两列的布局需要用到两个div，分别将两个div的id设置为left与right，表示两个div的名称。首先为它们设置宽度，然后让两个div在水平线中并排显示，从而形成两列式布局，具体步骤如下。
1 在HTML文档的<head>与</head>之间相应的位置输入定义的CSS样式代码，如下所示。
提示
left与right两个div的代码与前面类似，两个div使用相同的宽度实现两列式布局。float属性是CSS布局中非常重要的属性，用于控制对象的浮动布局方式，大部分div布局基本上都通过float的控制来实现。
2 在HTML文档的<body>与</body>之间的正文中输入以下代码，对div使用left和right作为id名称。
3 在浏览器中预览。图13.6所示为两列固定宽度布局。
如图13.7所示的两列宽度固定布局，右边块固定大小；左边块也固定大小。
图13.6 两列固定宽度布局
图13.7 两列宽度固定布局网页
13.2.5 两列宽度自适应
下面使用两列宽度自适应布局实现左右栏宽度能够做到自动适应，设置自适应主要通过宽度的百分比值控制。此时将13.2.4节中第一步的CSS代码修改如下。
这里主要修改了左栏宽度为65%，右栏宽度为25%。在浏览器中预览，效果如图13.8和图13.9所示，无论怎样改变浏览器窗口的大小，左右两栏的宽度与浏览器窗口的百分比都不改变。
图13.8 浏览器窗口变小效果
图13.9 浏览器窗口变大效果
13.2.6 两列右列宽度自适应
在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中只需要设置左栏的宽度即可。如上例中左右栏都采用百分比实现宽度自适应，这里只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动，CSS样式代码如下：
这样，左栏设置为200像素的宽度，而右栏将根据浏览器窗口大小自动适应，如图13.10和图13.11所示。
图13.10 右列宽度
图13.11 右列宽度
如图13.12所示的网页是两列宽度自适应布局，左侧固定宽度；右侧可以根据浏览器窗口大小自动适应。
图13.12 两列宽度自适应布局
