DIV+CSS 3网页样式与布局全程揭秘（第2版）

第1章　网页和网站开发知识          1 1.1　了解网页        1 1.1.1　网页与网站的关系    1 1.1.2　网页的基本构成元素         2 1.2　如何设计网页        3 1.2.1　什么是网页设计         3 1.2.2　网页设计的特点　    3 1.2.3　网页设计相关术语    4 1.2.4　常见网站类型    7 1.3　关于表格布局        8 1.3.1　表格布局的特点         9 1.3.2　冗余的嵌套表格和混乱的结构         9 1.4　关于DIV+CSS布局         10 1.4.1　DIV+CSS布局的特点  10 1.4.2　DIV+CSS布局的优势  10 1.5　Web标准        11 1.5.1　什么是Web标准        11 1.5.2　Web标准的内容         11 1.5.3　结构、表现、行为和内容         12 1.5.4　遵循Web标准的好处        13 1.6　网站开发流程        13 1.6.1　网站策划    13 1.6.2　规划网站结构    14 1.6.3　素材收集整理    14 1.6.4　网页版式与布局分析         14 1.6.5　确定网站主色调         15 1.6.6　设计网站页面    15 1.6.7　切割和优化网页         16 1.6.8　制作HTML页面          16 1.6.9　使用CSS样式控制网页外观     16 1.6.10　为网页应用JavaScript特效     17 1.6.11　网站后台程序开发  17 1.6.12　申请域名和服务器空间  17 1.6.13　测试并上传网站       17 1.7　本章小结        17 　第2章　HTML、XHTML和                   HTML5          18 2.1　HTML与XHTML   18 2.1.1　HTML与XHTML的区别    18 2.1.2　使用XHTML的优点   18 2.2　HTML基础     19 2.2.1　了解HTML 19 2.2.2　HTML的作用      20 2.2.3　HTML的基础结构      20 2.2.4　HTML的基本语法      21 2.3　HTML常用标签     21 2.3.1　区块标签    22 2.3.2　文本标签    22 2.3.3　格式标签    23 2.3.4　图像标签    23 2.3.5　表格标签    24 2.3.6　超链接标签         24 2.4　XHTML基础   25 2.4.1　了解XHTML        25 2.4.2　XHTML文档的基本结构    25 2.4.3　3种不同的XHTML文档类型    26 2.4.4　严谨的代码         27 2.4.5　制作HTML页面          29 实例01+视频：制作简单的HTML页面       29 2.5　HTML 5基础  30 2.5.1　了解HTML 5       30 2.5.2　HTML 5的简化操作   31 2.5.3　HTML 5新增标签       31 2.5.4　HTML 5废弃标签       33 2.5.5　HTML 5新增选择器   33 2.5.6　HTML 5的优势   34 2.6　HTML 5的应用      35 2.6.1　标签      35 实例02+视频：在网页中实现绘图效果      35 2.6.2　标签        37 实例03+视频：在网页中嵌入音频      37 2.6.3　标签        38 实例04+视频：在网页中嵌入视频      39 2.7　本章小结        40 　第3章   CSS样式入门     41 3.1　初识CSS样式         41 3.1.1　为什么要使用CSS样式     41 3.1.2　在网页中使用CSS样式的优势 42 3.1.3　CSS样式的作用  43 3.1.4　CSS样式的局限性      44 3.1.5　CSS样式基础语法      44 3.1.6　认识CSS规则的构成 45 3.2　CSS选择符     46 3.2.1　通配选择符         46 实例05+视频：航天科技网页      46 3.2.2　标签选择符         48 实例06+视频：酒店网站页面      48 3.2.3　ID选择符    50 实例07+视频：制作科技网站页面      50 3.2.4　类选择符    51 实例08+视频：设置活动网站页面文字      52 3.2.5　伪类和伪对象选择符         53 实例09+视频：设置酒店网站文字链接                             效果         54 3.2.6　群选择符    55 实例10+视频：设置女装网站图片效果      55 3.2.7　派生选择符         57 实例11+视频：运动鞋网站页面 57 3.3　CSS 3中新增的选择符  58 3.3.1　属性选择符         58 3.3.2　结构伪类选择符         59 3.3.3　UI元素状态伪类选择符    60 3.4　在网页中应用CSS样式的4种方法     60 3.4.1　内联CSS样式     60 实例12+视频：使用style属性添加                             内联CSS样式 61 3.4.2　内部CSS样式     62 实例13+视频：使用标签添加                             内部CSS样式 62 3.4.3　链接外部CSS样式文件     63 实例14+视频：使用标签链接                             外部CSS样式文件 64 3.4.4　导入外部CSS样式文件     66 实例15+视频：使用@import命令导入                             外部CSS样式文件 66 3.5　CSS样式的特性     67 3.5.1　继承性         67 3.5.2　特殊性         68 3.5.3　层叠性         68 3.5.4　重要性         69 3.6　CSS样式中的颜色设置和单位     69 3.6.1　CSS中的多种颜色设置方法      69 3.6.2　CSS中的绝对单位      71 3.6.3　CSS中的相对单位      71 3.7　本章小结        71 　第4章　使用CSS设置文本和                        段落样式  72 4.1　设置文本CSS样式         72 4.1.1　设置字体font-family  72 实例16+视频：设置欢迎页面中的字体      72 4.1.2　设置字体大小font-size      74 实例17+视频：设置网站欢迎页面中的                          字体大小       74 4.1.3　设置字体颜色color   75 实例18+视频：设置网站欢迎页面中的                          文字颜色       75 4.1.4　设置字体粗细font-weight         77 实例19+视频：设置网页中的重要                             文字加粗         77 4.1.5　设置字体样式font-style    79 实例20+视频：设置网页中文字倾斜 79 4.1.6　设置英文字体大小写             text-transform          80 实例21+视频：设置网页中的英文大小写 81 4.1.7　设置文字修饰text-decoration  82 实例22+视频：为网页中文字添加下划线、                             顶划线和删除线     82 4.2　设置段落样式        84 4.2.1　字间距letter-spacing 84 实例23+视频：控制网页中文字间距 84 4.2.2　行间距line-height       85 实例24+视频：控制网页中文本行间距      85 4.2.3　段落首字下沉    86 实例25+视频：实现网页中段落文字                             下沉效果         87 4.2.4　段落首行缩进text-indent 88 实例26+视频：实现网页中段落文字的                          首行缩进       88 4.2.5　段落水平对齐text-align    89 实例27+视频：实现网页中文字水平居中                             对齐         89 4.2.6　文本垂直对齐vertical-align       91 实例28+视频：实现网页中文本垂直居中                             对齐         91 4.3　CSS类选区     92 实例29+视频：个人卡通网站欢迎页 92 4.4　在网页中应用特殊字体        94 实例30+视频：在卡通网页中使用特殊                             字体         94 4.5　本章小结        97 　第5章　使用CSS设置背景和                        图片样式  98 5.1　设置背景颜色CSS样式         98 5.1.1　背景颜色background-color        98 实例31+视频：为网页设置整体背景                             颜色         98 5.1.2　为页面元素设置不同的背景颜色    100 实例32+视频：设置不同背景颜色区分                             网页元素         100 5.2　设置背景图像CSS样式         101 5.2.1　背景图像background-image      101 实例33+视频：设置图片网站背景图像      101 5.2.2　背景图像重复方式              background-repeat        102 实例34+视频：实现重复显示的背景                             图像         102 5.2.3　背景图像固定              background-attachment        104 实例35+视频：文本介绍网页固定的                             背景         104 5.2.4　背景图像位置             background-position         105 实例36+视频：通过背景定位实现图文                             混排效果         106 5.3　设置图片CSS样式         107 5.3.1　图片边框border         107 实例37+视频：设置卡通网站中的图片                               边框     108 5.3.2　图片缩放    109 实例38+视频：实现跟随浏览器窗口                             缩放的图片     109 5.3.3　图片水平对齐    111 实例39+视频：设置网页中图像的水平                             对齐效果         111 5.3.4　图片的垂直对齐         112 实例40+视频：设置网页中图像的垂直                             对齐效果         112 5.4　在网页中实现图文混排        114 5.4.1　使用CSS样式实现文本绕图效果     114 实例41+视频：实现图文介绍页面文本                             绕图         114 5.4.2　设置文本绕图间距    115 实例42+视频：美化图文介绍页面      115 5.5　网页中特殊的图像效果应用        116 5.5.1　全屏大图切换    117 实例43+视频：设计作品展示页面      117 5.5.2　鼠标经过图像动态效果    119 实例44+视频：制作图片展示网页      119 5.6　本章小结        122 　第6章　使用CSS设置                   列表样式     123 6.1　了解网页中的列表        123 6.2　设置列表的CSS样式    124 6.2.1　ul无序项目列表         124 实例45+视频：制作网站新闻列表      124 6.2.2　有序编号列表    125 实例46+视频：制作音乐排行榜 126 6.2.3　定义列表    127 实例47+视频：制作游戏新闻栏目      127 6.2.4　更改列表项目样式    128 实例48+视频：更改某一个项目列表                             符号         128 6.2.5　自定义列表符号         130 实例49+视频：图像列表符号的应用 130 6.3　使用列表制作导航菜单        131 6.3.1　使用CSS样式创建横向导航菜单     131 实例50+视频：制作游戏网站导航      131 6.3.2　使用CSS样式创建竖向导航菜单     132 实例51+视频：制作汽车网站竖向导航      133 6.4　列表在网页中的特殊应用   134 6.4.1　滚动图像    134 实例52+视频：在网页中实现四图横向                             滚动效果         134 6.4.2　动态堆叠卡         138 实例53+视频：制作个性网站欢迎页面      138 6.5　本章小结        142 　第7章　使用CSS设置超                   链接样式     143 7.1　了解网页超链接   143 7.1.1　什么是超链接    143 7.1.2　关于链接路径    144 7.1.3　超链接对象         144 7.1.4　创建超链接原则         145 7.2　CSS样式伪类 145 7.2.1　:link伪类     145 7.2.2　:hover伪类 146 7.2.3　:active伪类         146 7.2.4　:visited伪类         147 7.3　超链接CSS样式应用    147 7.3.1　超链接文字样式         147 实例54+视频：设置游戏网站文字                             超链接效果     147 7.3.2　按钮式超链接    150 实例55+视频：制作设计网站导航菜单      150 7.3.3　为超链接添加背景    152 实例56+视频：背景翻转导航菜单      152 7.4　设置网页中的光标效果        154 实例57+视频：自定义网页中的光标                             效果         155 7.5　超链接在网页中的特殊应用        156 7.5.1　倾斜导航菜单    156 实例58+视频：玩具网站倾斜导航      157 7.5.2　动感超链接         159 实例59+视频：卡通网站动感导航菜单      159 7.6　本章小结        163 　第8章　使用CSS设置表格                   样式     164 8.1　了解表格        164 8.1.1　认识表格标签与结构         164 8.1.2　表格标题标签    166 8.1.3　表格列和标签 167 8.1.4　水平对齐和垂直对齐         168 8.2　使用CSS样式控制表格外观         170 8.2.1　设置表格边框    170 实例60+视频：制作网站新闻栏目      170 8.2.2　设置表格背景颜色    172 实例61+视频：使用背景颜色美化表格      172 8.2.3　设置表格背景图像    173 实例62+视频：使用背景图像美化表格      173 8.3　使用CSS样式实现表格特效         175 8.3.1　设置单元行背景颜色         175 实例63+视频：实现隔行变色的表格 175 8.3.2　:hover伪类在表格中的应用     177 实例64+视频：使用CSS实现表格的                             交互效果         177 8.4　本章小结        178 　第9章　使用CSS设置                      表单元素样式       179 9.1　关于表单        179 9.1.1　表单标签         179 9.1.2　输入标签         180 9.1.3　文本域标签       180 9.1.4　选择域标签和         181 9.1.5　其他表单元素    182 9.1.6　关于、和标签  183 实例65+视频：创建简单的网页表单 183 9.2　使用CSS样式控制表单元素         185 9.2.1　使用CSS样式设置表单元素的背景色和边框 186 实例66+视频：制作网站登录页面      186 9.2.2　使用CSS样式实现圆角文本字段     189 实例67+视频：制作圆角登录框 189 9.2.3　使用CSS样式设置下拉列表效果     191 实例68+视频：制作网站搜索栏 191 9.3　表单在网页中的特殊应用   194 9.3.1　聚焦型提示语消失    194 实例69+视频：文本字段提示语效果1       194 9.3.2　输入型提示语消失    196 实例70+视频：文本字段提示语效果2       197 9.4　本章小结        198 　第10章　CSS滤镜的应用         199 10.1　关于CSS滤镜       199 10.1.1　什么是CSS滤镜        199 10.1.2　CSS滤镜语法    199 10.2　在网页中应用CSS滤镜       200 10.2.1　 Alpha滤镜       200 实例71+视频：实现网页中图像的半透明效果 201 10.2.2　BlendTrans滤镜        203 实例72+视频：实现网页中图像的渐隐渐现效果      203 10.2.3　Blur滤镜   205 实例73+视频：实现网页中图像的模糊效果      205 10.2.4　Chroma滤镜     206 实例74+视频：将网页中指定颜色设置为透明 206 10.2.5　DropShadow与Shadow滤镜  207 实例75+视频：为网页中的元素添加阴影效果 208 10.2.6　FlipH与FlipV滤镜    210 实例76+视频：实现网页中元素的水平和垂直翻转 210 10.2.7　Glow滤镜 211 实例77+视频：为网页中的文字添加光晕效果 211 10.2.8　Gray滤镜与Invert滤镜  213 实例78+视频：实现黑白网页效果      213 10.2.9　Light滤镜 214 实例79+视频：在网页中实现聚光灯效果 214 10.2.10　Mask滤镜       216 实例80+视频：实现文字遮罩效果      216 10.2.11　RevealTrans滤镜    217 实例81+视频：实现图像的动态转换 217 10.2.12　Wave滤镜       219 实例82+视频：实现网页中图像的波纹效果      219 10.2.13　Xray滤镜         220 实例83+视频：将网页中的图像处理为X光片效果  220 10.3　本章小结      222 　第11章　CSS高级应用与CSS 3属性       223 11.1　与标签的区别 223 11.2　如何简写CSS样式       224 11.2.1　颜色值简写       224 11.2.2　简写font属性  224 11.2.3　简写background属性      225 11.2.4　简写border属性      226 11.2.5　简写margin和padding属性  227 11.2.6　简写list属性    228 11.3　优化CSS样式       228 11.3.1　CSS选择符的命名规范    229 11.3.2　重用CSS样式   229 11.3.3　覆盖的方法简化CSS样式        229 11.4　CSS 3中新增的颜色定义方法    230 11.4.1　HSL和HSLA方法      230 实例84+视频：使用HSL方式定义网页元素背景颜色      231 11.4.2　RGBA方法         232 实例85+视频：使用RGBA方式定义网页元素背景颜色  232 11.5　CSS 3新增内容和透明度属性    233 11.5.1　内容content     234 实例86+视频：为网页中的元素赋予内容 234 11.5.2　透明度opacity 235 实例87+视频：设置图片半透明效果 235 11.6　CSS 3中新增文字效果设置         236 11.6.1　文字阴影text-shadow      236 实例88+视频：为网页中的文字添加阴影效果 237 11.6.2　文本溢出处理text-overflow    238 实例89+视频：设置溢出文本显示为省略号      238 11.7　CSS 3中新增背景效果设置         240 11.7.1　背景图像大小background-size        240 实例90+视频：控制网页元素背景图像大小      240 11.7.2　背景图像显示区域background-origin    242 实例91+视频：控制背景图像显示位置      242 11.7.3　背景图像裁剪区域background-clip         243 实例92+视频：控制背景图像裁剪      243 11.8　CSS 3中新增边框效果设置         245 11.8.1　多重边框颜色border-colors    245 实例93+视频：为网页中的图像添加多彩边框 245 11.8.2　圆角边框border-radius    246 实例94+视频：为网页元素添加圆角边框效果 246 11.8.3　图像边框border-image   248 实例95+视频：设置网页元素的图像边框效果 248 11.9　CSS 3新增界面相关属性    249 11.9.1　元素阴影box-shadow       249 实例96+视频：为网页元素添加阴影效果 250 11.9.2　内容溢出处理overflow   251 实例97+视频：为网页中的溢出文本添加滚动条      251 11.9.3　区域缩放调节resize         252 实例98+视频：实现网页中可以自由缩放的文本区域      253 11.9.4　轮廓外边框outline  254 实例99+视频：为网页中的图像添加轮廓外边框效果      254 11.9.5　多列布局column      255 实例100+视频：实现网页文章的分栏显示        255 11.9.6　导航序列号nav-index      256 11.10　CSS 3其他新增属性  257 11.10.1　判断对象@media  257 实例101+视频：根据浏览器窗口不同显示不同的背景颜色    257 11.10.2　加载服务器端字体@font-face      258 11.11　使用CSS 3制作网页特效 259 实例102+视频：网页动态交互导航菜单    259 11.12　本章小结   263 　第12章　使用DIV+CSS布局网页    264 12.1　关于Div        264 12.1.1　什么是Div         264 12.1.2　如何在网页中插入Div    264 12.2　id与class      266 12.2.1　什么是id  266 12.2.2　什么时候使用id       266 12.2.3　什么是class      267 12.2.4　什么时候使用class  267 12.3　CSS盒模型   268 12.3.1　什么是CSS盒模型   268 12.3.2　CSS盒模型的要点    269 12.3.3　margin属性      269 实例103+视频：制作房产网站欢迎页        269 12.3.4　border属性       271 实例104+视频：制作图片网页    271 12.3.5　padding属性     272 实例105+视频：控制图像与边界距离        272 12.3.6　content部分     274 12.4　CSS 3新增弹性盒模型         274 12.4.1　box-orient属性控制盒子取向          274 12.4.2　box-direction属性控制盒子顺序    276 12.4.3　box-ordinal-group属性控制盒子位置     278 12.4.4　box-flex属性控制盒子弹性空间     280 12.4.5　盒子空间管理box-pack和box-align属性      282 12.4.6　盒子空间溢出管理box-lines属性  284 12.5　网页元素定位      284 12.5.1　关于position属性    284 12.5.2　relative定位方式     285 实例106+视频：实现图像叠加效果    285 12.5.3　absolute定位方式    286 实例107+视频：制作科技公司网站页面    287 12.5.4　fixed定位方式         288 实例108+视频：固定不动的网站导航菜单        289 12.5.5　float定位方式  290 实例109+视频：制作图片列表页面    290 12.5.6　空白边叠加       293 实例110+视频：空白边叠加在网页中的应用    293 12.6　常用DIV+CSS布局解析       294 12.6.1　内容居中的网页布局       295 12.6.2　浮动的网页布局       295 12.6.3　自适应高度的解决方法  298 12.7　流体网格布局      299 实例111+视频：制作适用手机浏览的网页        299 12.8　本章小结      304    第13章    CSS与JavaScript实现网页特效          305 13.1　JavaScript基础     305 13.1.1　JavaScript的发展      305 13.1.2　JavaScript的特点      306 13.1.3　JavaScript语法中的基本要求 306 13.1.4　CSS样式与JavaScript        308 13.2　使用JavaScript的方法        308 13.2.1　使用标签嵌入JavaScript代码   309 13.2.2　调用外部js脚本文件       309 13.2.3　直接位于事件处理部分的代码中  309 13.3　JavaScript中的数据类型和变量         310 13.3.1　数据类型  310 13.3.2　变量  310 13.4　JavaScript运算符         311 13.4.1　算术运算符       311 13.4.2　逻辑运算符       311 13.4.3　比较运算符       311 13.5　JavaScript程序语句     311 13.5.1　if条件语句        311 13.5.2　switch条件语句        312 13.5.3　for循环语句     312 13.5.4　while循环语句          313 13.6　使用Spry实现网页特效     313 13.6.1　Spry菜单栏       313 实例112+视频：制作下拉导航菜单    313 13.6.2　Spry选项卡式面板  317 实例113+视频：制作网页新闻选项卡        317 13.6.3　Spry折叠式       320 实例114+视频：制作产品介绍页面    320 13.6.4　Spry可折叠面板       323 实例115+视频：制作家居网站    323 13.6.5　Spry工具提示  325 实例116+视频：制作作品展示网页    325 13.7　常见网页特效      326 13.7.1　广告切换效果  327 实例117+视频：制作简洁的左右轮换广告效果        327 13.7.2　页面切换  331 实例118+视频：全屏页面切换效果    331 13.8　本章小结      337 　第14章　商业案例实战   338 14.1　企业网站      338 14.1.1　设计分析  338 14.1.2　布局分析  338 14.1.3　案例制作  339 14.2　儿童用品网站      344 14.2.1　设计分析  345 14.2.2　布局分析  345 14.2.3　案例制作  345 14.3　游戏网站      351 14.3.1　设计分析  351 14.3.2　布局分析  351 14.3.3　案例制作  351 14.4　本章小结      361