醉染图书CSS3网页样式与布局案例课堂9787302477747

目 录篇 基 础 入 门章 CSS样式入门 31.1 认识CSS 41.1.1 CSS的功能 41.1.2 浏览器与CSS 41.1.3 CSS的发展历史 51.2 CSS常用单位 51.2.1 颜色单位 51.2.2 长度单位 91.3 编辑和浏览CSS 101.3.1 手工编写CSS 101.3.2 使用Dreamweaver编写CSS 111.4 在HTML中调用CSS的方法 131.4.1 行内样式 131.4.2 内嵌样式 141.4.3 链接样式 151.4.4 导入样式 161.5 调用方法的优先级 171.5.1 行内样式和内嵌样式的比较 181.5.2 内嵌样式和链接样式的比较 181.5.3 链接样式和导入样式的比较 191.6 综合案例——制作产品销售统计表 201.7 大神解惑 221.8 跟我练练手 22第2章 CSS3样式的基本语法 2.1 CSS基础语法 242.1.1 CSS构造规则 242.1.2 CSS的注释 242.2 CSS的常用选择器 252.2.1 标签选择器 252.2.2 类选择器 262.. 选择器 272.2.4 选择器的声明 27. 综合案例——制作炫彩Logo 282.4 大神解惑 312.5 跟我练练手 31第3章 CSS3的不错特 333.1 复合选择器 343.1.1 全局选择器 343.1.2 交集选择器 353.1.3 并集选择器 353.1.4 继承选择器 363.2 CSS3新增的选择器 373.2.1 属选择器 373.2.2 结构伪类选择器 393.. UI元素状态伪类选择器 403.2.4 伪类选择器 4. CSS的继承特 433.3.1 继承关系 433.3.2 CSS继承的运用 443.4 CSS的层叠特 453.4.1 同一选择器被多次定义的处理 453.4.2 同一标签运用不同类型选择器的处理 463.5 综合案例——制作新闻菜单 473.6 大神解惑 493.7 跟我练练手 50    第II篇 核 心 技 术第4章 使用CSS3控制网页字体与段落样式 534.1 通过CSS控制字体样式 544.1.1 控制字体类型 544.1.2 定义字体大小 554.1.3 定义字体风格 564.1.4 控制文字的粗细 574.1.5 将小写字母转换为大写字母 584.1.6 设置字体的复合属 594.1.7 定义文字的颜色 594.2 CSS3中新增的文本不错样式 614.2.1 添加文本的阴影效果 614.2.2 设置文本溢出效果 624.. 控制文本的换行 634.2.4 设置字体尺寸 644.3 通过CSS控制文本间距与对齐方式 654.3.1 设置单词之间的间隔 654.3.2 设置字符之间的间隔 664.3.3 为文本添加下划线、上划线、删除线 674.3.4 设置垂直对齐方式 684.3.5 转换文本的大小写 694.3.6 设置文本的水平对齐方式 704.3.7 设置文本的缩进效果 724.3.8 设置文本的行高 734.3.9 文本的空白处理 744.3.10 文本的反排 754.4 综合案例1——设置网页标题 764.5 综合案例2——制作新闻页面 784.6 大神解惑 794.7 跟我练练手 80第5章 使用CSS控制网页图片样式 815.1 图片缩放 825.1.1 通过描述标记width和height缩放图片 825.1.2 使用CSS3中的max-width和max-height缩放图片 825.1.3 使用CSS3中的width和height缩放图片 835.2 设置图片的对齐方式 845.2.1 设置图片横向对齐 845.2.2 设置图片纵向对齐 855.3 图文混排 875.3.1 设置文字环绕效果 875.3.2 设置图片与文字的间距 885.4 综合案例1——制作学校宣传单 905.5 综合案例2——制作简单图文混排网页 925.6 大神解惑 945.7 跟我练练手 94第6章 使用CSS控制网页背景与边框样式 956.1 使用CSS控制网页背景 966.1.1 设置背景颜色 966.1.2 设置背景图片 976.1.3 背景图片重复 986.1.4 背景图片显示 1006.1.5 背景图片位置 1016.2 CSS3中新增控制网页背景属 1026.2.1 背景图片大小 1026.2.2 背景显示区域 1046.. 背景图片裁剪区域 1056.2.4 背景复合属 1076.3 使用CSS控制边框样式 1086.3.1 设置边框样式 1086.3.2 设置边框颜色 1096.3.3 设置边框线宽 1106.3.4 设置边框复合属 1126.4 CSS3中新增边框圆角效果 1136.4.1 设置圆角边框 1136.4.2 指定两个圆角半径 1146.4.3 绘制4个不同圆角边框 1156.4.4 绘制不同种类的边框 1176.5 CSS3中的渐变效果 1196.5.1 线渐变效果 1196.5.2 径向渐变效果 1216.6 综合案例1——制作简单公司主页 1226.7 综合案例2——制作简单生活资讯主页 1266.8 大神解惑 1276.9 跟我练练手 128第7章 使用CSS3美化网页浏览效果 1297.1 使用CSS3美化超链接 1307.1.1 改变链接基本样式 1307.1.2 设置带有提示信息的链接 1317.1.3 设置链接的背景图 1327.1.4 设置链接的按钮效果 1337.2 使用CSS3美化鼠标 1347.2.1 使用CSS3控制鼠标箭头 1347.2.2 设置鼠标变幻式超链接 1357.. 设置网页页面滚动条 1367.3 综合案例1——图片版本链接 1387.4 综合案例2——鼠标 1407.5 综合案例3——制作一个简单的导航栏 1427.6 大神解惑 1447.7 跟我练练手 144第8章 使用CSS控制表格和表单样式 1458.1 美化表格样式 1468.1.1 设置表格边框样式 1468.1.2 设置表格边框宽度 1488.1.3 设置表格边框颜色 1498.2 美化表单样式 1508.2.1 美化表单中的元素 1508.2.2 美化提交按钮 1528.. 美化拉菜 1538.3 综合案例1——制作用户登录页面 1558.4 综合案例2——制作用户注册页面 1568.5 大神解惑 1598.6 跟我练练手 159第9章 控制列表和菜单样式 1619.1 美化项目列表的样式 1629.1.1 美化无序列表 1629.1.2 美化有序列表 1639.1.3 美化自定义列表 1659.1.4 制作图片列表 1669.1.5 缩进图片列表 1679.1.6 列表复合属 1689.2 使用CSS制作网页菜单 1699.2.1 制作无须表格的菜单 1699.2.2 制作水平和垂直菜单 1719.3 综合案例1——模拟soso导航栏 1739.4 综合案例2——将段落转变成列表 1779.5 大神解惑 1789.6 跟我练练手 1780章 使用滤镜美化网页元素 17910.1 滤镜概述 18010.2 设置基本滤镜效果 18110.2.1 高斯模糊滤镜 18110.2.2 明暗度滤镜 18210.. 对比度滤镜 18310.2.4 阴影滤镜 18410.2.5 灰度滤镜 18510.2.6 反相滤镜 18610.2.7 透明度滤镜 18710.2.8 饱和度滤镜 18810.2.9 深褐色滤镜 18910.3 使用复合滤镜效果 19010.4 大神解惑 19110.5 跟我练练手 192    第III篇 网 页 布 局1章 CSS定位与DIV布局核心 技术 19511.1 了解块级元素和行内级元素 19611.1.1 块级元素和行内级元素的 应用 19611.1.2 div元素和span元素的区别 19811.2 盒子模型 19811.2.1 盒子模型的概念 19811.2.2 定义网页border区域 19911.. 定义网页padding区域 20011.2.4 定义网页margin区域 20111.3 弹盒模型 20411.3.1 定义盒子布局方向 20511.3.2 定义盒子布局顺序 20611.3.3 定义盒子布局位置 20811.3.4 定义盒子弹空间 20911.3.5 管理盒子空间 21111.3.6 盒子空间的溢出管理 21311.4 综合案例1——图文排版效果 21411.5 综合案例2——导购菜单 21711.6 大神解惑 21911.7 跟我练练手 2202章 CSS+DIV盒子的浮动 与定位 22112.1 定义DIV 22212.1.1 什么是DIV 22212.1.2 创建DIV 22212.2 盒子的定位 212.2.1 静态定位 212.2.2 相对定位 22412.. 定位 22512.2.4 固定定位 22612.2.5 盒子的浮动 2271. CSS布局定位方式 2291..1 溢出定位 2291..2 隐藏定位 11.. z-index空间定位 12.4 新增CSS3多列布局 412.4.1 设置列宽度 412.4.2 设置列数 12.4.3 设置列间距 12.4.4 设置列边框样式 12.5 综合案例1——定位网页布局样式 24012.6 综合案例2——制作阴影文字效果 24312.7 大神解惑 24412.8 跟我练练手 2443章 固定宽度网页布局剖析 与制作 24513.1 CSS排版观念 24613.1.1 将页面用div分块 24613.1.2 设置各块位置 24613.1.3 用CSS定位 24713.2 固定宽度网页剖析与布局 25013.2.1 网页单列布局模式 25013.2.2 网页1-2-1型布局模式 25413.. 网页1-3-1型布局模式 25813.3 大神解惑 26113.4 跟我练练手 2624章 自动缩放网页布局剖析 与制作 26314.1 自动缩放网页1-2-1型布局模式 26414.1.1 “1-2-1”等比例变宽布局 26414.1.2 “1-2-1”单列变宽布局 26514.2 自动缩放网页1-3-1型布局模式 26614.2.1 “1-3-1”三列宽度等比例 布局 26614.2.2 “1-3-1”单侧列宽度固定的 变宽布局 26614.. “1-3-1”中间列宽度固定的 变宽布局 27014.2.4 “1-3-1”双侧列宽度固定的 变宽布局 27314.2.5 “1-3-1”中列和左侧列宽度 固定的变宽布局 27714.3 分列布局背景色的使用 28014.3.1 设置固定宽度布局的列 背景色 28014.3.2 设置特殊宽度变化布局的列 背景色 28214.4 综合案例1——单列宽度变化布局 28414.5 综合案例2——多列等比例宽度变化 布局 28514.6 大神解惑 28814.7 跟我练练手 288    第IV篇 高 级 技 能5章 过渡和动画效果 29115.1 了解过渡效果 29215.2 添加过渡效果 29215.3 了解动画效果 29515.4 添加动画效果 29615.5 大神解惑 29715.6 跟我练练手 2986章 D和D效果 29916.1 了解2D转换效果 30016.2 添加2D转换效果 30016.2.1 添加2D移动效果 30016.2.2 添加2D旋转效果 30116.. 添加2D缩放效果 30216.2.4 添加2D倾斜效果 30316.2.5 添加综合变幻效果 30416.3 添加3D转换效果 30516.4 大神解惑 30816.5 跟我练练手 3087章 创建响应式页面 30917.1 了解弹盒子 31017.2 使用弹盒子 31017.3 设置弹子元素的位置 31317.4 设置弹子元素的横向对齐方式 31417.5 设置弹子元素的纵向对齐方式 31917.6 设置弹子元素的换行方式 32117.7 综合案例——使用弹盒子创建 响应式页面 31. 大神解惑 32517.9 跟我练练手 326    第V篇 综 合 案 例8章 商业门户类赏析 32918.1 整体设计 33018.1.1 颜色应用分析 33018.1.2 架构布局分析 33118.2 主要模块设计 33118.2.1 网页整体样式插入 33118.2.2 网页局部样式 33318.. 顶部模块样式代码分析 34018.2.4 中间主体代码分析 34118.2.5 底部模块分析 34418.3 调整 34518.3.1 部分内容调整 34518.3.2 模块调整 34518.3.3 调整后预览测试 3479章 设计在线购物类网页 34919.1 整体布局 35019.1.1 设计分析 35019.1.2 排版架构 35019.2 主要模块设计 35119.2.1 Logo与导航区 35119.2.2 Banner与资讯区 35319.. 产品类别区域 35419.2.4 页脚区域 355第20章 设计企业门户类网页 35720.1 构思布局 35820.1.1 设计分析 35820.1.2 排版架构 35820.2 主要模块设计 35920.2.1 Logo与导航菜单 35920.2.2 Banner区 36020.. 资讯区 36120.2.4 版权信息 3632章 设计娱乐休闲类网页 36521.1 整体设计 36621.1.1 应用设计分析 36621.1.2 架构布局分析 36721.2 主要模块设计 36821.2.1 网页整体样式插入 36821.2.2 顶部模块代码分析 36921.. 视频模块代码分析 37021.2.4 评论模块代码分析 37121.2.5 热门模块代码分析 37321.2.6 底部模块分析 37521.3 网页调整 37621.3.1 部分内容调整 37621.3.2 调整后预览测试 377第22章 设计图像影音类网页 37922.1 整体设计 38022.1.1 颜色应用分析 38022.1.2 架构布局分析 38122.2 主要模块设计 38222.2.1 样式代码分析 38222.2.2 顶部模块样式代码分析 38622.. 主体模块代码分析 38722.2.4 底部模块分析 3912. 调整 3922..1 部分内容调整 3922..2 模块调整 3922.. 调整后预览测试 395

作者长期从事开发工作，数年来承接了大量的项目，具有丰富的实践经验。

前 言    “开发案例课堂”系列图书是专门为开发和数据库初学者量身定做的一套学习用书，由刘玉红策划、千谷高新教育的不错讲师编著，整套书涵盖开发、数据库设计等方面。整套书具有以下特点。前沿科技    无论是建设、数据库设计还是HTML5、CSS3，我们都精选较为前沿或者用户群优选的领域推进，帮大家认识和了解动态。的作者团队    组织重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与的管理理念。学习型案例设计    以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度以提升学习效率。为什么要写这样一本书    伴随着Web 2.0的盛行，传统的表格布局模式正逐渐被网页标准化CSS3+DIV的设计方式取代，对CSS3的学习也成为网页设计师的必修功课。对此，本书针对想学习网页样式与布局的初学者，快速让初学者入门后提高实战水平，很地上设计网页，提高职业化能力。本书特色* 零基础、入门级的讲解。    无论您从事计算机相关行业，无论您接触过CSS3，都能从本书中找到起点。* 超多、实用、专业的范例和项目。    本书在编排上紧密结合深入学习CSS3技术的先后过程，从CSS3的基本概念开始，带领大家逐步深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。* 随时检测自己的学习成果。    每章首页均提供了学习目标，以指导读者重点学习及学后检查。    每章的“跟我练练手”板块均根据本章内容精选而成，读者可以随时检测自己的学习成果和实战能力，做到融会贯通。* 细致入微、贴心提示。    本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小栏目，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。* 专业创作团队和技术支持。    本书由千谷高新教育中心编著和提供技术支持。    您在学习过程中遇到任何问题，可加入群：389543972进行提问，专家人员会在线答疑。光盘* 全程同步教学录像。    涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的CSS3网页设计知识，而且扩展的讲解部分使您得到比书中更多的收获。* 超多容量资源大放送。    大量资源，包括本书实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模版、精选的JavaScript实例、HTML5标签速查手册、CSS3属速查表、JavaScript函数速查手册、CSS+DIV布局赏析案例、精彩配色方案赏析、网页样式与布局案例赏析、Web前端常见面试题等。读者对象* 没有任何CSS3基础的初学者。* 有一定的CSS3基础，想精通CSS3的人员。* 有一定的CSS3基础，没有项目经验的人员。* 正在进行设计的学生。* 大专院校及培训学校的老师和学生。创作团队    本书由刘玉红和蒲娟编著，参加编写的人员还有刘玉萍、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、伟、胡同夫、王伟、展娜娜、梁云梁和周浩浩。    在编写过程中，我们竭尽所能地将的讲解呈现给读者，但也难免有疏漏之处，敬请不吝指正。若您在学习中遇到任何困难或疑问，或有何建议，可写信至信箱357975357@qq.com。     编 者

清华大学出版社“案例课堂”大系丛书以案例的形式讲解软件的内容，读者可以在实践中熟练掌握软件的使用方法。每一个案例都精挑细选，同时配有全程语音讲解的视频文件，方便读者学习。案例的选材广泛，涉及到软件应用的各个领域、各个行业，学习无死角。“CG设计”系列全彩精印，同等价位下内容更多，同等内容下更实惠。“开发”系列附赠，全面学习无障碍： CSS属速查表 HTML标签速查表 网页布局案例赏析 精彩配色方案赏析 精选JavaScript实例 JavaScript函数速查手册 CSS+DIV布局案例赏析 案例源文件与教学课件