使用与背景相关的CSS 属性，可以设置一个区域的背景颜色、背景图像。
与背景相关的CSS 属性见表6.1。
表6.1 常用的CSS 样式属性_背景
例6.1：
代码运行结果如图6.1 所示。
图6.1 例6.1 的运行结果_背景
说明(www.chuimin.cn)
网页元素的背景显示时，背景图像优先于背景颜色。background-color 属性设置为transparent 表示透明。
一般应为background-position 属性赋两个值，第一个值表示垂直方向，第二个值表示水平方向。如top left 表示顶部左侧，center right 表示中部右侧，bottom center表示底部中间。如果仅设置一个方向的位置关键字，则它表示垂直方向，而缺少的第二个水平方向默认为center。
此外，可使用两个像素值描述背景图像与容器左边界及顶边界的距离，如：50 px 100 px；也可使用百分数描述背景图像与容器左边界及顶边界的距离。
注意
此例中，网页的背景图像只在网页的底部显示，这是因为设置了从网页正文的左下角开始放置背景图像，而且只在水平方向上从左往右平铺。
当网页内容超过一屏时，向下拖动滚动条，网页的背景图像不会随着网页内容一起滚动，而是固定不动，这是因为设置了背景图像固定吸附。
提示
浏览器在解析到每个<img />标签时都需要向服务器发送请求，加载此图片。当网页中零星的小图片众多时，网页的性能将会受到影响。可使用称为css sprites（图片整合）的技术优化性能。原理是将同一个网页中使用的大量小图片整合为一张较大的图片，当页面中的某处需要显示其中某张小图片时，使用CSS 中的background-image、background-position、background-repeat 等属性，对作为背景的大图片进行定位，配合背景区域的width、height 属性限定背景的大小，从而显示需要的小图片区域。
可以在百度中查询关键字css sprit 来了解这一技术的详情。
有关基于HTML与CSS网页设计的文章
如前所述，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
图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素，这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外，还支持其他一些属性，用于设置其名称，初始值、图像地址、选中与否的状态等。表3.2标签的属性......
2023-10-19
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则，secondDiv 上浮到firstDiv 右侧。假设出于某种需要，我们希望secondDiv 仍然出现在firstDiv 的下方，就像firstDiv没有设置浮动，仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动，也就是说它的左侧不能有浮动元素，这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2023-10-19
视频教学资源学校目标理解表格的结构掌握表格相关的标签掌握单元格合并理解列表的分类掌握两种列表及列表项目的标签本章单词请在预习前完成下列单词的学习，将其写在横线上。A.width cellspacingB.cellspacing widthC.cellspacing cellpaddingD.cellpadding cellspaing2.使用（）标签为表格创建标题，使用（）标签代替
2023-10-19
A.ID 选择器B.伪类选择器C.类选择器D.HTML 标签选择器3.假设有多条样式规则由一个独立的样式文件包含，现在有一个网页要使用这个样式文件中的样式规则，应在此网页中使用（ ）标签链接这个样式文件，并设置此标签的（ ）属性的值为这个样式文件的地址。登录页面CSS 的英文全称为Cascading Style Sheet，中文译名通常是层叠样式表或级联样式表。......
2023-10-19
完成本任务所用到的主要知识点：标签标签标签问题已经制作了一个FLASH 动画，就像电视里的音乐MV 那样精致。这个动画的文件名为“gaoxyjni.swf”。分析FLASH 动画是网页中常见的多媒体类型。解决方案 新建网页文档3.html。 使用EditPlus 打开3.html 网页，在其中编写以下代码。图上机1.4弹出警告对话框单击按钮，浏览器将显示FLASH 动画，如图上机1.5 所示。图上机1.5FLASH 动画 使用chrome 浏览器测试这个网页，发现不能正常显示这个FLASH 动画。......
2023-10-19
例1.17：在网页中的显示结果如图1.19 所示。图1.19例1.17 的运行结果注意浏览器本身并不具备播放音频、视频和FLASH 动画等多媒体的能力，它需要调用本机安装的ActiveX 控件或浏览器插件才能播放。大部分浏览器识别标签，但仍有少部分浏览器只将标签视作嵌入网页的多媒体。其中object 标签的属性见表1.4。图1.22球员信息4.制作一个网页，背景颜色是“#FFD39B”，如图1.23 所示。图1.32腾讯首页其中有京东商城的通栏广告，它是嵌入在网页中的FLASH 动画。......
2023-10-19
拥有自研的世界级语法分析引擎一直是HBuilder 系列产品傲视业内的资本。但如果一个文件是单独从硬盘被打开，不是整个项目被拖入HBuilderX，那么此时无法加载框架语法库。图9.37代码助手2.编辑器与项目管理器的同步HBuilderX 默认是打开的标签卡和项目管理器自动关联，切换标签卡时项目管理器也会跟随变化。图9.39取消同步总结Dreamweaver 是被业界广泛使用的站点管理和页面制作的可视化工具。HBuilderX 工具的使用作业1.总结Dreamweaver 的各项优点。......
2023-10-19
相关推荐