| 作者 |
| 刘春茂 |
| 丛书名 |
| 网站开发案例课堂 |
| 出版社 |
| 清华大学出版社 |
| ISBN |
| 9787302515432 |
| 简要 |
| 简介 |
| 内容简介书籍计算机书籍 《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的设计方法和技巧。 |
| 目录 |
| 录 第Ⅰ篇 基 础 知 识 第1章 网页设计的必备技能 3 1.1 认识网页和网站 4 1.1.1 什么是网页 4 1.1.2 什么是网站 4 1.2 网页中需要包含的要素 5 1.2.1 需要HTML文件 5 1.2.2 需要DIV层 5 1.2.3 需要CSS定义网页样式 6 1.2.4 需要JavaScript设置网页动画 6 1.2.5 需要域名与服务器空间 7 1.3 一个简单网页的基本构成 7 1.3.1 Head部分 8 1.3.2 Body部分 8 1.3.3 注释部分 8 1.4 设计网页的总体流程 9 1.4.1 网页规划 9 1.4.2 搜集资料 9 1.4.3 设计网页的总体效果 10 1.4.4 制作网页素材文件 11 1.4.5 搭建网页DIV层 12 1.4.6 使用CSS与JavaScript 12 1.4.7 测试网页 13 1.5 网站的种类与网页布局方式 14 1.5.1 网站的种类 14 1.5.2 网页布局方式 15 1.6 在Photoshop中构建网页结构 16 1.7 大神解惑 18 1.8 跟我练练手 18 第2章 CSS样式入门 19 2.1 认识CSS 20 2.1.1 CSS功能 20 2.1.2 浏览器与CSS 20 2.1.3 CSS发展历史 21 2.2 CSS常用单位 21 2.2.1 颜色单位 21 2.2.2 长度单位 25 2.3 编辑和浏览CSS 26 2.3.1 案例1手工编写CSS 26 2.3.2 案例2使用Dreamweaver编写CSS 27 2.4 在HTML中调用CSS的方法 28 2.4.1 案例3行内样式 28 2.4.2 案例4内嵌样式 29 2.4.3 案例5链接样式 31 2.4.4 案例6导入样式 32 2.5 调用CSS方法的优先级问题 33 2.5.1 案例7行内样式和内嵌样式比较 33 2.5.2 案例8内嵌样式和链接样式比较 34 2.5.3 案例9链接样式和导入样式比较 34 2.6 综合案例制作产品销售统计表 35 2.7 大神解惑 37 2.8 跟我练练手 37 第3章 CSS3样式的基本语法 39 3.1 CSS基本语法 40 3.1.1 CSS构造规则 40 3.1.2 CSS的注释 40 3.2 CSS的常用选择器 40 3.2.1 案例1标签选择器 41 3.2.2 案例2类选择器 41 3.2.3 案例3ID选择器 42 3.2.4 案例4选择器的声明 43 3.3 综合案例制作炫彩网站Logo 44 3.4 大神解惑 46 3.5 跟我练练手 47 第II篇 核 心 技 术 第4章 设计网页字体与段落样式 51 4.1 美化字体样式 52 4.1.1 案例1控制字体类型 52 4.1.2 案例2定义字体大小 53 4.1.3 案例3定义字体风格 54 4.1.4 案例4控制文字的粗细 55 4.1.5 案例5将小写字母转为大写字母 56 4.1.6 案例6设置字体的复合属性 57 4.1.7 案例7定义文字的颜色 58 4.2 CSS3中新增的文本高级样式 59 4.2.1 案例8添加文本的阴影效果 59 4.2.2 案例9设置文本溢出效果 60 4.2.3 案例10控制文本的换行 62 4.2.4 案例11设置字体尺寸 63 4.3 通过CSS控制文本间距与对齐方式 64 4.3.1 案例12设置单词之间的间隔 64 4.3.2 案例13设置字符之间的间隔 65 4.3.3 案例14为文本添加下画线、上画线、删除线 66 4.3.4 案例15设置垂直对齐方式 66 4.3.5 案例16转换文本的大小写 68 4.3.6 案例17设置文本的水平对齐方式 69 4.3.7 案例18设置文本的缩进效果 71 4.3.8 案例19设置文本的行高 71 4.3.9 案例20文本的空白处理 72 4.3.10 案例21文本的反排 73 4.4 综合案例1设置网页标题 75 4.5 综合案例2制作新闻页面 76 4.6 大神解惑 77 4.7 跟我练练手 78 第5章 设计网页图片样式 79 5.1 图片缩放 80 5.1.1 案例1通过描述标记width和height缩放图片 80 5.1.2 案例2使用CSS3中的max-width和max-height缩放图片 80 5.1.3 案例3使用CSS3中的width和height缩放图片 81 5.2 设置图片的对齐方式 82 5.2.1 案例4设置图片横向对齐 82 5.2.2 案例5设置图片纵向对齐 83 5.3 图 文 混 排 84 5.3.1 案例6设置文字环绕效果 84 5.3.2 案例7设置图片与文字的间距 85 5.4 综合案例1制作学校宣传单 87 5.5 综合案例2制作简单图文混排网页 89 5.6 大神解惑 90 5.7 跟我练练手 90 第6章 设计网页背景与边框样式 91 6.1 设计网页背景样式 92 6.1.1 案例1设置背景颜色 92 6.1.2 案例2设置背景图片 93 6.1.3 案例3背景图片重复 94 6.1.4 案例4背景图片显示 95 6.1.5 案例5设置背景图片位置 97 6.2 CSS3中新增的控制网页背景属性 99 6.2.1 案例6设置背景图片大小 99 6.2.2 案例7设置背景显示区域 100 6.2.3 案例8设置背景图像裁剪区域 102 6.2.4 案例9设置背景的复合属性 103 6.3 设计边框样式 104 6.3.1 案例10设置边框样式 104 6.3.2 案例11设置边框颜色 106 6.3.3 案例12设置边框线宽 107 6.3.4 案例13设置边框的复合属性 109 6.4 CSS3中新增的边框圆角效果 110 6.4.1 案例14设置圆角边框 110 6.4.2 案例15指定两个圆角半径 111 6.4.3 案例16绘制四个不同圆角边框 112 6.4.4 案例17绘制不同种类的边框 114 6.5 CSS3中的渐变效果 115 6.5.1 案例18线性渐变效果 116 6.5.2 案例19径向渐变效果 118 6.6 综合案例1制作简单公司主页 119 6.7 综合案例2制作简单生活资讯主页 122 6.8 大神解惑 124 6.9 跟我练练手 124 第7章 设计网页超级链接和鼠标样式 125 7.1 使用CSS3美化超链接 126 7.1.1 案例1改变超级链接基本样式 126 7.1.2 案例2设置带有提示信息的超级链接 127 7.1.3 案例3设置超级链接的背景图 128 7.1.4 案例4设置超级链接的按钮效果 129 7.2 使用CSS3美化鼠标 130 7.2.1 案例5使用CSS3控制鼠标箭头 130 7.2.2 案例6设置鼠标变幻式超链接 132 7.2.3 案例7设置网页页面滚动条 133 7.3 综合案例1图片版本超级链接 135 7.4 综合案例2关于鼠标特效案例 136 7.5 综合案例3制作一个简单的导航栏 139 7.6 大神解惑 140 7.7 跟我练练手 141 第8章 设计表格和表单样式 143 8.1 美化表格样式 144 8.1.1 案例1设置表格边框样式 144 8.1.2 案例2设置表格边框宽度 146 8.1.3 案例3设置表格边框颜色 147 8.2 美化表单样式 148 8.2.1 案例4美化表单中的元素 148 8.2.2 案例5美化提交按钮 150 8.2.3 案例6美化下拉菜单 151 8.3 综合案例1制作用户登录页面 153 8.4 综合案例2制作用户注册页面 155 8.5 大神解惑 157 8.6 跟我练练手 158 第9章 设计列表和菜单样式 159 9.1 美化项目列表的样式 160 9.1.1 案例1美化无序列表 160 9.1.2 案例2美化有序列表 161 9.1.3 案例3美化自定义列表 163 9.1.4 案例4制作图片列表 164 9.1.5 案例5缩进图片列表 165 9.1.6 案例6列表复合属性 166 9.2 使用CSS制作网页菜单 168 9.2.1 案例7制作动态导航菜单 168 9.2.2 案例8制作水平和垂直菜单 170 9.3 综合案例1模拟SOSO导航栏 172 9.4 综合案例2将段落转变成列表 175 9.5 大神解惑 177 9.6 跟我练练手 177 第10章 使用滤镜美化网页元素 179 10.1 滤镜概述 180 10.2 设置基本滤镜效果 181 10.2.1 案例1高斯模糊(blur)滤镜 181 10.2.2 案例2明暗度(brightness)滤镜 182 10.2.3 案例3对比度(contrast)滤镜 183 10.2.4 案例4阴影(drop-shadow)滤镜 184 10.2.5 案例5灰度(grayscale)滤镜 185 10.2.6 案例6反相(invert)滤镜 186 10.2.7 案例7透明度(opacity)滤镜 187 10.2.8 案例8饱和度(saturate)滤镜 188 10.2.9 案例9深褐色(sepia)滤镜 189 10.3 使用复合滤镜效果 190 10.4 大神解惑 191 10.5 跟我练练手 191 第III篇 高 级 应 用 第11章 CSS3的高级特性 195 11.1 复合选择器 196 11.1.1 案例1全局选择器 196 11.1.2 案例2交集选择器 197 11.1.3 案例3并集选择器 197 11.1.4 案例4继承(后代)选择器 198 11.2 CSS3新增的选择器 199 11.2.1 案例5属性选择器 199 11.2.2 案例6结构伪类选择器 201 11.2.3 案例7UI元素状态伪类选择器 202 11.2.4 案例8伪类选择器 204 11.3 CSS3的继承特性 205 11.3.1 案例9继承关系 205 11.3.2 案例10CSS继承的运用 206 11.4 CSS3的层叠特性 207 11.4.1 案例11同一选择器被多次定义的处理 207 11.4.2 案例12同一标签运用不同类型选择器的处理 208 11.5 综合案例制作新闻菜单 209 11.6 大神解惑 212 11.7 跟我练练手 212 第12章 过渡和动画效果 213 12.1 认识过渡效果 214 12.2 案例1添加过渡效果 214 12.3 了解动画效果 217 12.4 案例2添加动画效果 218 12.5 大神解惑 219 12.6 跟我练练手 220 第13章 2D和3D变幻效果 221 13.1 认识2D转换效果 222 13.2 添加2D转换效果 222 13.2.1 案例1添加移动效果 222 13.2.2 案例2添加旋转效果 223 13.2.3 案例3添加缩放效果 224 13.2.4 案例4添加倾斜效果 225 13.2.5 案例5添加综合变幻效果 227 13.3 添加3D转换效果 228 13.4 大神解惑 230 13.5 跟我练练手 230 第14章 CSS3和JavaScript的搭配应用 231 14.1 JavaScript语法基础 232 14.1.1 什么是JavaScript 232 14.1.2 数据类型 232 14.1.3 变量 234 14.1.4 案例1运算符的简单应用 234 14.1.5 案例2流程控制语句的简单应用 237 14.1.6 案例3函数的简单应用 240 14.2 常见的JavaScript编写工具 243 14.2.1 记事本编写工具 243 14.2.2 Dreamweaver编写工具 244 14.3 JavaScript在HTML中的使用 244 14.3.1 案例4在HTML网页头中嵌入JavaScript代码 245 14.3.2 案例5在HTML网页中嵌入JavaScript代码 246 14.3.3 案例6在HTML网页的元素事件中嵌入JavaScript代码 247 14.3.4 案例7在HTML中调用已经存在的JavaScript文件 248 14.3.5 案例8通过JavaScript伪URL引入JavaScript脚本代码 249 14.4 JavaScript与CSS3的结合使用 250 14.4.1 案例9设置动态内容 250 14.4.2 案例10改变动态样式 251 14.4.3 案例11动态定位网页元素 252 14.4.4 案例12设置网页元素的显示与隐藏 254 14.5 HTML5、CSS3和JavaScript的搭配应用 255 14.5.1 案例13设定左右移动的图片 256 14.5.2 案例14制作颜色选择器 258 14.5.3 案例15制作跑马灯效果 260 14.6 综合案例制作树形导航菜单 262 14.7 大神解惑 267 14.8 跟我练练手 268 第15章 CSS与XML的综合运用 269 15.1 XML语法基础 270 15.1.1 实例1XML的基本应用 270 15.1.2 实例2XML文档的组成和声明 271 15.1.3 实例3XML元素介绍 272 15.2 使用CSS修饰XML文件 274 15.2.1 实例4XML使用CSS 274 15.2.2 实例5设置字体属性 275 15.2.3 实例6设置色彩属性 276 15.2.4 实例7设置边框属性 277 15.2.5 实例8设置文本属性 278 15.3 综合实例1招聘广告 279 15.4 综合实例2图文混排页面 281 15.5 综合实例3古诗欣赏 283 15.6 大神解惑 286 15.7 跟我练练手 286 第IV篇 网 页 布 局 第16章 CSS定位与DIV 布局核心技术 289 16.1 认识块级元素和行内级元素 290 16.1.1 案例1块级元素和行内级元素的应用 290 16.1.2 案例2div元素和span元素的区别 292 16.2 盒子模型 292 16.2.1 盒子模型的概念 293 16.2.2 案例3定义网页border区域 293 16.2.3 案例4定义网页padding区域 295 16.2.4 案例5定义网页margin区域 296 16.3 弹性盒模型 299 16.3.1 案例6定义盒子布局方向(box-orient) 300 16.3.2 案例7定义盒子布局顺序(box-direction) 301 16.3.3 案例8定义盒子布局位置(box-ordinal-group) 303 16.3.4 案例9定义盒子弹性空间(box-flex) 304 16.3.5 案例10管理盒子空间(box-pack和box-align) 306 16.3.6 案例11盒子空间的溢出管理(box-lines) 307 16.4 综合案例1图文排版效果 308 16.5 综合案例2淘宝导购菜单 310 16.6 大神解惑 313 16.7 跟我练练手 314 第17章 CSS DIV盒子的浮动与定位 315 17.1 定义DIV 316 17.1.1 什么是DIV 316 17.1.2 案例1创建DIV 316 17.2 盒子的定位 317 17.2.1 案例2静态定位 317 17.2.2 案例3相对定位 318 17.2.3 案例4绝对定位 319 17.2.4 案例5固定定位 320 17.2.5 案例6盒子的浮动 321 17.3 其他CSS布局定位方式 323 17.3.1 案例7溢出(overflow)定位 323 17.3.2 案例8隐藏(visibility)定位 325 17.3.3 案例9z-index空间定位 327 17.4 新增CSS3多列布局 328 17.4.1 案例10设置列宽度 328 17.4.2 案例11设置列数 330 17.4.3 案例12设置列间距 331 17.4.4 案例13设置列边框样式 332 17.5 综合案例1定位网页布局样式 334 17.6 综合案例2制作阴影文字效果 337 17.7 大神解惑 338 17.8 跟我练练手 338 第18章 固定宽度网页布局剖析与制作 339 18.1 CSS排版的观念 340 18.1.1 将页面用div分块 340 18.1.2 设置各块位置 340 18.1.3 案例1用CSS定位 341 18.2 固定宽度网页剖析与布局 344 18.2.1 案例2网页单列布局模式 344 18.2.2 案例3网页1-2-1”型布局模式 348 18.2.3 案例4网页1-3-1”型布局模式 350 18.3 大神解惑 354 18.4 跟我练练手 354 第19章 自动缩放网页布局剖析与制作 355 19.1 自动缩放网页1-2-1”型布局模式 356 19.1.1 案例11-2-1”等比例变宽布局 356 19.1.2 案例21-2-1”单列变宽布局 357 19.2 自动缩放网页1-3-1”型布局模式 358 19.2.1 1-3-1”三列宽度等比例布局 358 19.2.2 案例31-3-1”单侧列宽度固定的变宽布局 358 19.2.3 案例41-3-1”中间列宽度固定的变宽布局 361 19.2.4 案例51-3-1”双侧列宽度固定的变宽布局 365 19.2.5 案例61-3-1”中列和左侧列宽度固定的变宽布局 368 19.3 分列布局背景色的使用 371 19.3.1 案例7设置固定宽度布局的列背景色 372 19.3.2 案例8设置特殊宽度变化布局的列背景色 373 19.4 综合案例1单列宽度变化布局 374 19.5 综合案例2多列等比例宽度变化布局 376 19.6 大神解惑 378 19.7 跟我练练手 378 第20章 创建响应式页面 379 20.1 了解弹性盒子 380 20.2 案例1使用弹性盒子 380 20.3 案例2设置弹性子元素的位置 383 20.4 案例3设置弹性子元素的横向对齐方式 384 20.5 案例4设置弹性子元素的纵向对齐方式 389 20.6 案例5设置弹性子元素的换行方式 390 20.7 综合案例使用弹性盒子创建响应式页面 393 20.8 大神解惑 395 20.9 跟我练练手 396 第V篇 项目案例实战 第21章 设计商业门户类网页 399 21.1 整体设计 400 21.1.1 颜色应用分析 400 21.1.2 架构布局分析 400 21.2 主要模块设计 401 21.2.1 网页整体样式插入 401 21.2.2 网页局部样式 403 21.2.3 顶部模块样式代码分析 410 21.2.4 中间主体代码分析 411 21.2.5 底部模块分析 414 21.3 网站调整 415 21.3.1 部分内容调整 415 21.3.2 模块调整 415 21.3.3 调整后预览测试 417 第22章 设计图像影音类网页 419 22.1 整体设计 420 22.1.1 颜色应用分析 420 22.1.2 架构布局分析 421 22.2 主要模块设计 422 22.2.1 样式代码分析 422 22.2.2 顶部模块样式代码分析 425 22.2.3 网站主体模块代码分析 427 22.2.4 底部模块分析 430 22.3 网站调整 431 22.3.1 部分内容调整 431 22.3.2 模块调整 432 22.3.3 调整后预览测试 435 第23章 设计娱乐休闲类网页 437 23.1 整体设计 438 23.1.1 应用设计分析 438 23.1.2 架构布局分析 439 23.2 主要模块设计 440 23.2.1 网页整体样式插入 440 23.2.2 顶部模块代码分析 441 23.2.3 视频模块代码分析 442 23.2.4 评论模块代码分析 443 23.2.5 热门推荐模块代码分析 444 23.2.6 底部模块分析 446 23.3 网页调整 446 23.3.1 部分内容调整 446 23.3.2 调整后预览测试 448 第24章 设计企业门户类网页 449 24.1 构思布局 450 24.1.1 设计分析 450 24.1.2 排版架构 450 24.2 主要模块设计 451 24.2.1 Logo与导航菜单 451 24.2.2 Banner区 452 24.2.3 资讯区 453 24.2.4 版权信息 455 第25章 设计在线购物类网页 457 25.1 整体布局 458 25.1.1 设计分析 458 25.1.2 排版架构 458 25.2 主要模块设计 459 25.2.1 Logo与导航区 459 25.2.2 Banner与资讯区 460 25.2.3 产品类别区域 462 25.2.4 页脚区域 463 |