内容简介
《CSS3+DIV网页样式与布局案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，采取“基础知识→核心技术→高级应用→网页布局→项目案例实战”的讲解模式，深入浅出地讲解CSS3+DIV的各项技术及实战技能。
《CSS3+DIV网页样式与布局案例课堂(第2版)》第Ⅰ篇主要讲解网页设计的必备技能、CSS样式入门和CSS3样式的基本语法等；第Ⅱ篇主要讲解设计网页字体与段落样式、设计网页图片样式、设计网页背景与边框样式、设计网页超级链接和鼠标样式、设计表格和表单样式、设计列表和菜单样式、使用滤镜美化网页元素等；第Ⅲ篇主要讲解CSS3的高级特性、过渡和动画效果、2D和3D变幻效果、CSS3和JavaScript的搭配应用、CSS3与XML的综合运用等；第Ⅳ篇主要讲解CSS定位与DIV布局核心技术、CSS+DIV盒子的浮动与定位、固定宽度网页布局剖析与制作、自动缩放网页布局剖析与制作、创建响应式页面等；第Ⅴ篇主要讲解设计商业门户类网页、设计图像影音类网页、设计娱乐休闲类网页、设计企业门户类网页和设计在线购物类网页。
《CSS3+DIV网页样式与布局案例课堂(第2版)》适合任何想学习CSS3+DIV网页设计与布局的人员，无论您是否从事计算机相关行业，无论您是否接触过CSS3和DIV，通过学习均可快速掌握CSS3+DIV的设计方法和技巧。
前 言
“网站开发案例课堂”系列图书是专门为网页设计初学者量身定制的一套学习用书。整套书具有以下特点。
前沿科技
无论是网站建设、数据库设计还是HTML5、CSS3，我们都精选较为前沿或者用户群较大的领域推进，帮助大家认识和了解最新动态。
权威的作者团队
组织国家重点实验室和资深应用专家联手编著该套图书，编者具有丰富的教学经验与优秀的管理理念。
学习型案例设计
以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度，提升学习效率。
为什么要写这样一本书
随着用户对页面体验要求的提高，页面前端技术日趋重要。CSS+DIV技术成熟，在前端技术中凸显优势，在各大浏览器厂商的支持下，将会更加盛行，因此本书致力于帮助读者掌握目前流行的最新前端技术，使前端从外观上变得更炫、技术上更简易。通过本书的案例实训，读者可以很快地掌握流行的工具，提高职业化能力，从而帮助解决公司与求职者的双重需求问题。
本书特色
零基础、入门级的讲解
无论您是否从事计算机相关行业，无论您是否接触过网页制作和设计，都能从本书中找到最佳起点。
超多、实用、专业的范例和项目
本书在编排上紧密结合深入学习网页制作技术的先后过程，从基本概念开始，引导读者逐步深入地学习各种应用技巧；侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。
随时检测自己的学习成果
大部分章节最后的“跟我练练手”版块，均根据本章内容精选而成，读者可以随时检测自己的学习成果和实战能力，做到融会贯通。
细致入微、贴心提示
本书在讲解过程中，在各章使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作和概念，并轻松掌握各种操作技巧。
技术支持
您在学习过程中遇到任何问题，可加入QQ群(案例课堂VIP)进行提问，专业人员会在线答疑。
超值资源大放送
全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例及项目的过程与技术关键点。读者可更轻松地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分可使读者得到比书中更多的收获。
超多容量王牌资源
赠送大量王牌资源，包括实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、HTML5标签速查手册、精选的JavaScript实例、CSS3属性速查表、JavaScript函数速查手册、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP)获取赠送资源。
读者对象
没有任何网页设计基础的初学者。
有一定的基础，想精通网页制作和设计的人员。
有一定的基础，没有项目经验的人员。
正在进行毕业设计的学生。
大专院校及培训学校的老师和学生。
创作团队
本书由刘春茂编著，参加编写的人员还有刘玉萍、张金伟、蒲娟、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、王伟、展娜娜、李琪、梁云梁和周浩浩。在编写过程中，我们尽所能地将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请不吝指正。
编 者
目 录
第Ⅰ篇 基 础 知 识第1章 网页设计的必备技能 31.1 认识网页和网站 41.1.1 什么是网页 41.1.2 什么是网站 41.2 网页中需要包含的要素 51.2.1 需要HTML文件 51.2.2 需要DIV层 51.2.3 需要CSS定义网页样式 61.2.4 需要JavaScript设置网页动画 61.2.5 需要域名与服务器空间 71.3 一个简单网页的基本构成 71.3.1 Head部分 81.3.2 Body部分 81.3.3 注释部分 81.4 设计网页的总体流程 91.4.1 网页规划 91.4.2 搜集资料 91.4.3 设计网页的总体效果 101.4.4 制作网页素材文件 111.4.5 搭建网页DIV层 121.4.6 使用CSS与JavaScript 121.4.7 测试网页 131.5 网站的种类与网页布局方式 141.5.1 网站的种类 141.5.2 网页布局方式 151.6 在Photoshop中构建网页结构 161.7 大神解惑 181.8 跟我练练手 18第2章 CSS样式入门 192.1 认识CSS 202.1.1 CSS功能 202.1.2 浏览器与CSS 202.1.3 CSS发展历史 212.2 CSS常用单位 212.2.1 颜色单位 212.2.2 长度单位 252.3 编辑和浏览CSS 262.3.1 案例1——手工编写CSS 262.3.2 案例2——使用Dreamweaver编写CSS 272.4 在HTML中调用CSS的方法 282.4.1 案例3——行内样式 282.4.2 案例4——内嵌样式 292.4.3 案例5——链接样式 312.4.4 案例6——导入样式 322.5 调用CSS方法的优先级问题 332.5.1 案例7——行内样式和内嵌样式比较 332.5.2 案例8——内嵌样式和链接样式比较 342.5.3 案例9——链接样式和导入样式比较 342.6 综合案例——制作产品销售统计表 352.7 大神解惑 372.8 跟我练练手 37第3章 CSS3样式的基本语法 393.1 CSS基本语法 403.1.1 CSS构造规则 403.1.2 CSS的注释 403.2 CSS的常用选择器 403.2.1 案例1——标签选择器 413.2.2 案例2——类选择器 413.2.3 案例3——ID选择器 423.2.4 案例4——选择器的声明 433.3 综合案例——制作炫彩网站Logo 443.4 大神解惑 463.5 跟我练练手 47第II篇 核 心 技 术第4章 设计网页字体与段落样式 514.1 美化字体样式 524.1.1 案例1——控制字体类型 524.1.2 案例2——定义字体大小 534.1.3 案例3——定义字体风格 544.1.4 案例4——控制文字的粗细 554.1.5 案例5——将小写字母转为大写字母 564.1.6 案例6——设置字体的复合属性 574.1.7 案例7——定义文字的颜色 584.2 CSS3中新增的文本高级样式 594.2.1 案例8——添加文本的阴影效果 594.2.2 案例9——设置文本溢出效果 604.2.3 案例10——控制文本的换行 624.2.4 案例11——设置字体尺寸 634.3 通过CSS控制文本间距与对齐方式 644.3.1 案例12——设置单词之间的间隔 644.3.2 案例13——设置字符之间的间隔 654.3.3 案例14——为文本添加下画线、上画线、删除线 664.3.4 案例15——设置垂直对齐方式 664.3.5 案例16——转换文本的大小写 684.3.6 案例17——设置文本的水平对齐方式 694.3.7 案例18——设置文本的缩进效果 714.3.8 案例19——设置文本的行高 714.3.9 案例20——文本的空白处理 724.3.10 案例21——文本的反排 734.4 综合案例1——设置网页标题 754.5 综合案例2——制作新闻页面 764.6 大神解惑 774.7 跟我练练手 78第5章 设计网页图片样式 795.1 图片缩放 805.1.1 案例1——通过描述标记width和height缩放图片 805.1.2 案例2——使用CSS3中的max-width和max-height缩放图片 805.1.3 案例3——使用CSS3中的width和height缩放图片 815.2 设置图片的对齐方式 825.2.1 案例4——设置图片横向对齐 825.2.2 案例5——设置图片纵向对齐 835.3 图 文 混 排 845.3.1 案例6——设置文字环绕效果 845.3.2 案例7——设置图片与文字的间距 855.4 综合案例1——制作学校宣传单 875.5 综合案例2——制作简单图文混排网页 895.6 大神解惑 905.7 跟我练练手 90第6章 设计网页背景与边框样式 916.1 设计网页背景样式 926.1.1 案例1——设置背景颜色 926.1.2 案例2——设置背景图片 936.1.3 案例3——背景图片重复 946.1.4 案例4——背景图片显示 956.1.5 案例5——设置背景图片位置 976.2 CSS3中新增的控制网页背景属性 996.2.1 案例6——设置背景图片大小 996.2.2 案例7——设置背景显示区域 1006.2.3 案例8——设置背景图像裁剪区域 1026.2.4 案例9——设置背景的复合属性 1036.3 设计边框样式 1046.3.1 案例10——设置边框样式 1046.3.2 案例11——设置边框颜色 1066.3.3 案例12——设置边框线宽 1076.3.4 案例13——设置边框的复合属性 1096.4 CSS3中新增的边框圆角效果 1106.4.1 案例14——设置圆角边框 1106.4.2 案例15——指定两个圆角半径 1116.4.3 案例16——绘制四个不同圆角边框 1126.4.4 案例17——绘制不同种类的边框 1146.5 CSS3中的渐变效果 1156.5.1 案例18——线性渐变效果 1166.5.2 案例19——径向渐变效果 1186.6 综合案例1——制作简单公司主页 1196.7 综合案例2——制作简单生活资讯主页 1226.8 大神解惑 1246.9 跟我练练手 124第7章 设计网页超级链接和鼠标样式 1257.1 使用CSS3美化超链接 1267.1.1 案例1——改变超级链接基本样式 1267.1.2 案例2——设置带有提示信息的超级链接 1277.1.3 案例3——设置超级链接的背景图 1287.1.4 案例4——设置超级链接的按钮效果 1297.2 使用CSS3美化鼠标 1307.2.1 案例5——使用CSS3控制鼠标箭头 1307.2.2 案例6——设置鼠标变幻式超链接 1327.2.3 案例7——设置网页页面滚动条 1337.3 综合案例1——图片版本超级链接 1357.4 综合案例2——关于鼠标特效案例 1367.5 综合案例3——制作一个简单的导航栏 1397.6 大神解惑 1407.7 跟我练练手 141第8章 设计表格和表单样式 1438.1 美化表格样式 1448.1.1 案例1——设置表格边框样式 1448.1.2 案例2——设置表格边框宽度 1468.1.3 案例3——设置表格边框颜色 1478.2 美化表单样式 1488.2.1 案例4——美化表单中的元素 1488.2.2 案例5——美化提交按钮 1508.2.3 案例6——美化下拉菜单 1518.3 综合案例1——制作用户登录页面 1538.4 综合案例2——制作用户注册页面 1558.5 大神解惑 1578.6 跟我练练手 158第9章 设计列表和菜单样式 1599.1 美化项目列表的样式 1609.1.1 案例1——美化无序列表 1609.1.2 案例2——美化有序列表 1619.1.3 案例3——美化自定义列表 1639.1.4 案例4——制作图片列表 1649.1.5 案例5——缩进图片列表 1659.1.6 案例6——列表复合属性 1669.2 使用CSS制作网页菜单 1689.2.1 案例7——制作动态导航菜单 1689.2.2 案例8——制作水平和垂直菜单 1709.3 综合案例1——模拟SOSO导航栏 1729.4 综合案例2——将段落转变成列表 1759.5 大神解惑 1779.6 跟我练练手 177第10章 使用滤镜美化网页元素 17910.1 滤镜概述 18010.2 设置基本滤镜效果 18110.2.1 案例1——高斯模糊(blur)滤镜 18110.2.2 案例2——明暗度(brightness)滤镜 18210.2.3 案例3——对比度(contrast)滤镜 18310.2.4 案例4——阴影(drop-shadow)滤镜 18410.2.5 案例5——灰度(grayscale)滤镜 18510.2.6 案例6——反相(invert)滤镜 18610.2.7 案例7——透明度(opacity)滤镜 18710.2.8 案例8——饱和度(saturate)滤镜 18810.2.9 案例9——深褐色(sepia)滤镜 18910.3 使用复合滤镜效果 19010.4 大神解惑 19110.5 跟我练练手 191第III篇 高 级 应 用第11章 CSS3的高级特性 19511.1 复合选择器 19611.1.1 案例1——全局选择器 19611.1.2 案例2——交集选择器 19711.1.3 案例3——并集选择器 19711.1.4 案例4——继承(后代)选择器 19811.2 CSS3新增的选择器 19911.2.1 案例5——属性选择器 19911.2.2 案例6——结构伪类选择器 20111.2.3 案例7——UI元素状态伪类选择器 20211.2.4 案例8——伪类选择器 20411.3 CSS3的继承特性 20511.3.1 案例9——继承关系 20511.3.2 案例10——CSS继承的运用 20611.4 CSS3的层叠特性 20711.4.1 案例11——同一选择器被多次定义的处理 20711.4.2 案例12——同一标签运用不同类型选择器的处理 20811.5 综合案例——制作新闻菜单 20911.6 大神解惑 21211.7 跟我练练手 212第12章 过渡和动画效果 21312.1 认识过渡效果 21412.2 案例1——添加过渡效果 21412.3 了解动画效果 21712.4 案例2——添加动画效果 21812.5 大神解惑 21912.6 跟我练练手 220第13章 2D和3D变幻效果 22113.1 认识2D转换效果 22213.2 添加2D转换效果 22213.2.1 案例1——添加移动效果 22213.2.2 案例2——添加旋转效果 22313.2.3 案例3——添加缩放效果 22413.2.4 案例4——添加倾斜效果 22513.2.5 案例5——添加综合变幻效果 22713.3 添加3D转换效果 22813.4 大神解惑 23013.5 跟我练练手 230第14章 CSS3和JavaScript的搭配应用 23114.1 JavaScript语法基础 23214.1.1 什么是JavaScript 23214.1.2 数据类型 23214.1.3 变量 23414.1.4 案例1——运算符的简单应用 23414.1.5 案例2——流程控制语句的简单应用 23714.1.6 案例3——函数的简单应用 24014.2 常见的JavaScript编写工具 24314.2.1 记事本编写工具 24314.2.2 Dreamweaver编写工具 24414.3 JavaScript在HTML中的使用 24414.3.1 案例4——在HTML网页头中嵌入JavaScript代码 24514.3.2 案例5——在HTML网页中嵌入JavaScript代码 24614.3.3 案例6——在HTML网页的元素事件中嵌入JavaScript代码 24714.3.4 案例7——在HTML中调用已经存在的JavaScript文件 24814.3.5 案例8——通过JavaScript伪URL引入JavaScript脚本代码 24914.4 JavaScript与CSS3的结合使用 25014.4.1 案例9——设置动态内容 25014.4.2 案例10——改变动态样式 25114.4.3 案例11——动态定位网页元素 25214.4.4 案例12——设置网页元素的显示与隐藏 25414.5 HTML5、CSS3和JavaScript的搭配应用 25514.5.1 案例13——设定左右移动的图片 25614.5.2 案例14——制作颜色选择器 25814.5.3 案例15——制作跑马灯效果 26014.6 综合案例——制作树形导航菜单 26214.7 大神解惑 26714.8 跟我练练手 268第15章 CSS与XML的综合运用 26915.1 XML语法基础 27015.1.1 实例1——XML的基本应用 27015.1.2 实例2——XML文档的组成和声明 27115.1.3 实例3——XML元素介绍 27215.2 使用CSS修饰XML文件 27415.2.1 实例4——XML使用CSS 27415.2.2 实例5——设置字体属性 27515.2.3 实例6——设置色彩属性 27615.2.4 实例7——设置边框属性 27715.2.5 实例8——设置文本属性 27815.3 综合实例1——招聘广告 27915.4 综合实例2——图文混排页面 28115.5 综合实例3——古诗欣赏 28315.6 大神解惑 28615.7 跟我练练手 286第IV篇 网 页 布 局第16章 CSS定位与DIV 布局核心技术 28916.1 认识块级元素和行内级元素 29016.1.1 案例1——块级元素和行内级元素的应用 29016.1.2 案例2——div元素和span元素的区别 29216.2 盒子模型 29216.2.1 盒子模型的概念 29316.2.2 案例3——定义网页border区域 29316.2.3 案例4——定义网页padding区域 29516.2.4 案例5——定义网页margin区域 29616.3 弹性盒模型 29916.3.1 案例6——定义盒子布局方向(box-orient) 30016.3.2 案例7——定义盒子布局顺序(box-direction) 30116.3.3 案例8——定义盒子布局位置(box-ordinal-group) 30316.3.4 案例9——定义盒子弹性空间(box-flex) 30416.3.5 案例10——管理盒子空间(box-pack和box-align) 30616.3.6 案例11——盒子空间的溢出管理(box-lines) 30716.4 综合案例1——图文排版效果 30816.5 综合案例2——淘宝导购菜单 31016.6 大神解惑 31316.7 跟我练练手 314第17章 CSS+DIV盒子的浮动与定位 31517.1 定义DIV 31617.1.1 什么是DIV 31617.1.2 案例1——创建DIV 31617.2 盒子的定位 31717.2.1 案例2——静态定位 31717.2.2 案例3——相对定位 31817.2.3 案例4——绝对定位 31917.2.4 案例5——固定定位 32017.2.5 案例6——盒子的浮动 32117.3 其他CSS布局定位方式 32317.3.1 案例7——溢出(overflow)定位 32317.3.2 案例8——隐藏(visibility)定位 32517.3.3 案例9——z-index空间定位 32717.4 新增CSS3多列布局 32817.4.1 案例10——设置列宽度 32817.4.2 案例11——设置列数 33017.4.3 案例12——设置列间距 33117.4.4 案例13——设置列边框样式 33217.5 综合案例1——定位网页布局样式 33417.6 综合案例2——制作阴影文字效果 33717.7 大神解惑 33817.8 跟我练练手 338第18章 固定宽度网页布局剖析与制作 33918.1 CSS排版的观念 34018.1.1 将页面用div分块 34018.1.2 设置各块位置 34018.1.3 案例1——用CSS定位 34118.2 固定宽度网页剖析与布局 34418.2.1 案例2——网页单列布局模式 34418.2.2 案例3——网页“1-2-1”型布局模式 34818.2.3 案例4——网页“1-3-1”型布局模式 35018.3 大神解惑 35418.4 跟我练练手 354第19章 自动缩放网页布局剖析与制作 35519.1 自动缩放网页“1-2-1”型布局模式 35619.1.1 案例1——“1-2-1”等比例变宽布局 35619.1.2 案例2——“1-2-1”单列变宽布局 35719.2 自动缩放网页“1-3-1”型布局模式 35819.2.1 “1-3-1”三列宽度等比例布局 35819.2.2 案例3——“1-3-1”单侧列宽度固定的变宽布局 35819.2.3 案例4——“1-3-1”中间列宽度固定的变宽布局 36119.2.4 案例5——“1-3-1”双侧列宽度固定的变宽布局 36519.2.5 案例6——“1-3-1”中列和左侧列宽度固定的变宽布局 36819.3 分列布局背景色的使用 37119.3.1 案例7——设置固定宽度布局的列背景色 37219.3.2 案例8——设置特殊宽度变化布局的列背景色 37319.4 综合案例1——单列宽度变化布局 37419.5 综合案例2——多列等比例宽度变化布局 37619.6 大神解惑 37819.7 跟我练练手 378第20章 创建响应式页面 37920.1 了解弹性盒子 38020.2 案例1——使用弹性盒子 38020.3 案例2——设置弹性子元素的位置 38320.4 案例3——设置弹性子元素的横向对齐方式 38420.5 案例4——设置弹性子元素的纵向对齐方式 38920.6 案例5——设置弹性子元素的换行方式 39020.7 综合案例——使用弹性盒子创建响应式页面 39320.8 大神解惑 39520.9 跟我练练手 396第V篇 项目案例实战第21章 设计商业门户类网页 39921.1 整体设计 40021.1.1 颜色应用分析 40021.1.2 架构布局分析 40021.2 主要模块设计 40121.2.1 网页整体样式插入 40121.2.2 网页局部样式 40321.2.3 顶部模块样式代码分析 41021.2.4 中间主体代码分析 41121.2.5 底部模块分析 41421.3 网站调整 41521.3.1 部分内容调整 41521.3.2 模块调整 41521.3.3 调整后预览测试 417第22章 设计图像影音类网页 41922.1 整体设计 42022.1.1 颜色应用分析 42022.1.2 架构布局分析 42122.2 主要模块设计 42222.2.1 样式代码分析 42222.2.2 顶部模块样式代码分析 42522.2.3 网站主体模块代码分析 42722.2.4 底部模块分析 43022.3 网站调整 43122.3.1 部分内容调整 43122.3.2 模块调整 43222.3.3 调整后预览测试 435第23章 设计娱乐休闲类网页 43723.1 整体设计 43823.1.1 应用设计分析 43823.1.2 架构布局分析 43923.2 主要模块设计 44023.2.1 网页整体样式插入 44023.2.2 顶部模块代码分析 44123.2.3 视频模块代码分析 44223.2.4 评论模块代码分析 44323.2.5 热门推荐模块代码分析 44423.2.6 底部模块分析 44623.3 网页调整 44623.3.1 部分内容调整 44623.3.2 调整后预览测试 448第24章 设计企业门户类网页 44924.1 构思布局 45024.1.1 设计分析 45024.1.2 排版架构 45024.2 主要模块设计 45124.2.1 Logo与导航菜单 45124.2.2 Banner区 45224.2.3 资讯区 45324.2.4 版权信息 455第25章 设计在线购物类网页 45725.1 整体布局 45825.1.1 设计分析 45825.1.2 排版架构 45825.2 主要模块设计 45925.2.1 Logo与导航区 45925.2.2 Banner与资讯区 46025.2.3 产品类别区域 46225.2.4 页脚区域 463
