第13章 Web标准与CSS网页布局实例

1、第12章讲述了CSS的基本语法，CSS可以控制字体大小、设置字体样式，目前更多地应用在网页布局上。本章将通过实例讲述CSS布局网页中的元素的方法。本章以CSS布局为重点，探讨CSS布局的入门知识和布局网页元素的实例技巧。表单标记插入表单对象 菜单和列表 文本域标记 id标记 Web标准是网站开发中一系列标准的集合，包括XHTML、XML、CSS、DOM和ECMAScript等。制定这些标准是为了便于维护，代码更简洁，降低带宽的运行成本，更容易被搜索引擎搜索到，改版方便，不需要变动页面内容，提高网站易用性等。Web标准是由W3C和其他标准化组织制定的一套规范集合，Web标准的目的在于创建一个统一

2、的用于Web表现层的技术标准，以便通过不同的浏览器或终端设备向最终用户展示信息内容。Web标准由一系列规范组成，目前的Web标准主要由三大部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离 。13.1.1 13.1.1 什么是什么是WebWeb标标准准掌握基于CSS的网页布局方式，是实现Web标准的基础。在制作主页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和

3、格式。13.1.2 13.1.2 C CSSSS布局的优势布局的优势DIV+CSS是现在最流行的一种网页布局格式，以前常用布局表格来布局，而现在一些比较知名的网页设计全部采用DIV+CSS来排版布局。DIV+CSS的优点在于可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比布局表格强得多。DIV是XHTML的一个标记，DIV在使用时以的形式出现。DIV本身就是容器性质的，不但可以内嵌table，还可以内嵌文本和其他的HTML代码。DIV用来为HTML文档内大块的内容提供结构和背景，DIV的起始标记和结束标记之间的所有内容都是用来构成这个块

4、的。其中所包含元素的特性由DIV标记的属性来控制，或是通过使用样式表格式化这个块来进行控制。DIV是CSS布局方式的核心对象，做一个简单的布局只需要依赖DIV与CSS，因此也称CSS布局为DIVCSS布局。13.2.1 13.2.1 认识认识D DIVIV13.2.2 13.2.2 一列固定宽度一列固定宽度一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定的像素。下面举例说明一列固定宽度的布局方法。自适应布局是网页设计中常见的一种布局形式，自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显

5、示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。下面是一列自适应布局的CSS代码。13.2.3 13.2.3 一列自适应一列自适应13.2.4 13.2.4 两列固定宽度两列固定宽度两列固定宽度布局非常简单，两列的布局需要用到两个div，分别将两个div的id设置为left与right，表示两个div的名称。首先为它们设置宽度，然后让两个div在水平线中并排显示，从而形成两列式布局。13.2.5 13.2.5 两列宽度自适应两列宽度自适应下面使用两列宽度自适应布局实现左右栏宽度能够做到自动适应，设置自适应主要通过宽度的百分比值控制。13.2.6 13.2.6 两列右列宽度自

6、适应两列右列宽度自适应在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中只需要设置左栏的宽度即可。如上例中左右栏都采用百分比实现宽度自适应，这里只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动。 网站导航是网站中最重要的元素，是网站提供给浏览者最直接、最方便的访问网站内容的工具。总的来说导航的核心目标是设计一个简单快捷的操作入口，帮助浏览者快速找到网站中的内容，设计时应当根据网站类型及内容的需求设计合理的导航形式。这里将使用CSS对常用的三种导航形式进行设计，看看CSS是如何实现这些样式的。13.3.1 13.3.1 实现背景变换的导航菜单实现背

7、景变换的导航菜单导航也是一种列表，每个列表数据就是导航中的一个导航频道，使用ul元素以及li元素以及CSS样式可以实现背景变换的导航菜单。13.3.2 13.3.2 利用利用CSSCSS制作横向导航制作横向导航利用CSS制作横向导航的具体操作步骤介绍如下 。表单是交互式网页中经常用到的元素。在网站中，表单是实现网页中数据传输的基础，其作用就是能实现访问者与网站之间的交互功能。利用表单，可以根据访问者输入的信息，自动生成页面反馈给访问者。默认的表单对象外观都是非常简单的，利用CSS样式可以美化表单对象。13.4 使用使用CSSCSS设计表单样式设计表单样式13.4.1 13.4.1 改变按钮的背

8、景颜色和文字颜色改变按钮的背景颜色和文字颜色按钮是表单中必不可少的对象，使用按钮可以将输入到表单中的数据提交给服务器或者重置该表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。13.4.2 13.4.2 设置文本框的样式设置文本框的样式文本框是表单对象中最常见的元素，默认的文本框样式在浏览器中不太美观，下面使用CSS样式改变文本框样式，具体操作步骤如下。13.4.3 13.4.3 设计文本框中的文字样式设计文本框中的文字样式利用在input标记内直接插入内嵌样式“style=font-family:宋书;font-size:12px”，可以改变文本框中的文字样式，具体操作步骤如下 。文本

9、是网页中最简单，也是最基本的部分，无论当前的网页多么绚丽多彩，其中占多数的还是文本。在网页中文字的设计要醒目、清晰，文字的排版与组合要便于阅读。13.5 字体及段落样式设计13.5.1 13.5.1 利用利用CSSCSS控制字体大小和行距控制字体大小和行距CSS提供了包括字体、字号、颜色等多种字体样式，下面设置利用font-size控制字体大小、利用line-height控制行距，具体操作步骤如下 。13.5.2 13.5.2 制作光晕文字效果制作光晕文字效果利用Glow滤镜可以使目标对象产生边缘光晕的模糊效果，下面制作光晕文字效果，具体操作步骤如下。图片是文本的解释和说明，在网页中适当的位置

10、放置一些图片，不仅可以使文本更加容易阅读，而且可使网页更具有吸引力。下面就利用CSS制作一些网页特效。13.6 使用CSS设计图片样式13.6.1 13.6.1 鼠标指针移上时图片渐变的效果鼠标指针移上时图片渐变的效果下面利用alpha滤镜设置图像的透明度，来制作鼠标指针移上时图片渐变的效果，具体操作步骤如下。13.6.2 13.6.2 设计不重复出现的背景设计不重复出现的背景利用background-repeat可以设置背景图像是否平铺，还可以设计不重复出现的背景，具体操作步骤如下。整个网站都是由超链接连接而成的，下面讲述利用CSS控制超链接样式的方法。13.7 使用CSS控制链接样式13.7.1 13.7.1 使用使用CSSCSS实现鼠标指针形状改变实现鼠标指针形状改变用CSS实现改变鼠标指针形状的具体操作步骤如下。13.7.2 13.7.2 鼠标指针移到链接文字上时改变文字鼠标指针移到链接文字上时改变文字大小或颜色大小或颜色用CSS实现鼠标指针移到链接文字上时改变文字大小或颜色的具体操作步骤如下 。13.8经典习题1. 1. 填空题填空题（1）Web标准由一系列规范组成，目前的Web标准主要由三大部分组成：_、_、_。