HTML+CSS第18章典型实例(一)

19.1 制作文本内容效果
文本内容效果是指页面中文本内容的效果。 文本内容效果是指页面中文本内容的效果。这里将用 不同的实例来编写网页中文本内容的效果。 不同的实例来编写网页中文本内容的效果。这里的实例分 为两大部分，一种是用<table>和标签属性来制作的文本内 为两大部分，一种是用 和标签属性来制作的文本内 容效果，一种是用div+CSS来制作的文本内容效果。 来制作的文本内容效果。 容效果，一种是用 来制作的文本内容效果
北京源智天下科技有限公司
1-7
联系方式：
18.7 使用 、id和其他帮手 使用div、 和其他帮手
div、id是制作网站的好帮手。正确地使用 、id，能编写出 、 是制作网站的好帮手 正确地使用div、 ， 是制作网站的好帮手。 极其紧凑的XHTML。div可以是结构化标记的好帮手，而id则是一 可以是结构化标记的好帮手， 极其紧凑的 。 可以是结构化标记的好帮手 则是一 种令人惊讶的工具，再加上巧妙地利用CSS，便可以向网站添加 种令人惊讶的工具，再加上巧妙地利用 ， 复杂而又精巧的行为。 复杂而又精巧的行为。 div是英文 是英文division的简写，有分割、区域、分组的意思。在 的简写， 是英文 的简写 有分割、区域、分组的意思。 制作网站时，使用div来对网站内容进行划分区域 来对网站内容进行划分区域， 制作网站时，使用 来对网站内容进行划分区域，是一个很好的 做法。比如，当网页分割成几部分时，就变成了几个区域了， 做法。比如，当网页分割成几部分时，就变成了几个区域了，对这 几个分割出来的区域用div进行控制 进行控制， 几个分割出来的区域用 进行控制，便可以达到很好的控制和布 通常在使用中，设计师会用div来对页面中的内容进行样式的 局。通常在使用中，设计师会用 来对页面中的内容进行样式的 设置和布局。这是一个非常好用的标签。 设置和布局。这是一个非常好用的标签。 有了div，当然就少不了id和 有了 ，当然就少不了 和class。这二者是用来和 。这二者是用来和CSS样 样 式绑定的。在前面，也对二者进行过解说， 式绑定的。在前面，也对二者进行过解说，在id和class之间的使 和 之间的使 取决于id具有唯一性 使用id的样式 具有唯一性， 的样式， 用，取决于 具有唯一性，使用 的样式，在页面里只可以出现一 的样式， 次，而class的样式，在页面里可以被反复使用。这二者在 的样式 在页面里可以被反复使用。这二者在CSS中 中 有着标识的作用。但在使用中，必须考虑好要用哪种进行标识， ，有着标识的作用。但在使用中，必须考虑好要用哪种进行标识， 不然就会变成之前所说的误用和滥用了。 不然就会变成之前所说的误用和滥用了。
北京源智天下科技有限公司
1-10
联系方式：
性格决定命运, 性格决定命运 专注成就人生
源智天下
北京源智天） 章 典型实例（
实例是用在网页中经常要用到的例子来说明之前讲过的所 有知识。让知识实战化，让繁琐的知识点聚集在一起， 有知识。让知识实战化，让繁琐的知识点聚集在一起，做 出有趣的页面效果。 出有趣的页面效果。
北京源智天下科技有限公司
联系方式：
北京源智天下科技有限公司
1-3
联系方式：
19.3 制作留言版表单效果
制作留言版表单效果，必须通过表单 制作留言版表单效果，必须通过表单+CSS才可以 才可以 做出好看的表单效果。 做出好看的表单效果。这里将会使用两者结合来制作一 个表单，不过纯粹是一个留言版的表单效果，没有任何 个表单，不过纯粹是一个留言版的表单效果， 的数据提交。 的数据提交。
北京源智天下科技有限公司
1-6
联系方式：
19.6 制作文字滚动效果
文字滚动效果和图片滚动效果应用在结构上是基 本一样的。这里将通过两种方法， 本一样的。这里将通过两种方法，分别介绍制作左右 滚动的文字效果和上下滚动的文字效果。 滚动的文字效果和上下滚动的文字效果。
北京源智天下科技有限公司
1-4
联系方式：
19.4 制作图片展示效果
图片展示效果是在网站中经常被用来展示产品的。 图片展示效果是在网站中经常被用来展示产品的。 这里将通过两种方法来展示图片页面的效果。 这里将通过两种方法来展示图片页面的效果。一种是用 table制作图片展示效果，一种是用 制作图片展示效果， 制作图片展示效果 一种是用div+CSS制作图片展 制作图片展 示效果。 示效果。
北京源智天下科技有限公司
1-9
联系方式：
18.9 小结
本章学习了XHTML模块，通过学习，可以了解到XHTML模 模块，通过学习，可以了解到 本章学习了 模块 模 块化的原因和大致上分成的模块。这对代码的管理、 块化的原因和大致上分成的模块。这对代码的管理、规范使用都 是有很大的帮助的。 是有很大的帮助的。 本章除了学习XHTML模块，还学习了 模块， 结构化， 本章除了学习 模块 还学习了XHTML结构化，通过 结构化 对结构化的学习，可以了解到在网页制作中， 对结构化的学习，可以了解到在网页制作中，应该重视标签的语 又通过结构化标签来实现标签的样式，利用XHTML重构网 义。又通过结构化标签来实现标签的样式，利用XHTML重构网 使网站更加整洁，并且可用性高。 站，使网站更加整洁，并且可用性高。 在本章可以看到，几乎没有了<table>表格的踪影，因为使 表格的踪影， 在本章可以看到，几乎没有了 表格的踪影 重构网站， 用XHTML重构网站，就是为了摆脱以前什么都依赖于 重构网站 就是为了摆脱以前什么都依赖于<table>表 表 格的做法。在重构网站中，设计师们不再依赖表格来制作网站， 格的做法。在重构网站中，设计师们不再依赖表格来制作网站， 这是一个好的现象。不过在现在的使用中， 这是一个好的现象。不过在现在的使用中，<table>表格还是不 表格还是不 能被完全取代，因为它有着表格的语义， 能被完全取代，因为它有着表格的语义，在适当的时候还是必须 使用到<table>表格的。 表格的。 使用到 表格的
北京源智天下科技有限公司
1-5
联系方式：
19.5 制作图片滚动效果
图片滚动效果， 图片滚动效果，是在网站应用中很常 见的一种图片显示效果， 见的一种图片显示效果，可以让更多的图 片展示在有限的空间里面。 片展示在有限的空间里面。这里将展示图 片滚动的两种方法，分别为： 片滚动的两种方法，分别为：左右滚动和 上下滚动。 上下滚动。
北京源智天下科技有限公司
联系方式：
19.2 制作列表效果
列表效果是通过列表来实现的。无论是使用有序 列表效果是通过列表来实现的。 列表还是无序列表都可以制作出整洁有序的新闻列表。 列表还是无序列表都可以制作出整洁有序的新闻列表。 本节将会通过有序列表和无序列表来做出整洁有序的 新闻列表。 新闻列表。还会通过使用自定义列表来做出网站地图 功能。 功能。 • • • 制作有序新闻列表 制作无序新闻列表 制作自定义网站地图
北京源智天下科技有限公司
1-8
联系方式：
18.8 语义标记和可用性
在前面的内容中，已经不断地提到标记文档的语义。 在前面的内容中，已经不断地提到标记文档的语义。在 实例中也可以看到语义标签+CSS的强大，比起使用 的强大， 实例中也可以看到语义标签 的强大 比起使用<table> 标签，这些语义标签使用起来更为整洁和方便。在示例18.3 标签，这些语义标签使用起来更为整洁和方便。在示例 列表标签通过结构化，带来了比使用<table>标签实现 中，列表标签通过结构化，带来了比使用 标签实现 相同效果更整洁更实用的代码，这就是语义标记的好处。 相同效果更整洁更实用的代码，这就是语义标记的好处。而 这样整洁的代码，可以在别的页面被重复使用， 这样整洁的代码，可以在别的页面被重复使用，只需要修改 或添加其中的样式即可， 或添加其中的样式即可，这样就大大提高了代码的重复使用 性。 在后面第19章的实例中 将会有很多使用<table>标签 章的实例中， 在后面第 章的实例中，将会有很多使用 标签 制作的例子和语义标签+CSS的例子，通过比较，就可以明 的例子， 制作的例子和语义标签 的例子 通过比较， 白语义标记的好处和可用性了。 白语义标记的好处和可用性了。