第1部分 Web标准<br><br>第1章 Web标准概述 2<br>1.1 Web标准概述 3<br>1.2 表现与结构的分离 3<br>1.3 易用性 4<br>1.4 难点所在 5<br>1.4.1 DIV+CSS不等于Web标准 5<br>1.4.2 正确使用XHTML标签 5<br>1.4.3 表格本身并没有被抛弃 6<br>1.4.4 善于利用CSS 6<br>1.4.5 不要滥用class 6<br>1.4.6 应对浏览器 6<br>1.4.7 “通过验证”并不是最终目的 7<br>1.5 SEO简介 7<br><br>第2章 结构与XHTML 9<br>2.1 理解结构与表现 10<br>2.1.1 内容 10<br>2.1.2 结构(Structure) 11<br>2.1.3 表现(Presentation) 11<br>2.1.4 行为(Behavior) 12<br>2.2 从HTML到XHTML 12<br>2.2.1 HTML简史 12<br>2.2.2 HTML的缺点 13<br>2.2.3 从HTML到XHTML 14<br>2.3 理解(X)HTML标签的语义 18<br>2.3.1 (X)HTML与浏览器默认样式 18<br>2.3.2 常用的XHTML标签和属性 19<br>2.3.3 (X)HTML各个元素对搜索引擎的权重比例 27<br>2.4 网站整体制作基本流程 27<br>2.4.1 总体流程与分工 27<br>2.4.2 静态页面制作 28<br><br>第2部分 层叠样式表CSS<br><br>第3章 CSS入门 31<br>3.1 CSS简介 32<br>3.1.1 起源 32<br>3.1.2 神奇的CSS 32<br>3.1.3 CSS与HTML 33<br>3.1.4 CSS与浏览器 34<br>3.1.5 CSS 2.1与CSS 2 34<br>3.2 CSS的使用方法 34<br>3.2.1 行内式样式(Iinline Style) 35<br>3.2.2 嵌入式样式表(Embedded Style Sheets) 35<br>3.2.3 外部样式表(Link Style Sheets) 35<br>3.2.4 导入式样式表 37<br>3.2.5 应用 38<br>3.2.6 维护和组织样式表 38<br>3.3 基本样式规则 39<br>3.3.1 基本语法 39<br>3.3.2 继承与层叠 40<br>3.3.3 分组 40<br>3.3.4 注释 41<br>3.3.5 缩写 41<br>3.3.6 注意事项 43<br>3.4 元素类型 43<br>3.4.1 替换和不可替换元素 44<br>3.4.2 显示元素 44<br>3.5 媒体类型 45<br>3.5.1 指定媒体相关的样式表 45<br>3.5.2 媒体组 45<br><br>第4章 文档结构与选择器 47<br>4.1 文档结构 48<br>4.2 CSS选择器 49<br>4.2.1 通配选择器(Universal Selector) 49<br>4.2.2 类型选择器(Type Selectors) 49<br>4.2.3 ID选择器(ID Selectors) 50<br>4.2.4 类选择器(Class Selectors) 50<br>4.2.5 包含选择器(Descendant Selectors) 51<br>4.2.7 相邻兄弟选择器(Adjacent Sibling Selectors) 52<br>4.2.8 属性选择器(Attribute Selectors) 53<br>4.3 伪类与伪元素 56<br>4.3.1 伪类(Pseudo-Classes) 56<br>4.3.2 伪元素(Pseudo-Elements) 59<br>4.3.3 注意 61<br>4.4 指定值、计算值和实际值 62<br>4.5 继承 63<br>4.5.1 值的继承 62<br>4.5.2 “inherit”值 63<br>4.5.3 继承的局限性 63<br>4.6 层叠 64<br>4.6.1 层叠的顺序 64<br>4.6.2 特殊性的计算 65<br>4.6.3 继承和特殊性 65<br>4.6.4 重要性 66<br>4.6.5 非CSS的表现类内容 66<br>4.7 CSS 3新增选择器前瞻 67<br>4.7.1 更多的属性选择器 67<br>4.7.2 普通兄弟选择器 68<br>4.7.3 结构伪类(Structural Pseudo-Classes) 69<br>4.7.4 UI元素伪类和伪元素 70<br>4.7.5 其他伪类 70<br>4.8 命名规范 71<br>4.9 选择器综合运用 72<br><br>第5章 单位和值 74<br>5.1 颜色<color> 75<br>5.1.1 颜色关键字 75<br>5.1.2 RGB颜色 75<br>5.1.3 关键字transparent 77<br>5.1.4 网页安全色(Web-safe Colors) 77<br>5.2 整数值<integer>和实数值<number> 78<br>5.3 长度<length> 78<br>5.3.1 格式 78<br>5.3.2 长度单位 78<br>5.3.3 应用 80<br>5.4 百分比<percentage> 80<br>5.5 关键字 81<br>5.6 字符串<string> 81<br>5.7 URL+URN=URI 81<br>5.8 其他值 82<br>5.8.1 记数器<counter> 82<br>5.8.2 角度<angle> 82<br>5.8.3 时间<time> 83<br>5.8.4 频率<frequency> 83<br>5.9 不支持的值的处理 83<br><br>第6章 字体 84<br>6.1.1 语法 85<br>6.1.2 常用字体系列 85<br>6.2 字体尺寸：font-size属性 87<br>6.2.1 语法 87<br>6.2.2 绝对尺寸 88<br>6.2.3 相对尺寸 89<br>6.2.4 百分比和em 89<br>6.2.5 尺寸的继承与浏览器的显示 90<br>6.2.6 分辨率与弹性设计 91<br>6.3 字体磅值：font-weight属性 91<br>6.3.1 语法 92<br>6.3.2 继承 92<br>6.3.3 浏览器显示原理 93<br>6.4 字体样式：font-style属性 94<br>6.5 字体变形：font-variant属性 95<br>6.6 缩写的字体属性：font属性 95<br>6.6.1 语法 95<br>6.6.2 注意 96<br>6.6.3 系统字体 97<br>6.7 调整与拉伸 98<br>6.7.1 字体调整：font-size-adjust属性 98<br>6.7.2 字体伸展：font-stretch属性 99<br>6.8 字体匹配原理 99<br>6.8.1 字体的匹配步骤 99<br>6.8.2 设定字体集的注意事项 100<br>6.8.3 字体的选择 100<br>6.8.4 font-face规则 101<br><br>第7章 文本 102<br>7.1 文本水平对齐：text-align属性 103<br>7.1.1 语法 103<br>7.1.2 适用于：块级元素 103<br>7.1.3 继承 104<br>7.1.4 应用：整体居中 104<br>7.2 文本缩进：text-indent属性 105<br>7.2.1 语法 106<br>7.2.2 正值缩进 106<br>7.2.3 负值缩进 107<br>7.2.4 应用：隐藏单行文字 107<br>7.3 行高：line-height属性 108<br>7.3.1 语法 108<br>7.3.2 内容区域、行内框和行框 109<br>7.3.4 浏览器的差别与错误 111<br>7.3.5 应用：单行文字在垂直方向居中 112<br>7.4 垂直对齐：vertical-align属性 112<br>7.4.1 语法 112<br>7.4.2 属性值详解 113<br>7.4.3 奇怪的IE 116<br>7.4.4 文档类型与纯图片内容的垂直对齐 116<br>7.4.5 单元格的垂直对齐 118<br>7.5 单词间隔(word-spacing)和字母间隔(letter-spacing) 119<br>7.5.1 单词间隔：word-spacing属性 119<br>7.5.2 字母间隔：letter-spacing属性 120<br>7.5.3 水平对齐的影响和继承 120<br>7.6 文本转换：text-transform属性 121<br>7.7 文本装饰：text-decoration属性 121<br>7.8 空白：white-space属性 123<br>7.8.1 语法 123<br>7.8.2 属性值详解 123<br>7.8.3 应用：显示不回行文本 124<br>7.9 文本阴影：text-shadow属性 125<br>7.10 文字方向direction和编码方式unicode-bidi 126<br><br>第8章 框模型 128<br>8.1框模型(Box Model) 129<br>8.2 包含块(Containing Block) 131<br>8.2.1 视口(viewport) 131<br>8.2.2 包含块 131<br>8.3 宽度：width属性 133<br>8.3.1 语法 133<br>8.3.2 行内元素的宽度 134<br>8.3.3 长度和百分比 135<br>8.4 最大宽度(max-width)和最小宽度(min-width) 136<br>8.5 高度：height属性 137<br>8.5.1 语法 137<br>8.5.2 行内元素的高度 138<br>8.6 最大高度(max-height)和最小高度(min-height) 138<br>8.7 补白：padding属性 140<br>8.7.1 缩写属性：padding 140<br>8.7.2 补白、宽度和高度 141<br>8.7.3 百分比值补白 141<br>8.8 边框：border属性 142<br>8.8.1 边框颜色 142<br>8.8.2 边框宽度 143<br>8.8.3 边框样式 144<br>8.8.4 不同方向的边框属性缩写 146<br>8.8.5 缩写属性border 146<br>8.8.6 行内元素的边框 147<br>8.8.7 应用：文字链接的装饰 147<br>8.9 边距：margin属性 148<br>8.9.1 水平方向的边距：margin-left属性和margin-right属性 149<br>8.9.2 垂直方向的边距：margin-top属性和margin-bottom属性 150<br>8.9.3 百分比值边距 153<br>8.9.4 负值边距 154<br>8.9.5 应用：元素水平居中 155<br>8.10 常规流向中的视觉格式化 156<br>8.10.1 块级元素的水平格式化 156<br>8.10.2 应用：宽度自适应的布局 160<br>8.10.3 块级元素的垂直格式化 161<br>8.10.4 应用：高度自适应浏览器窗口 163<br>8.10.5 行内元素的格式化 164<br><br>第9章 浮动、定位与视觉格式化模型 167<br>9.1 视觉格式化模型控制框的生成 168<br>9.1.1 块框的生成(block box) 168<br>9.1.2 行内框(inline box) 169<br>9.1.3 插入框(run-in box) 170<br>9.2 显示类型：display属性 170<br>9.2.1 语法 171<br>9.2.2 应用：显示或隐藏元素 173<br>9.3 定位 174<br>9.3.1 选择定位方式：position属性 174<br>9.3.2 设定框偏移：top、right、bottom、left属性 174<br>9.3.3 相对定位 176<br>9.3.4 绝对定位 178<br>9.3.5 堆叠顺序：z-index属性 191<br>9.3.6 IE中的position 194<br>9.3.7 应用：显示提示内容 195<br>9.4 浮动与清除 197<br>9.4.1 设定浮动：float属性 197<br>9.4.2 浮动元素的视觉格式化内容 198<br>9.4.3 清除浮动：clear属性 204<br>9.4.4 应用：3行3列布局设计 207<br>9.6 溢出和剪切 209<br>9.6.1 溢出：overflow属性 210<br>9.6.2 剪切：clip属性 212<br>9.6.3 clip与overflow属性的关系 214<br>9.7 可视性：visibility属性 215<br>9.7.1 属性值详解 215<br>9.7.2 应用：显示及隐藏元素 216<br><br>第10章 颜色与背景 217<br>10.1 颜色基础 218<br>10.2 前景色：color属性 219<br>10.2.1 链接 220<br>10.2.2 边框 221<br>10.2.3 表单元素 221<br>10.3 背景 222<br>10.3.1 背景颜色：background-color属性 222<br>10.3.2 背景图片：background-image属性 223<br>10.3.3 背景图片重复：background-repeat属性 224<br>10.3.4 背景图片附属：background-attachment属性 225<br>10.3.5 背景图片定位：background-position属性 226<br>10.3.6 缩写属性：background 230<br>10.3.7 <html>元素的背景 231<br>10.4 应用 232<br>10.4.1 灵活使用背景 232<br>10.4.2 模拟边框 233<br>10.4.3 简单的链接背景替换 237<br>10.4.4 导航菜单的滑动门效果 239<br><br>第11章 表格 244<br>11.1 表格的标签与属性 245<br>11.1.1 标签概览 245<br>11.1.2 (X)HTML属性 248<br>11.2 CSS的表格模型 251<br>11.2.1 表格模型概述 251<br>11.2.2 display属性 251<br>11.2.3 匿名表格对象 253<br>11.2.4 列 253<br>11.3 表格的视觉格式化 254<br>11.3.1 匿名框、标题框与表格框 254<br>11.3.2 标题<caption>的定位：caption-side属性 254<br>11.3.3 表格内容的视觉布局 255<br>11.3.4 表格的层和透明性 256<br>11.3.5 表格宽度算法：table-layout属性 258<br>11.3.6 表格高度 263<br>11.3.7 单元格内容的对齐 264<br>11.4 单元格边框：border-collapse属性 266<br>11.4.1 分离的边框模型 267<br>11.4.2 重合的边框模型 269<br>11.4.3 边框样式 272<br><br>第12章 列表和生成的内容 273<br>12.1 列表 274<br>12.1.1 列表样式类型：list-style-type属性 274<br>12.1.2 列表样式图片：list-style-image属性 276<br>12.1.3 列表样式定位：list-style-position属性 277<br>12.1.4 列表样式缩写：list-style属性 278<br>12.1.5 浏览器对列表的表现与样式的继承 278<br>12.2 生成的内容 280<br>12.2.1 :before和:after伪元素 281<br>12.2.2 生成内容：content属性 281<br>12.2.3 自动记数和编号 285<br><br>第13章 用户界面 291<br>13.1 鼠标指针：cursor属性 292<br>13.1.1 关键字 292<br>13.1.2 图片鼠标指针 293<br>13.2 系统字体和颜色 294<br>13.2.1 系统字体 294<br>13.2.2 系统颜色 295<br>13.3 动态的外廓：outline属性 296<br>13.3.1 外廓与边框的区别 296<br>13.3.2 外廓宽度：outline-width属性 297<br>13.3.3 外廓样式：outline-style属性 297<br>13.3.4 外廓颜色：outline-color属性 298<br>13.3.5 缩写：outline属性 298<br>13.3.6 外廓与焦点 299<br><br>第14章 页面媒体 300KV<br>14.1页面媒体简介 301<br>14.2 指定媒体类型 301<br>14.3 页框：page规则 302<br>14.3.1 页边距 302<br>14.3.2 页面选择器 303<br>14.4 分页 304L<br>14.4.1 元素前后分页：page-break-before和page-break-after属性 304<br>14.4.2 元素内部分页：page-break-inside属性 306<br>14.4.3 元素内的分割：orphans和widows属性 306<br>14.4.4 分页的规则 308<br>14.5 CSS 2中的属性 309<br>14.5.1 页框尺寸：size属性 309<br>14.5.2 裁切标记：marks属性 310<br>14.5.3 使用命名的页：page属性 310<br>14.6 显示器、打印机和投影 310<br>14.6.1 设备特点 311<br>14.6.2 设计要点 311<br><br>第15章 听觉样式表 313<br>15.1 听觉(aural)类型与语音(speech)类型 314<br>15.1.1 链接听觉样式的特点 314<br>15.1.2 与听觉属性相关的值 314<br>15.2 音量属性：volume属性 314<br>15.3 发音：speak属性 315<br>15.4 暂停：pause-before、pause-after和pause属性 316<br>15.5 提示：cue-before、cue-after和cue属性 317<br>15.6 混音：play-during属性 318<br>15.7 空间：azimuth和elevation属性 318<br>15.8 语音特征属性 320<br>15.9 语音：speak-punctuation和speak-numeral属性 323<br>15.10 叙述表头：speak-header属性 323<br><br>第16章 浏览器与Hack 325<br>16.1 浏览器简介 326<br>16.1.1 浏览器的发展 326<br>16.1.2 浏览器的解释引擎 326<br>16.1.3 浏览器的工作模式 327<br>16.2 Windows IE 329<br>16.2.1 hasLayout属性 329<br>16.2.2 条件注释 338<br>16.3 常用的CSS Hack 339<br>16.3.1 CSS Hack原理 339<br>16.3.2 CSS Hack不是必须的 340<br>16.3.3 常用的CSS Hack 340<br>16.4 发现与解决问题 343<br>16.4.1 排查问题 343<br>16.4.2 常见的非Bug问题 344<br>16.4.3 Windows IE常见Bug 347<br><br>第3部分 结构化实例<br><br>第17章 旅游网站 356<br>17.1 结构化 357<br>17.1.1 分析内容结构 357<br>17.1.2 基本结构 358<br>17.1.3 页首部分的结构化 359<br>17.1.4 中间部分的结构化 361<br>17.1.5 页脚部分的结构化 368<br>17.2 图片格式与网络基础知识 369<br>17.2.1 图片格式 369<br>17.2.2 图片与优化 370<br>17.3 CSS美化 371<br>17.3.1 整体分析 371<br>17.3.2 header层 377<br>17.3.3 logo层 378<br>17.3.4 mainNav层 378<br>17.3.5 login层 381<br>17.3.6 controlMenu层 385<br>17.3.7 main层 394<br>17.3.8 travels层 395<br>17.3.9 hot层 399<br>17.3.10 ad1层 403<br>17.3.11 photos层 402<br>17.3.12 forumList层 404<br>17.3.13 forumHot层 405<br>17.3.14 club层 410<br>17.3.15 vote层和community层 412<br>17.3.16 footer层 413<br>17.4 版式与结构 415<br>17.5 小结 416
展开
