htmlcss第18章典型实例(一)

《htmlcss第18章典型实例(一)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第19章典型实例（一）实例是用在网页中经常要用到的例子来说明之前讲过的所有知识。让知识实战化，让繁琐的知识点聚集在一起，做出有趣的页面效果。19.1制作文本内容效果文本内容效果是指页面中文本内容的效果。这里将用不同的实例来编写网页中文本内容的效果。这里的实例分为两大部分，一种是用

2、列表来做出整洁有序的新闻列表。还会通过使用自定义列表来做出网站地图功能。制作有序新闻列表制作无序新闻列表制作自定义网站地图19.3制作留言版表单效果制作留言版表单效果，必须通过表单+CSS才可以做出好看的表单效果。这里将会使用两者结合来制作一个表单，不过纯粹是一个留言版的表单效果，没有任何的数据提交。19.4制作图片展示效果图片展示效果是在网站中经常被用来展示产品的。这里将通过两种方法来展示图片页面的效果。一种是用table制作图片展示效果，一种是用div+CSS制作图片展示效果。19.5制作图片滚动

3、效果图片滚动效果，是在网站应用中很常见的一种图片显示效果，可以让更多的图片展示在有限的空间里面。这里将展示图片滚动的两种方法，分别为：左右滚动和上下滚动。19.6制作文字滚动效果文字滚动效果和图片滚动效果应用在结构上是基本一样的。这里将通过两种方法，分别介绍制作左右滚动的文字效果和上下滚动的文字效果。18.7使用div、id和其他帮手div、id是制作网站的好帮手。正确地使用div、id，能编写出极其紧凑的XHTML。div可以是结构化标记的好帮手，而id则是一种令人惊讶的工具，再加上巧妙地利用CSS

4、，便可以向网站添加复杂而又精巧的行为。div是英文division的简写，有分割、区域、分组的意思。在制作网站时，使用div来对网站内容进行划分区域，是一个很好的做法。比如，当网页分割成几部分时，就变成了几个区域了，对这几个分割出来的区域用div进行控制，便可以达到很好的控制和布局。通常在使用中，设计师会用div来对页面中的内容进行样式的设置和布局。这是一个非常好用的标签。有了div，当然就少不了id和class。这二者是用来和CSS样式绑定的。在前面，也对二者进行过解说，在id和class之间的使用

5、，取决于id具有唯一性，使用id的样式，在页面里只可以出现一次，而class的样式，在页面里可以被反复使用。这二者在CSS中，有着标识的作用。但在使用中，必须考虑好要用哪种进行标识，不然就会变成之前所说的误用和滥用了。18.8语义标记和可用性在前面的内容中，已经不断地提到标记文档的语义。在实例中也可以看到语义标签+CSS的强大，比起使用

6、记的好处。而这样整洁的代码，可以在别的页面被重复使用，只需要修改或添加其中的样式即可，这样就大大提高了代码的重复使用性。在后面第19章的实例中，将会有很多使用

7、视标签的语义。又通过结构化标签来实现标签的样式，利用XHTML重构网站，使网站更加整洁，并且可用性高。在本章可以看到，几乎没有了