更常见的是三列式布局，具体而言就是整个页面分为左中右3 栏。按照这个思路，首先设置布局容器divLayout 使用绝对定位。添加CSS 代码如下：代码运行结果如图8.22 所示。图8.22自适应左外边距设置为202 像素是来自于4 个部分：左侧divNav 与divLayout 左边界距离10 像素；左侧divNav 宽度是180 像素；divContent 与divNav 的距离10 像素；divNav两条边框线各1 像素。......
2023-10-19
三行三列式布局-基于HTML与CSS网页设计
【摘要】：综合上述内容，可实现更复杂的三行三列式布局，如图8.23 所示。图8.23三行三列式布局与前一个案例中的三列式布局相比，现在增加了顶部独立的行和底部的页脚行。图8.25向左浮动注意divMain 包含的三个div 的宽度总和并不足以充满布局容器的宽度，这是因为我们打算在三个div 之间留一点间隙。图8.26设置左右两边的外边距最后我们人为地为这些div 设置高度模拟最终效果。图8.28竖排的层2.在HTML 中显示三行三列的表格，使用层给表格添加背景图片。
综合上述内容，可实现更复杂的三行三列式布局，如图8.23 所示。
图8.23 三行三列式布局
与前一个案例中的三列式布局相比，现在增加了顶部独立的行和底部的页脚行。顶部行一般放置网站LOGO、网站整体的导航、用户登录和注册入口等内容；页脚行一般放置版权信息、友情链接等信息。
首先编写HTML 代码。请注意各个div 容器之间的嵌套关系。代码如下：
为避免内外边距、字号大小等属性在不同浏览器之间的默认值不同带来的困扰，我们先使用“*”通配符选择器重新定义所有HTML 标签的外边距、内边距和字号。代码如下：
接着为它们各自声明ID 选择器，先设置背景色、边框、固定的宽度等属性。代码如下：
此时代码运行结果如图8.24 所示。
图8.24 设置背景色，边框，固定的宽度
为divNav、divContent、divSide 三个div 设置向左浮动。修改代码如下：
此时代码运行结果如图8.25 所示。
图8.25 向左浮动
注意divMain 包含的三个div 的宽度总和并不足以充满布局容器的宽度，这是因为我们打算在三个div 之间留一点间隙。修改divContent 的样式代码，如下：
注意margin 属性的第二个值用于设置左右两边的外边距，此时代码运行结果如图8.26所示。
图8.26 设置左右两边的外边距
最后我们人为地为这些div 设置高度模拟最终效果。修改代码如下：
最后的运行结果如图8.27 所示。
图8.27 最终效果(www.chuimin.cn)
完整代码如下：
总结
➢float 属性用于设置元素是否浮动。浮动的元素将脱离文档流，停靠在前一个元素的侧方。
➢clear 属性用于设置元素是否清除浮动。清除浮动的元素不允许某侧或两侧出现其他浮动元素。
➢对于最外层的布局容器的水平居中，可以使用margin 属性来实现，方法是为左右外边距设置auto 值。
➢合理地使用百分比宽度值，可使元素自动适应容器的宽度。
➢使用绝对定位，配合top、right、bottom、left 等属性可以使元素的边界“锚定”在容器边界的附近。
➢合理使用margin 属性也可实现元素的定位。
作业
1.在HTML 中显示带有蓝色实线边框的两个层，让两个层在同一列，如图8.28 所示。
图8.28 竖排的层
2.在HTML 中显示三行三列的表格，使用层给表格添加背景图片。登录按钮和新用户注册按钮均使用按钮图片，如图8.29 所示。
图8.29 登录
3.在HTML 中使用层显示背景图片，使用无序列表显示导航，如图8.30 所示。
图8.30 导航
拓展练习
1.在HTML 中使用层进行布局，嵌套使用无序列表，显示行业资讯，如图8.31 所示。
图8.31 行业资讯
2.在HTML 中使用层进行布局，在同一行中的层需要设置层浮动，如图8.32 所示。
图8.32 游戏资讯
有关基于HTML与CSS网页设计的文章
- 详细阅读
-
基于HTML与CSS设计的两列式布局详细阅读
接下来声明名为#divNav 和#divContent 的样式规则，为两个 div 设置样式。图8.17两列式布局可以理解，由于div 是块级元素，每个块级元素独占一行，所以两个div 从上到下依次显示。图8.18使用浮动在实际应用的两栏布局中，一般要求左栏固定宽度，右栏宽度根据浏览器窗口的宽度自适应。结合之前的案例一，可以这样设计：在这两个div 的外围再包裹一个div，由后者负责实现在body 中的水平居中，它里面的两个div 仍然使用目前的做法实现分栏。......
2023-10-19
-
清除浮动-基于HTML与CSS网页设计详细阅读
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则，secondDiv 上浮到firstDiv 右侧。假设出于某种需要，我们希望secondDiv 仍然出现在firstDiv 的下方，就像firstDiv没有设置浮动，仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动，也就是说它的左侧不能有浮动元素，这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2023-10-19
-
CSS层叠样式表-基于HTML与CSS网页设详细阅读
A.ID 选择器B.伪类选择器C.类选择器D.HTML 标签选择器3.假设有多条样式规则由一个独立的样式文件包含，现在有一个网页要使用这个样式文件中的样式规则，应在此网页中使用（ ）标签链接这个样式文件，并设置此标签的（ ）属性的值为这个样式文件的地址。登录页面CSS 的英文全称为Cascading Style Sheet，中文译名通常是层叠样式表或级联样式表。......
2023-10-19
-
基于HTML与CSS的一列式布局设计详细阅读
一列式布局是最简单的布局方式，是所有布局的基础。下面的代码片段表明网页正文只直接包含一个div，这说明我们准备实现一列式布局，将网页的内容都放入这一列中。图8.13一列式布局代码中对border，height 属性的设置不是必需的，这样做只是为了方便观察结果。图8.15居中我们发现：不仅布局用的div 自身在body 内居中，而且它的内容也在内部居中，这不是我们想要的。图8.16使用margin 属性margin 属性用于设置四个方向的外边距。......
2023-10-19
-
基于HTML与CSS网页设计中的XHTML规详细阅读
如前所述，XHTML 是HTML 的替代者，它是从HTML 继承而来，但使用了XML 的规则进行严格规范。XHTML 与传统的HTML 的不同之处，主要来自于XML 语法规范的格式要求，即要求“格式良好”。这些要求统称为XHTML 文档的有效性。万维网联盟为XHTML 制定了3种DTD，分别适用于不同场景。过渡的：要求非常宽松的DTD，允许继续使用HTML4.01 的标签和属性，但要求格式良好。为确保XHTML 文档是有效的，应在文档第一行添加DOCTYPE即文档类型声明。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">严格的：
2023-10-19
-
FLASH动画插入网页|基于HTML与CSS详细阅读
完成本任务所用到的主要知识点：标签标签标签问题已经制作了一个FLASH 动画，就像电视里的音乐MV 那样精致。这个动画的文件名为“gaoxyjni.swf”。分析FLASH 动画是网页中常见的多媒体类型。解决方案 新建网页文档3.html。 使用EditPlus 打开3.html 网页，在其中编写以下代码。图上机1.4弹出警告对话框单击按钮，浏览器将显示FLASH 动画，如图上机1.5 所示。图上机1.5FLASH 动画 使用chrome 浏览器测试这个网页，发现不能正常显示这个FLASH 动画。......
2023-10-19
-
基于HTML与CSS网页设计|浮动效果演示详细阅读
图8.1例8.1 的运行结果_未使用浮动说明目前并没有使用浮动，4 个div 块作为块级元素在文档流中从上到下一次排列。图8.3例8.3 的运行结果_向右浮动说明secondDiv 因为浮动而脱离了正常的文档流之后，在它之后的thirdDiv 和forthDiv依次向上流动，填补了secondDiv 让出的空间，与之前的firstDiv 形成新的文档流。图8.6运行结果将secondDiv，thirdDic，forthDiv 都设置为向右浮动后的结果如图8.7 所示。......
2023-10-19
相关推荐