《网页制作基础教程》参考书籍：CSS Mastery 精通CSS书籍——高级WEB标准解决方案（人民邮电出版社）

精通CSS:高级WEB标准解决方案 前言 第4章对链接应用样式 CS1.2.3两列布局 4.1简单的链接样式 CSI.2.4单列布局 4.2让下划线更有趣 CS1.2.5隐藏不需要的列 4.3突出显示不同类型的链接 CS1.3对列进行浮动 4.4创建按钮和翻转 CS1.3.1计算 4.4.1简单的翻转 CS1.3.2将列浮动到正确的位置 4.4.2具有图像的翻转 CS1.4根据主体类突出显示当前页面 4.4.3Pixy样式的翻转 CSI.5列的drop-in框 4.5已访问链接样式 CS1.6直角和圆角一—自己决定 4.6纯CSS工具提示 CS1.6.1一般的直角 4.7小结 CS1.6.2为特殊效果做准备 第5章对列表应用样式和创建导航条 CS1.7透明的定制角和边框 5.1基本列表样式 CS1.7.1图像 5.2创建垂直导航条 5.3在导航条中突出显示当前页面 CS1.8使用类组合来确定操作目标 5.4创建水平导航条 CS1.9使用图像类和例外 简化的“滑动门”标签页式导航 CS1.9.1默认图像 5.6CSS图像映射 CS1.9.2拥有的图像 5.7远距离翻转 CSL.9.3比较大的图像 5.8对于定义列表的简短说明 CS1.10处理链接 5.9小结 CS1.10.1了解边栏链接 第6章对表单和数据表格应用样式 CS1.10.2带符号的己访问链接 6.1对数据表格应用样式 CS1.10.3突出显示外部链接 6.1.1表格特有的元素 浮动的阴影(图库) 6.1.2数据表格标记 CS1.11.1形成阴影 6.1.3对表格应用样式 CS1.11.2对图像进行浮动 6.1.4添加视觉样式 CS1.12小结 6.1.5添加其他样式 6.2简单的表单布局 实例研究2 Tuscany Luxury Resorts 6.2.1有用的表单元素 CS2.1关于这个实例研究 6.2.2基本布局 CS2.2流体布局 6.2.3其他元素 CS2.2.1主体和容器 6.2.4修饰 CS2.2.2报头 3复杂的表单布局 内容和边栏 6.3.1可访问的数据输入元素 CS2.2.4页脚 6.3.2多列复选框 CS2.2.5解决流体布局的问题 6.3.3表单反馈 CS2.3使用绝对定位刘准元素 6.4小结 CS2.3.1位置属性(top、 bottom、left、 right) 第7章布局 CS2.3.2堆放次序(z. index) 7.1让设计居中 CS2.4背景图像技术 7.1.1使用自动空白边让设计居中 CS2.4.1将上半部分分成三份 7.1.2使用定位和负值空白边让设计居中 CS2.4.2使背景“无懈可击 7.2基于浮动的布局 图像替换 7.2.1两列的浮动布局 CS2.5.1徽标图像替换 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com

精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 第 4 章对链接应用样式 4．l 简单的链接样式 4．2 让下划线更有趣 4．3 突出显示不同类型的链接 4．4 创建按钮和翻转 4．4．1 简单的翻转 4．4．2 具有图像的翻转 4．4．3 Pixy 样式的翻转 4．5 已访问链接样式 4．6 纯 CSS 工具提示 4．7 小结 第 5 章对列表应用样式和创建导航条 5．l 基本列表样式 5．2 创建垂直导航条 5．3 在导航条中突出显示当前页面 5．4 创建水平导航条 5．5 简化的“滑动门”标签页式导航 5．6 CSS 图像映射 5．7 远距离翻转 5．8 对于定义列表的简短说明 5．9 小结 第 6 章对表单和数据表格应用样式 6．1 对数据表格应用样式 6．1．1 表格特有的元素 6．1．2 数据表格标记 6．1．3 对表格应用样式 6．1．4 添加视觉样式 6．1．5 添加其他样式 6．2 简单的表单布局 6．2．1 有用的表单元素 6．2．2 基本布局 6．2．3 其他元素 6．2．4 修饰 6．3 复杂的表单布局 6．3．1 可访问的数据输入元素 6．3．2 多列复选框 6．3．3 表单反馈 6．4 小结 第 7 章布局 7．l 让设计居中 7．1．1 使用自动空白边让设计居中 7．1．2 使用定位和负值空白边让设计居中 7．2 基于浮动的布局 7．2．1 两列的浮动布局 CSl．2．3 两列布局 CSI．2．4 单列布局 CSl．2．5 隐藏不需要的列 CSl．3 对列进行浮动 CSl．3．1 计算 CSl．3．2 将列浮动到正确的位置 CSl．4 根据主体类突出显示当前页面 CSI．5 列的 drop—in 框 CSl．6 直角和圆角——自己决定 CSl．6．1 一般的直角 CSl．6．2 为特殊效果做准备 CSl．7 透明的定制角和边框 CSl．7． 1 图像 CSl．7． 2 CSS CSl．8 使用类组合来确定操作目标 CSl．9 使用图像类和例外 CSl．9． 1 默认图像 CSl．9．2 拥有的图像 CSl．9．3 比较大的图像 CSl．l0 处理链接 CSl．10．1 了解边栏链接 CSl．10．2 带符号的己访问链接 CSl．10．3 突出显示外部链接 CSl．11 浮动的阴影(图库) CSl．11．l 形成阴影 CSl．1l．2 对图像进行浮动 CSl．12 小结 实例研究 2 Tuscany Luxury Resorts CS2．1 关于这个实例研究 CS2．2 流体布局 CS2．2．1 主体和容器 CS2．2．2 报头 CS2．2．3 内容和边栏 CS2．2．4 页脚 CS2．2．5 解决流体布局的问题 CS2．3 使用绝对定位刘准元素 CS2． 3． 1 位置属性(top、bottom、1eft、right) CS2． 3． 2 堆放次序(z．index) CS2．4 背景图像技术 CS2．4．1 将上半部分分成三份 CS2．4．2 使背景“无懈可击” CS2．5 图像替换 CS2．5．1 徽标图像替换 6

精通CSS:高级WEB标准解决方案 前言 7.2.2三列的浮动布局 CS2.5.2首字母大写图像替换 3固定宽度、流体和弹性布局 CS2.6流体图像 7.3.1流体布局 CS2.7为多个元素使用一个列表项 7.3.2弹性布局 CS2.8小结 7.3.3弹性一流体混合布局 7.3.4流体和弹性图像 7.5小结 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com

精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 7．2．2 三列的浮动布局 7．3 固定宽度、流体和弹性布局 7．3．1 流体布局 7．3．2 弹性布局 7．3．3 弹性一流体混合布局 7．3．4 流体和弹性图像 7．4 faux 列 7．5 小结 CS2．5．2 首字母大写图像替换 CS2．6 流体图像 CS2．7 为多个元素使用一个列表项 CS2．8 小结 7

精通CSs:高级睏B标准解决方案 前言 CSS Mastery Advanced Web Standards Solutions 精通CSS高级W标准解决方案 Andy Budd对CSs设计的底层技术和当代方法有着深刻的理解,而且他更善于将这些知识蝇娓道来。在跨测览器支持问题 上,无人可以望其项背。 Molly E. Holzschlag,Web标准项目负责人,W3 C HTML工作组专家 Andy Budd多年来一直在编写,设计和宣传基于标准的网页设计,我们现在有幸在本书中看到他以简洁清晰的方式讲授最 重要的CSS技术。本书提供了一套网页设计人员不可或块的解决方案、技巧和经验。 Dan cederholm, Web standards soLutions的作者 ss作为Web标准的一部分,已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言,但是由于种种原 因,真正精通CSS却绝非易事。在使用CSS开发网站时,会遇到形形色色的浏览器bug和不一致问题,而解决方案又五花八 门,往往让使用者感觉千头万绪、不知从何着手。 本书将最有用的CSs技术汇总在一起,还总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,弥补了一直以 来CSS图书的空白。正因如此,英文版出版后,一时洛阳纸贵,多次重印,并迅速登上 Amazon图书排行榜前列,最高时甚至 与哈里·波特并驾齐驱,创造了计算机图书的销售奇迹 本书最后的两个实例研究将书中讨论的许多技术组合起来,使读者不仅理解工作原理,而且能够学到如何将它们应用在实际 项目中,迅速精通CSS,成为CSS专家 Andy Budd国际顶尖的网页设计师,著名的web标准倡导者。他是网页设计咨询公司 Clearest clearest cun)的创意总监,曾经组织了英国首届web20会议。他在web设计力面著述甚上,除本书外,他还曾 经撰写了一本Blog设计方面的图书 Cameron moll杰出的网页设计师,曾经设计了大量网站,赢得了世界范围内同行的尊敬他的个人网 站CameronMoll.com提供大量设计资源,深受设计界欢迎 Simoncollison杰出的网页设计师,Agcm(www.agenzia.co.uk)的首席设计师。他参与过许多艺术 类网站项目开发。他撰写的一本CSS基础教程最近刚刚出版 本书相关信息请访问:图灵网站http://www.turingbook.com 读者/作者热线:(01088590802 反馈/投稿/推荐信箱: contactuturngbook. com 上期计算机/网络开发/程序设计 ISBN 7 5316-7 Apress ISBN7-115-15316-7/TP·5722 定价:39.00元 9787115153166> 人民邮电出版社网址www.ptpress.com.cn 作者: Andy Budd、 Cameron Mool、 Simon collison 起点网络提供webttt.com

精通 CSS： 高级 WEB 标准解决方案 前言 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 作者：Andy Budd、Cameron Mool、Simon Collson 起点网络提供 webttt.com 8

精通CSS:高级WB标准解决方案 基础知识 第一章基础知识 ee eview-source:- Source of, h II MAIN C 4 AA C L EstIll <td colspan 2 width- 42 tab1 e width=·417·ce11s asecs <tr><td width-417" valig a href-"/sections/politic Example Style Guic srchttp://a4.g.akamaitec width 200 beight-150 spac The following document i a style guiden align left></a> and continuing development of the IGe <font face· geneva,ar⊥a1,h overall file structure, naming conventions <a href"/sections/politic Passing the Torch resources used in the construcion of this /a> maintain the life span dd this se. it is impe </b</font>cbr> Velopment, maintenance and updating 人类天生就是一种好奇的动物。我们都很喜欢摆弄事物。这不,最近我得到了一台新的 iMac G5,还没 看说明书呢,自己就先把它摆弄了一番。我们喜欢自己摆弄东西,对它的作用和使用方式形成自己的看法。 我们会自己胡乱设想一阵子,直到有什么东西出了错或者出乎我们的预料,才会去查阅手册。 学习CSS(层叠样式表)最好的方式之一是直接开始使用它。但是,如果不小心的话,那么就可能误解 重要的概念,或者在日后造成问题。在本章中,将讲解一些基本但常常被误解的概念,并讨论如何让(X)HTML 和CSS保持清晰且结构良好 当使用 XHTML这个术语时,指的是 Extensible Hypertext Markup language;当使用(X)HML这个术语 时,指的是ⅫHTML和HTM。 在本章中,你将学习 口文档结构良好且有意义的重要性。 口编码的最佳实践 口常见的编码错误。 口文档类型、 DOCTYPE切换和浏览器模式。 口调整样式的方式。 口层叠、特殊性和继承。 1.1设计代码的结构 大多数人不关心建筑物的地基。但是,如果没有坚固的地基,建筑物的主体也就不会存在了。虽然本书 讨论的是高级的CSS技术,但是如果没有结构良好且有效的(X)HML文档,那么我们要做的许多事情都是不 可能实现的(或者说实现起来是非常困难的) 在本节中,你将明白为什么结构良好且有意义的(XHTM文档在CSS开发中非常重要,还将学习如何在 文档中增加更多的意义,从而让自己的开发工作更轻松 1.1.1使用有意义的标记 早期的Web仅仅是一系列相互链接的研究文档,并使用HTM添加基本的格式和结构。但是,随着万维 网的流行,HML开始用来表现页面。人们使用字体和粗体标签的组合来创建所需的视觉效果,而不只是用 标题元素突出显示页面的标题。表格成了一种布局工具而不是显示数据的方式,人们使用块( block quote) 来添加空白而不是表示引用。Web很快就失去了意义,成了字体和表格标签的大杂烩(见图1-1) 互联网的一些图片,在转换的过程 可避免地存在一些文字错误,仅供大家学习时参考,请头原版书 起点网络提供webttt.com 作者: Andy bude 9

精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 第一章 基础知识 人类天生就是一种好奇的动物。我们都很喜欢摆弄事物。这不，最近我得到了一台新的 iMac G5，还没 看说明书呢，自己就先把它摆弄了一番。我们喜欢自己摆弄东西，对它的作用和使用方式形成自己的看法。 我们会自己胡乱设想一阵子，直到有什么东西出了错或者出乎我们的预料，才会去查阅手册。 学习 CSS（层叠样式表）最好的方式之一是直接开始使用它。但是，如果不小心的话，那么就可能误解 重要的概念，或者在日后造成问题。在本章中，将讲解一些基本但常常被误解的概念，并讨论如何让(X)HTML 和 CSS 保持清晰且结构良好。 当使用 XHTML 这个术语时，指的是 Extensible Hypertext Markup Language；当使用(X)HTML 这个术语 时，指的是 XHTML 和 HTML。 在本章中，你将学习： … 文档结构良好且有意义的重要性。 … 编码的最佳实践。 … 常见的编码错误。 … 文档类型、DOCTYPE 切换和浏览器模式。 … 调整样式的方式。 … 层叠、特殊性和继承。 1.1 设计代码的结构 大多数人不关心建筑物的地基。但是，如果没有坚固的地基，建筑物的主体也就不会存在了。虽然本书 讨论的是高级的 CSS 技术，但是如果没有结构良好且有效的(X)HTML 文档，那么我们要做的许多事情都是不 可能实现的（或者说实现起来是非常困难的）。 在本节中，你将明白为什么结构良好且有意义的(X)HTML 文档在 CSS 开发中非常重要，还将学习如何在 文档中增加更多的意义，从而让自己的开发工作更轻松。 1.1.1 使用有意义的标记 早期的 Web 仅仅是一系列相互链接的研究文档，并使用 HTML 添加基本的格式和结构。但是，随着万维 网的流行，HTML 开始用来表现页面。人们使用字体和粗体标签的组合来创建所需的视觉效果，而不只是用 标题元素突出显示页面的标题。表格成了一种布局工具而不是显示数据的方式，人们使用块（block quote） 来添加空白而不是表示引用。Web 很快就失去了意义，成了字体和表格标签的大杂烩（见图 1-1）。 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 9

级WB标准解决方案 基础知识 e00vew-source-sourceofhttp://web.archive.org/web/20000815052646/abcnews.ga.com/o dth=417°ce11 spacing"0·ee11p tr><td width 417 valign top <a href="sections/politics/DailyNews/DEMcVN open000813html> sret 2tp beadle- aka astec- 0 b spa46. bordeabonelt: 9 t m okdna fact page/ ss⊥ ng the Torch </b</font>> defen eace gen va ht weare yet off se end touted tht a gave capons ted vice president, Al Core, who wants to take clintons/0146;B place in thala white House full coverage and <a href atranscripte.,'9o.com/sections/politica/dailynews/demcvn_trans_clintonooo8 图1-1来自abcnews.com(2000年8月14日)的新闻头条页面的标记 它使用表格进行布局,对标题使用大的粗体字。代码缺乏结构,很难理解 HML原本是一种简单且容易理解的标记语言。但是,随着网页变得越来越复杂,代码变得几乎不可能 理解了。因此,需要使用复杂的 WYSIWYG(所见即所得)工具来处理大量的无意义标签。不幸的是,这些工 具并没有使事情简化,反而添加了它们自己的复杂标记。新千年开始以来,即使普通的网页也变得非常复杂 以至于几乎不可能进行手工编辑而不破坏代码。看起来不能这样下去了。 就在这种情况下,CSS出现了。有了CSS,就可以控制页面的外观并且将文档的表现部分与内容分隔开。 表现标签(比如字体标签)可以去掉,而且可以使用CSS而不是表格来控制布局。标记重新变得简单了,人 们又开始对底层代码感兴趣了。 意义重新回到了文档中。浏览器的默认样式可以被覆盖,所以可以将某些内容标为标题,而不需要为它 指定大的、加粗的、难看的字体。可以创建列表,而这些列表不一定显示为一系列带黑点的列表项,可以使 用没有相关联样式的块引用。开发人员开始按照(X)HML元素的原义使用它们,无需去管它们的外观(见图 leee view-source:-sourceof:http://abenews.go.com ide" main atory"c1ss” clearthin°> rnational/wirestory?id"><img width"126 id-"BAG12007171046.peg height".ernational/BAG12007171046 ipeg srcehtt abcnews. com/images caiv id-=ain headline"> h2 class"replace"> ref-"/International/wirestory ?id-947057">Iraq Bomb Toll Grows: New ckn kill 22</a> a fiery </d⊥v E 图1-2今年早些时候从abcnews.com获得的新闻头条页面的标记。 它具有良好的结构,容易理解。虽然它仍然包含一些表现标记,但是与图1-1中的代码相比有了显著的 改进。 有意义的标记为开发人员提供了几个重要的好处。与表现性的页面相比,有意义的页面更容易处理。例 如,假设需要修改页面中的一个引用。如果这个引用加上了正确的标记,那么很容易搜索代码,找到第一个 互联网的一些图片,在转换的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请购买原版书。 起点网络提供webttt.com 作者: Andy bude

精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 图 1-1 来自 abcnews.com（2000 年 8 月 14 日）的新闻头条页面的标记。 它使用表格进行布局，对标题使用大的粗体字。代码缺乏结构，很难理解 HTML 原本是一种简单且容易理解的标记语言。但是，随着网页变得越来越复杂，代码变得几乎不可能 理解了。因此，需要使用复杂的 WYSIWYG（所见即所得）工具来处理大量的无意义标签。不幸的是，这些工 具并没有使事情简化，反而添加了它们自己的复杂标记。新千年开始以来，即使普通的网页也变得非常复杂， 以至于几乎不可能进行手工编辑而不破坏代码。看起来不能这样下去了。 就在这种情况下，CSS 出现了。有了 CSS，就可以控制页面的外观并且将文档的表现部分与内容分隔开。 表现标签（比如字体标签）可以去掉，而且可以使用 CSS 而不是表格来控制布局。标记重新变得简单了，人 们又开始对底层代码感兴趣了。 意义重新回到了文档中。浏览器的默认样式可以被覆盖，所以可以将某些内容标为标题，而不需要为它 指定大的、加粗的、难看的字体。可以创建列表，而这些列表不一定显示为一系列带黑点的列表项，可以使 用没有相关联样式的块引用。开发人员开始按照(X)HTML 元素的原义使用它们，无需去管它们的外观（见图 1-2）。 图 1-2 今年早些时候从 abcnews.com 获得的新闻头条页面的标记。 它具有良好的结构，容易理解。虽然它仍然包含一些表现标记，但是与图 1-1 中的代码相比有了显著的 改进。 有意义的标记为开发人员提供了几个重要的好处。与表现性的页面相比，有意义的页面更容易处理。例 如，假设需要修改页面中的一个引用。如果这个引用加上了正确的标记，那么很容易搜索代码，找到第一个 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 10