一列式布局是最简单的布局方式，是所有布局的基础。下面的代码片段表明网页正文只直接包含一个div，这说明我们准备实现一列式布局，将网页的内容都放入这一列中。图8.13一列式布局代码中对border，height 属性的设置不是必需的，这样做只是为了方便观察结果。图8.15居中我们发现：不仅布局用的div 自身在body 内居中，而且它的内容也在内部居中，这不是我们想要的。图8.16使用margin 属性margin 属性用于设置四个方向的外边距。......
2023-10-19
基于HTML与CSS设计的两列式布局
【摘要】：接下来声明名为#divNav 和#divContent 的样式规则，为两个 div 设置样式。图8.17两列式布局可以理解，由于div 是块级元素，每个块级元素独占一行，所以两个div 从上到下依次显示。图8.18使用浮动在实际应用的两栏布局中，一般要求左栏固定宽度，右栏宽度根据浏览器窗口的宽度自适应。结合之前的案例一，可以这样设计：在这两个div 的外围再包裹一个div，由后者负责实现在body 中的水平居中，它里面的两个div 仍然使用目前的做法实现分栏。
两列式布局适合于左侧侧导航区右侧主内容区的页面结构。
下面的代码片段表明网页正文直接包含两个div，第一个div 用作导航栏的容器，显示在页面左侧，第二个div 用作主内容区的容器，显示在页面右侧。
接下来声明名为#divNav 和#divContent 的样式规则，为两个 div 设置样式。
此时代码运行结果如图8.17 所示。
图8.17 两列式布局
可以理解，由于div 是块级元素，每个块级元素独占一行，所以两个div 从上到下依次显示。如上所述，使用浮动可使元素脱离文档流向上方漂浮。修改样式代码。
此时代码运行结果如图8.18 所示。
图8.18 使用浮动
在实际应用的两栏布局中，一般要求左栏固定宽度，右栏宽度根据浏览器窗口的宽度（实际是作为两个div 共同容器的页面正文body 的宽度）自适应。只要将左栏宽度设置为固定的像素值，右栏不设置宽度，也不浮动，即可实现这一要求。修改样式代码如下：
此时代码运行结果如图8.19 所示。
(www.chuimin.cn)
图8.19 左栏固定宽度
尝试改变浏览器窗口的宽度时，左栏宽度保持不变，右栏的宽度随之一起变化。
我们注意到右列的宽度是自由伸展的，所以两列的宽度之和正好为文档正文区域的 宽度。
但有时候，我们为网页准备的内容并不足以占用浏览器窗口的全部宽度。换句话说：希望网页分为左栏和右栏这两列，而且是固定的宽度，但它们作为一个整体在浏览器窗口中水平居中，左右两侧仍有一定宽度的留白。
结合之前的案例一，可以这样设计：在这两个div 的外围再包裹一个div，由后者负责实现在body 中的水平居中，它里面的两个div 仍然使用目前的做法实现分栏。修改HTML 代码如下：
修改CSS 代码如下：
此时代码运行结果如图8.20 所示。
图8.20 分栏居中显示
注意右栏的宽度是自适应的，即为它的容器divLayout 的宽度与左栏的固定宽度值之差。
完整代码如下：
例8.10：
有关基于HTML与CSS网页设计的文章
- 详细阅读
-
三行三列式布局-基于HTML与CSS网页设计详细阅读
综合上述内容，可实现更复杂的三行三列式布局，如图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 像素。......
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网页设计中的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
-
HTML概述与基本标签：基于HTML与CSS详细阅读
视频教学资源学校目标了解WEB 和HTML 的关系理解HTML 标签在WEB 网页中的作用掌握HTML 文档的结构掌握常用的HTML 标签本章单词请在预习前完成下列单词的学习，将其写在横线上。嵌入）_______________________________________预习任务1.网页的标题标签应放置在（）标签内部。A.srcB.nameC.urlD.href3.用于描述网页大纲级别的标题标签共有（）种。A.url textB.link alterC.href textD.src alt5.HTML 语言中，某些标签只需要开始部分，可以不要结束部分，以下（）组属于这种情况。超链接10.在网页中使用锚标记显示各种不同的水果。水果列表水果描述......
2023-10-19
-
常用的CSS属性-基于HTML与CSS网页设详细阅读
A.上、下、左、右B.左、底、右、顶C.顶、右、底、左D.顶、左、底、右3.CSS 属性text-decoration 可以设置为以下（ ）一组值。A.none、justfy、left、rightB.none、left、center、rightC.none、underline、overline、line-throughD.none、capitalize 、uppercase、lowercase4.以下有关字体的CSS 属性的说法，错误的是（ ）。A.list-style-type、list-style-position、list-style-imageB.list-style-position、list-style-type、list-style-imageC.list-style-image、list-style-position、list-style-typeD.list-style-type、list-style-image、list-style-position6.创建一个HTML 页面，在其中编写CSS 样式代码。设置了背景颜色的页面7.在HTML 中使用无序列表显示商品信息，在其中编写CSS 样式代码。商品列表本章将详细介绍常用的CSS 样式属性。......
2023-10-19
相关推荐