综合上述内容，可实现更复杂的三行三列式布局，如图8.23 所示。图8.23三行三列式布局与前一个案例中的三列式布局相比，现在增加了顶部独立的行和底部的页脚行。图8.25向左浮动注意divMain 包含的三个div 的宽度总和并不足以充满布局容器的宽度，这是因为我们打算在三个div 之间留一点间隙。图8.26设置左右两边的外边距最后我们人为地为这些div 设置高度模拟最终效果。图8.28竖排的层2.在HTML 中显示三行三列的表格，使用层给表格添加背景图片。......
2023-10-19
HTML与CSS网页设计：三列式布局方式
【摘要】：更常见的是三列式布局，具体而言就是整个页面分为左中右3 栏。按照这个思路，首先设置布局容器divLayout 使用绝对定位。添加CSS 代码如下：代码运行结果如图8.22 所示。图8.22自适应左外边距设置为202 像素是来自于4 个部分：左侧divNav 与divLayout 左边界距离10 像素；左侧divNav 宽度是180 像素；divContent 与divNav 的距离10 像素；divNav两条边框线各1 像素。
更常见的是三列式布局，具体而言就是整个页面分为左中右3 栏。HTML 代码如下：
再添加一些CSS 代码，设置边框，宽度，高度等，代码如下：
我们并没有为名为divContent 的div 设置宽度，因为期望当它与divNav 和divContent 共同占用一行时，它的宽度能自适应。
这里有个难点：如果按之前两个案例的做法是用浮动将3 个div 排成一行的话，那么就必须为中间的divContent 设置一个明确的宽度值。必须使用其他的方案。
回顾前一章提及的position 定位属性。它的默认值为static，即每个元素都位于标准文档流中，块级元素从上到下，内联元素从左到右，所有元素依次向文档的顶端流动。
如果position 属性赋值为absolute 时，将实现绝对定位。绝对定位的元素将从文档流中脱离开来，漂浮在文档正文的上方，就像图层一样。
按照这个思路，首先设置布局容器divLayout 使用绝对定位。修改CSS 代码如下：
再修改divNav 和divSide 的样式代码，设置它们也使用绝对定位，并为它们设置坐标。修改CSS 代码如下：
此时代码运行结果如图8.21 所示。
(www.chuimin.cn)
图8.21 绝对定位
代码中left，right，top 属性使用的坐标系是以这两个绝对定位的元素共有的上级容器元素divLayout 为参照，top、right、bottom、left 4 个属性值实际是指定位的元素的四个边界与容器元素的四个边界的距离。如果作为容器的元素没有设置绝对定位，那么坐标系会以文档正文区域为参照。这也是额外为divLayout 容器元素也设置绝对定位的原因。
到此已经实现了左右两栏的定位，但divContent 此时的宽度是自适应的，布局容器divLayout 整个的宽度其实都被divContent 占据了。这不符合我们的要求。
直接为divContent 设置宽度值是不行的，因为我们的目标是它能自适应剩余的宽度。
但是可以换一种思路：我们只要把它的左边界和作为它的容器的divLayou 的左边界的距离固定下来，同时两者的右边界的距离也固定下来，那么它的宽度当然就是自适应的。添加CSS 代码如下：
代码运行结果如图8.22 所示。
图8.22 自适应
左外边距设置为202 像素是来自于4 个部分：左侧divNav 与divLayout 左边界距离10 像素；左侧divNav 宽度是180 像素；divContent 与divNav 的距离10 像素；divNav两条边框线各1 像素。Margin-right 可用类似的方法计算得到。完整代码如下：
例8.11：
有关基于HTML与CSS网页设计的文章
- 详细阅读
-
基于HTML与CSS设计的两列式布局详细阅读
接下来声明名为#divNav 和#divContent 的样式规则，为两个 div 设置样式。图8.17两列式布局可以理解，由于div 是块级元素，每个块级元素独占一行，所以两个div 从上到下依次显示。图8.18使用浮动在实际应用的两栏布局中，一般要求左栏固定宽度，右栏宽度根据浏览器窗口的宽度自适应。结合之前的案例一，可以这样设计：在这两个div 的外围再包裹一个div，由后者负责实现在body 中的水平居中，它里面的两个div 仍然使用目前的做法实现分栏。......
2023-10-19
-
HTML与CSS网页设计：定位方式与坐标详细阅读
position 属性可以设置默认定位方式之外的其他3 种方式。表7.5常用的CSS 样式属性_定位以下代码演示了绝对定位。图7.10例7.7 的运行结果_定位_relative说明为position 属性赋值为relative 时，页面元素仍将处于正常的文档流中，但会相对于自己在上级元素中的初始位置进行偏移，偏移量由left、right、top、bottom 属性中的一个或两个值来确定。例7.8：代码运行结果如图7.11 所示。......
2023-10-19
-
HTML与CSS网页设计：输入标签详细阅读
图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素，这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外，还支持其他一些属性，用于设置其名称，初始值、图像地址、选中与否的状态等。表3.2标签的属性......
2023-10-19
-
清除浮动-基于HTML与CSS网页设计详细阅读
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则，secondDiv 上浮到firstDiv 右侧。假设出于某种需要，我们希望secondDiv 仍然出现在firstDiv 的下方，就像firstDiv没有设置浮动，仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动，也就是说它的左侧不能有浮动元素，这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2023-10-19
-
HTML与CSS网页设计：表格与列表详细阅读
视频教学资源学校目标理解表格的结构掌握表格相关的标签掌握单元格合并理解列表的分类掌握两种列表及列表项目的标签本章单词请在预习前完成下列单词的学习，将其写在横线上。A.width cellspacingB.cellspacing widthC.cellspacing cellpaddingD.cellpadding cellspaing2.使用（）标签为表格创建标题，使用（）标签代替
标签可以创建标题单元格。表格8.创建网页，使用表格存储你所在班级的学生成绩表，包含学号、姓名、语文、数学和外语等信息。学生成绩表9.在网页中使用有序列表显示水果名称，如下图所示。...... 2023-10-19
-
基于HTML与CSS的一列式布局设计详细阅读
一列式布局是最简单的布局方式，是所有布局的基础。下面的代码片段表明网页正文只直接包含一个div，这说明我们准备实现一列式布局，将网页的内容都放入这一列中。图8.13一列式布局代码中对border，height 属性的设置不是必需的，这样做只是为了方便观察结果。图8.15居中我们发现：不仅布局用的div 自身在body 内居中，而且它的内容也在内部居中，这不是我们想要的。图8.16使用margin 属性margin 属性用于设置四个方向的外边距。......
2023-10-19
-
CSS层叠样式表-基于HTML与CSS网页设详细阅读
A.ID 选择器B.伪类选择器C.类选择器D.HTML 标签选择器3.假设有多条样式规则由一个独立的样式文件包含，现在有一个网页要使用这个样式文件中的样式规则，应在此网页中使用（ ）标签链接这个样式文件，并设置此标签的（ ）属性的值为这个样式文件的地址。登录页面CSS 的英文全称为Cascading Style Sheet，中文译名通常是层叠样式表或级联样式表。......
2023-10-19
相关推荐