图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素，这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外，还支持其他一些属性，用于设置其名称，初始值、图像地址、选中与否的状态等。表3.2标签的属性......
2025-09-30
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 所示。
(https://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网页设计详细阅读
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则，secondDiv 上浮到firstDiv 右侧。假设出于某种需要，我们希望secondDiv 仍然出现在firstDiv 的下方，就像firstDiv没有设置浮动，仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动，也就是说它的左侧不能有浮动元素，这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2025-09-30
-
基于HTML与CSS网页设计|浮动效果演示详细阅读
图8.1例8.1 的运行结果_未使用浮动说明目前并没有使用浮动，4 个div 块作为块级元素在文档流中从上到下一次排列。图8.3例8.3 的运行结果_向右浮动说明secondDiv 因为浮动而脱离了正常的文档流之后，在它之后的thirdDiv 和forthDiv依次向上流动，填补了secondDiv 让出的空间，与之前的firstDiv 形成新的文档流。图8.6运行结果将secondDiv，thirdDic，forthDiv 都设置为向右浮动后的结果如图8.7 所示。......
2025-09-30
-
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.在网页中使用锚标记显示各种不同的水果。水果列表水果描述......
2025-09-30
-
HTML与CSS网页设计：表格与列表详细阅读
视频教学资源学校目标理解表格的结构掌握表格相关的标签掌握单元格合并理解列表的分类掌握两种列表及列表项目的标签本章单词请在预习前完成下列单词的学习，将其写在横线上。A.width cellspacingB.cellspacing widthC.cellspacing cellpaddingD.cellpadding cellspaing2.使用（）标签为表格创建标题，使用（）标签代替
标签可以创建标题单元格。表格8.创建网页，使用表格存储你所在班级的学生成绩表，包含学号、姓名、语文、数学和外语等信息。学生成绩表9.在网页中使用有序列表显示水果名称，如下图所示。...... 2025-09-30
-
HTML与CSS网页设计中的背景设置详细阅读
使用与背景相关的CSS 属性，可以设置一个区域的背景颜色、背景图像。与背景相关的CSS 属性见表6.1。表6.1常用的CSS 样式属性_背景例6.1：代码运行结果如图6.1 所示。图6.1例6.1 的运行结果_背景说明网页元素的背景显示时，背景图像优先于背景颜色。......
2025-09-30
-
基于HTML与CSS，轻松学习网页设计详细阅读
HTML是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言。HTML 语言由蒂姆·伯纳斯·李给出原始定义，IETF用简化的SGML语法进行进一步发展，后来成为国际标准，目前由万维网联盟维护。使用XML 的严格规则的XHTML是W3C 计划中的HTML 的接替者。注意W3C 目前的建议是使用XHTML 1.1、XHTML 1.0 或HTML 4.01 进行网络出版。HTML 语法的核心是由W3C 定义的一些标记。图1.1例1.1 的运行结果说明HTML 文件中的第一个标签是 。这个标签告诉浏览器，这是 HTML 文件的结束点。......
2025-09-30
-
HTML与CSS网页设计：框架集与框架示例详细阅读
图4.1框架集框架示例_猫扑大杂烩浏览者在浏览器窗口中所看到的画面，实际上是由多个页面一起形成的。图4.2框架集框架示例_华声论坛窗口左侧的导航区内显示众多版块分类的链接，它们可将用户导航到某个版块的帖子列表页面；窗口右侧的内容区则显示最热帖子或编辑推荐帖子等论坛的全局信息。当需要将多个网页组织到同一个窗口中同时显示时，需要使用框架集和框架。......
2025-09-30
相关推荐