1、第1章 HTML5+CSS3初体验响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第2版）学习目标/Target 了解HTML5和CSS3的优势 掌握HTML5的基本语法和语义化标签 熟悉CSS的基本使用 掌握CSS3边框、背景、阴影和渐变的设置章节概述/Summary十几年前，人们开始用计算机在互联网上查询信息、社交、购物；几年前，大多数人变成了低头一族，移动互联网让人们依靠一部智能手机，就能够在一个陌生的城市找到自己想去的任何地方。那么，在这样一个移动互联网的时代，若要制作出一个符合实际需要的网页，HTML5+CSS3技术是我们必须要掌握的。本章将带大家走进HTML5
2、+CSS3的世界。目录/Contents01020304HTML5和CSS3的优势CSS的基本使用项目【1-1】三栏布局页面HTML5的基本使用目录/Contents05060708CSS3边框属性CSS3背景设置CSS3阴影和渐变【项目1-2】许愿墙HTML5和CSS3的优势1.1 先定一个小目标！了解HTML5的优势，能够说出HTML5的三大优势1.1.1 HTML5的优势1.1.1 HTML5的优势HTML5不仅仅是HTML规范的当前最新版本，也代表了一系列Web相关技术的总称，它把代码重复率很高的功能提取为、标签等，它的核心理念是将一切新特性与原有功能保持平滑过渡，HTML5的优势：进
3、化而非颠覆化繁为简良好的用户体验HTML5进化的重大意义还在于，它从技术层面带来了8个类别的革新：1.语义网（Semantics）：提供了一组丰富的语义化标签。2.离线&存储（Ofline&Storage）：HTML5 App Cache、Local Storage、Indexed DB和File API使Web应用程序更加迅速，并提供了离线使用的能力。3.设备访问（Device Access）：增强了设备感知能力，使得Web应用在电脑、Pad、手机上均能使用。4.通信（Connectivity）：增强了通信能力，意味着增强了聊天程序的实时性和网络游戏的顺畅性。5.多媒体（Multimedia
4、）：音频视频能力的增强是HTML5的最大突破。6.图形和特效（3D,Graphics&Effects）：Canvas、SVG和WebGL等功能使得图形渲染更高效、页面效果更加炫酷。7.性能和集成（Performance&Integration）：Web Worker使浏览器可以多线程处理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能。8.呈现（CSS3）：CSS3可以很高效地实现页面特效，并不会影响页面的语义和性能。1.1.1 HTML5的优势1.1.1 HTML5的优势HTML5以“简单至上，尽可能简化”为原则做了改进，具体介绍如下：1.简化了DOCTYPE和字符集声明。2
5、.强化了HTML5 API，使页面设计更加简单。3.以浏览器的原生能力代替复杂的JavaScript代码。4.精确定义的错误恢复机制，如果页面中有错误，也不会影响整个页面的显示。1.1.1 HTML5的优势HTML5以“用户至上”为宗旨，具体介绍如下：1.在遇到冲突时，规范的优先级为：用户 页面作者 实现者（浏览器）规范开发者（W3C/WHATWG）纯理论。2.HTML5还引入了一种新的安全模型来保证HTML5足够安全。3.各大浏览器对HTML5的支持正在不断完善，越来越多的开发者尝试在项目中使用HTML5。先定一个小目标！了解CSS3的优势，能够说出CSS3的两大优势1.1.2 CSS3的优
6、势1.1.2 CSS3的优势CSS即层叠样式表（Cascading Style Sheets），主要用于设置HTML页面中的各种元素的样式。CSS3是目前CSS规范的最新版本，CSS3的优势：节约成本提高性能1.1.2 CSS3的优势关于CSS3节约成本和提高性能，具体介绍如下：1.在老版本的CSS中，这些功能都需要大量的代码或复杂的操作来完成，有些动画功能还涉及JavaScript脚本。2.CSS3的新功能帮我们摒弃了冗余的代码结构。3.远离很多JavaScript脚本或者Flash代码。4.网页设计者不再需要花大把时间去写脚本，极大地节约了开发成本。5.在进行网页设计时，减少了标签的嵌套和
7、图片的使用数量，网页页面加载也会更快。6.此外，减少图片、脚本代码，Web站点就会减少HTTP请求数。7.页面加载速度和网站的性能就会得到提升。HTML5的基本使用1.2 先定一个小目标！掌握HTML5的基本语法，能够使用基本语法定义HTML5标准模板1.2.1 HTML5的基本语法1.2.1 HTML5的基本语法 网页标题 HTML文档是由多种标签组成，HTML5的标准模板：内嵌式用于向浏览器说明当前文档使用的HTML版本标志着HTML文档的开始标志着HTML文档的结束用于定义HTML文档的头部信息用来描述HTML文档的属性用于对代码进行解释用于定义HTML文档所要呈现的内容 先定一个小目标
8、！掌握HTML5语义化标签，能够使用定义页面中的头部区域1.2.2 HTML5语义化标签1.2.2 HTML5语义化标签标签名描述表示页面中一个内容区块或整个页面的标题页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分，可以和h1、h2元素结合起来使用，表示文档结构表示页面中一块与上下文不相关的独立内容，如一篇文章HTML5常用的语义化标签HTML5定义了一种新的语义化标签来描述元素的内容，让很多更语义化的结构化代码标签代替大量无意义的标签，具体如下。标签名描述表示标签内容之外的、与标签内容相关的辅助信息表示对整个页面或页面中的一个内容区块的标题进行组合表示一段独立的流内容，一般表示文档
9、主体流内容中的一个独立单元定义标签的标题表示页面中导航链接的部分表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期及联系方式HTML5常用的语义化标签1.2.2 HTML5语义化标签传统方式布局与HTML5语义化标签布局的对比，传统方式布局：采用DIV+CSS布局页面1.2.2 HTML5语义化标签HTML5语义化标签布局：采用HTML5新标签布局页面1.2.2 HTML5语义化标签CSS的基本使用1.3 先定一个小目标！熟悉CSS的引入方式，能够说出CSS的2种引入方式1.3.1 CSS的引入方式CSS的引入方式有3种，分别是行内式、内嵌式和嵌入式。行内式是通过
10、标签的style属性来设置元素的样式。1.3.1 CSS的引入方式 内容属性名与属性值之间使用分号隔开基本语法格式行内式的简单使用：使用color属性设置文本颜色为红色，font-size属性设置文本大小为24px。1.3.1 CSS的引入方式 文本设置字体颜色和大小内嵌式是将CSS代码集中写在HTML文档的头部标签中，并且用标签定义。1.3.1 CSS的引入方式 选择器 属性1:属性值1;属性2:属性值2;属性3:属性值3 基本语法格式内嵌式的简单使用：在标签中，获取到p元素，设置p元素的样式。1.3.1 CSS的引入方式 p color:red;font-size:24px 设置字体颜色和
11、大小1.3.1 CSS的引入方式链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中。标签将外部样式表文件链接到HTML文档中，其基本语法格式。定义所链接外部样式表文件的URLstylesheet表示被链接的文档是一个样式表文件text/css表示链接的外部文件为CSS样式表 先定一个小目标！熟悉选择器，能够列举5种基本选择器1.3.2 选择器1.3.2 选择器选择器用法示例代码说明通用选择器*选择所有元素标签选择器元素名称a、body、p根据标签选择元素常用的基本选择器CSS中的选择器的种类非常多，并且在CSS3中也新增了一些选择器，使选择器的功能更强大，具体如下。1.3.
12、2 选择器选择器用法示例代码说明类选择器.beam根据class的值选择元素id选择器#logo根据id的值选择元素属性选择器href、attr=val根据属性选择元素常用的基本选择器1.3.2 选择器选择器用法示例代码说明并集选择器,em,strong同时匹配多个选择器，取多个选择器的并集后代选择器.aside li先匹配第2个选择器的元素，并且属于第1个选择器内子代选择器.beam匹配第2个选择器，且为第1个选择器的元素的后代兄弟选择器+p+a匹配紧跟第1个选择器，并匹配第2个选择器内的元素，如紧跟p元素后的a元素常用的基本选择器1.3.2 选择器选择器描述:first-line匹配文本块
13、的首行，如p:first-line表示选中p元素的首行:first-letter匹配文本内容的首字母:before在选中元素的内容之前插入内容:after在选中元素的内容之后插入内容常用的伪元素选择器1.3.2 选择器选择器描述:root选择文档中的根元素，通常返回html:first-child父元素的第一个子元素:last-child父元素的最后一个子元素:only-child父元素有且只有一个子元素:only-of-type父元素有且只有一个指定类型的元素常用的伪类选择器1.3.2 选择器选择器描述:nth-child(n)匹配父元素的第n个子元素:nth-last-child(n)匹配
14、父元素的倒数第n个子元素:nth-of-type(n)匹配父元素定义类型的第n个子元素:nth-last-of-type(n)匹配父元素定义类型的倒数n个子元素:link匹配链接元素常用的伪类选择器1.3.2 选择器选择器描述:visited匹配用户已访问的链接元素:hover匹配处于鼠标悬停状态下的元素:active匹配处于被激活状态下的元素，包括即将单击（按压）:focus匹配处于获得焦点状态下的元素:enabled(:disabled)匹配启用（禁用）状态的元素常用的伪类选择器1.3.2 选择器选择器描述:checked匹配被选中的单选按钮和复选框的input元素:default匹配默认
15、元素:valid(:invalid)根据输入数据验证，匹配有效（无效）的input元素:in-range(out-of-range)匹配在指定范围之内（之外）受限的input元素常用的伪类选择器1.3.2 选择器STEP 01定义课程列表结构在chapter01目录下新建demo01.html文件，编写HTML代码。JavaEE教程 （此处省略多个li）1.3.2 选择器 /*设置偶数行背景颜色透明度为0.9*/li:nth-of-type(2n)background-color:rgba(0,0,0,0.5)/*鼠标悬停时背景颜色为#0099E5*/li:hover background:#
16、0099E5 /*设置超链接的样式*/a text-decoration:none;display:block;color:#fff;height:35px;padding:0 38px 定义课程列表样式在demo01.html文件中，编写CSS代码。STEP 021.3.2 选择器运行程序在浏览器中查看demo01.html文件运行结果。STEP 03demo01.html运行结果 先定一个小目标！熟悉盒子模型，能够使用margin-top设置元素的顶部外边距1.3.3 盒子模型1.3.3 盒子模型盒子模型就是把HTML页面中的元素视为一个矩形区域，即元素的盒子。盒子由margin（外边距）
17、、border（边框）、padding（内边距）和content（内容）4部分组成：盒子的各属性1.3.3 盒子模型属性描述margin简写属性，在一个声明中设置所有外边距（上、右、下、左）margin-top设置元素的上外边距margin-right设置元素的右外边距margin-bottom设置元素的下外边距margin-left设置元素的左外边距margin相关的属性1.3.3 盒子模型margin设置外边距：/*设置上边距为25px、右边距为50px、下边距为75px、左边距为100px*/margin:25px 50px 75px 100px;/*设置上边距为25px、左右边距为50
18、px、下边距为75px*/margin:25px 50px 75px;/*设置上下边距为25px、左右边距为50px*/margin:25px 50px;/*设置4个方向的边距都为25px*/margin:25px设置外边距的书写方式1.3.3 盒子模型STEP 01定义类名为div1的标签在chapter01目录下新建demo02.html文件，编写HTML代码。盒子模型 1.3.3 盒子模型 .div1 background-color:#eee;width:200px;height:200px;/*设置上外边距的值为50px，设置padding的值为10px*/margin-top:50
19、px;padding:10px;/*设置边框为1px、黑色、实线*/border:1px solid#000 STEP 02定义.div1样式在demo02.html文件中，编写CSS代码。1.3.3 盒子模型在网页制作时，关于多个盒子之间需要注意的问题，具体如下。1.相邻块级元素的垂直外边距合并：以上下相邻的块元素为例，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。2.嵌套块级元素的垂直外边距合并：如果父元素没有上内边距和边框，则父元素与子元素的上外边距合并为较大者。外边距合并1.3.3 盒子模型STEP 03运行程序在浏览器中查看demo02.html文件，并
20、按【F12】键打开开发者工具，切换到Elements（元素）选项卡。查看div元素的样式 先定一个小目标！熟悉浮动与定位，能够分别使用float和position实现元素的左浮动和相对定位1.3.4 浮动与定位1.3.4 浮动与定位属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）float的常用属性值CSS的浮动和定位可以改变元素的排列方式，使网页内容变得丰富多彩。CSS的浮动可以通过float属性进行设置。1.3.4 浮动与定位1.CSS允许任何元素浮动，不论是列表、段落还是图像。无论元素先前是什么状态，浮动后都成为块级元素，浮动元素的宽度缺省为auto。2.
21、浮动元素的外边缘不会超过其父元素的内边缘。3.如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块（没有足够的空间），则它下降到低于先前任何浮动元素的位置，即换行显示。浮动特点1.3.4 浮动与定位position属性可以让网页中的某个元素在网页的特定位置出现，如弹出菜单。position:relative;left:30px;/*距左边线30px*/top:10px;/*距顶部边线10px*/相对定位方式基本语法格式1.3.4 浮动与定位属性值描述static静态定位（默认定位方式）relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相当于static定位
22、以外的第一个上级元素进行定位fixed固定定位，相对于浏览器窗口进行定位设置定位方式的常用属性值1.3.4 浮动与定位属性值描述top顶端偏移量，定义元素相对于其参照元素上边线的距离bottom底部偏移量，定义元素相对于其参照元素下边线的距离left左侧偏移量，定义元素相对于其参照元素左边线的距离right右侧偏移量，定义元素相对于其参照元素右边线的距离设置元素具体位置的常用属性值1.3.4 浮动与定位重叠是当一个父元素中的多个子元素同时被定位时，定位元素之间有可能会发生：定位元素发生重叠1.3.4 浮动与定位显示器显示的图案是一个二维平面，使用x轴和y轴来表示位置属性。二维平面1.3.4 浮
23、动与定位z-index属性表示Z轴的深度，它表示三维立体的概念，多个定位子元素的上下层的立体关系。可以控制定位元素在垂直于显示屏方向（z轴）上的堆叠顺序值大的元素发生重叠时会在值小的元素上面，其取值可为正整数、负整数和0，默认值为0。只能在position属性值为relative、absolute 或fixed的元素上有效。z-index值越大的元素越靠近用户。三维空间【项目1-1】三栏布局页面1.4 先定一个小目标！掌握三栏布局页面的实现，能够通过编程实现头部和底部区域的页面效果1.4.1 项目分析1.4.1 项目分析项目展示三栏布局是一种常用的网页布局结构。当浏览器窗口的宽度发生变化时，页
24、面中左侧边栏和右侧边栏的宽度固定不变，而内容区域的宽度会随着浏览器窗口宽度大小的变化而变化。1.4.1 项目分析三栏布局页面效果三栏布局页面效果：结构分析该页面分为头部区域、底部区域和中间的区域（主体区域），其中，中间的区域由左侧边栏、内容区域和右侧边栏组成。l 使用标签制作头部区域，并为头部区域设置样式。l 使用标签分别制作左侧边栏和右侧边栏，并为左、右侧边栏设置样式。l 使用标签制作底部区域，并为底部区域设置样式。l 使用标签制作内容区域，并为内容区域设置样式。1.4.1 项目分析页面结构示意图1.4.1 项目分析搭建项目目录结构项目目录结构为了方便读者进行项目的搭建，在创建C:codec
25、hapter011-1文件目录下创建项目：l 1-1为项目目录，里面包含css文件，以及index.html项目入口文件。l css文件目录里存放style.css，用于设置自定义样式。1.4.2 编写头部和底部区域STEP 01定义、等标签在chapter011-1目录下新建index.html文件，编写HTML代码。头部区域 底部区域1.4.2 编写头部和底部区域STEP 02定义、等标签的样式在index.html文件中，编写CSS代码。html,body,h4,p padding:0;margin:0;text-align:center;font-size:16pxheader,foo
26、ter height:25px.main border-top:1px solid#ccc;border-bottom:1px solid#ccc1.4.2 编写头部和底部区域STEP 03运行程序在浏览器中打开index.html文件运行结果。头部和底部区域效果1.4.3 编写主体区域STEP 04实现主体区域的基本页面结构在index.html文件，编写HTML代码。左侧边栏 内容区域 右侧边栏1.4.3 编写主体区域STEP 05实现主体区域的基本页面样式在style.css文件中，编写CSS代码。.left background:#eee.middle background:#ddd.
27、right background:#eee1.4.3 编写主体区域STEP 06运行程序在浏览器中刷新页面运行结果。主体区域效果STEP 07实现左侧边栏页面样式在style.css文件中，为.main主体区域和.left左侧边栏分别添加CSS代码。.main （原有代码）padding:0 100px.left （原有代码）width:100px;position:absolute;left:0.main主体区域.left左侧边栏1.4.4 实现左侧边栏效果1.4.4 实现左侧边栏效果STEP 08运行程序在浏览器中刷新页面运行结果。将内容区域显示在中间1.4.4 实现左侧边栏效果将左侧边栏
28、显示在左侧左侧边栏显示效果：1.4.5 实现右侧边栏效果STEP 09实现右侧边栏的页面样式在style.css文件中，为.right添加样式代码，并修改.main中的HTML代码。.right （原有代码）width:100px;position:absolute;right:0 右侧边栏 内容区域.right右侧边栏.main中的HTML代码1.4.5 实现右侧边栏效果STEP 10运行程序在浏览器中刷新页面运行结果。将右侧边栏显示在右侧1.4.5 实现右侧边栏效果调整右侧边栏的位置右侧边栏显示效果：1.4.5 实现右侧边栏效果STEP 11实现三栏布局的最终效果在cssstyle.css
29、文件中添加CSS代码。.left,.right,.middle height:199px 设置左侧边栏、右侧边栏和内容区域的高度为199px1.4.6 项目总结通过本项目的练习，读者应该了解三栏布局页面的实现过程，熟练掌握HTML5页面结构和CSS定位在本项目中的简单运用。本项目的练习重点建议读者在编码时按照项目分析中的需求，先编写HTML5文件中的整体结构，主要包括header、footer、div、aside以及section标签。然后再使用CSS定位实现三栏布局结构。编写完成后保存文件，用浏览器打开页面，即可呈现出三栏布局页面效果。本项目的练习方法CSS3边框属性1.5 先定一个小目标！
30、掌握圆角边框，能够使用border-radius属性实现圆角边框效果1.5.1 圆角边框1.5.1 圆角边框传统方式制作圆角边框效果的过程:在元素标签中加上4个空标签。再在每个空标签中应用一个圆角的背景。然后对这几个应用了圆角的标签进行相应的定位。传统方式制作圆角边框效果的过程1.5.1 圆角边框CSS3的圆角边框实际上是在矩形的4个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度：矩形的内切圆半径1.5.1 圆角边框border-radius属性用来实现圆角边框效果非常简单。border-radius:14 length|%/14 length|%基本语法格式%表示可以写成百分比用于
31、设置对象的圆角半径长度，不可为负值。1.5.1 圆角边框border-radius属性的4个值是按照top-left、top-right、bottom-right和bottom-left的顺序来设置的，具体如下：l如果省略top-right，则其与top-left相同，其参数都是先y轴然后x轴。l如果省略bottom-left，则其与top-right相同。l如果省略bottom-right，则与 top-left相同。border-top-left-radius:/左上角border-top-right-radius:/右上角border-bottom-right-radius:/右下角bo
32、rder-bottom-left-radius:/左下角基本语法格式1.5.1 圆角边框STEP 01定义和标签在chapter01目录下新建demo03.html文件，编写HTML代码。圆角边框 1.5.1 圆角边框 section padding:10px div display:inline-block;padding:15px 25px;text-align:center;font-size:16px;border:2px solid#000;color:#000;background-color:#eee;border-radius:12px 定义和标签的样式在demo03.html
33、文件中，编写CSS代码。STEP 021.5.1 圆角边框运行程序在浏览器中打开demo03.html运行结果。STEP 03圆角按钮效果 先定一个小目标！掌 握 特 殊 边 框 效 果，能 够 使 用border-radius、border属性实现图案效果1.5.2 特殊边框效果1.5.2 特殊边框效果特殊边框效果利用border-radius和border属性可以实现特殊的边框效果：1.5.2 特殊边框效果STEP 01定义类名分别为border-radius和border-radius1的标签在chapter01目录下新建demo04.html文件，编写HTML代码。1.5.2 特殊边框
34、效果STEP 02定义.border-radiu和.border-radius1的样式在demo04.html文件中，编写CSS代码。body padding:0;background-color:#F7E7F7 div margin:20px;float:left .border-radius width:40px;height:40px;border:70px solid#93baff;border-radius:90px .border-radius1 width:0px;height:0px;border-width:90px;border-style:solid;border-col
35、or:#ff898e#93baff#c89386#ffb151 1.5.2 特殊边框效果STEP 03运行程序在浏览器中打开demo04.html文件。特殊边框效果1.5.2 特殊边框效果多学一招：浏览器私有前缀为不同内核的浏览器添加不同的私有前缀，从而区分不同的浏览器内核：l以-webkit-开头的样式，只有以Webkit为内核的浏览器可以解析，如Chrome、Safari。l以-moz-开头的样式，只有以Gecko为内核的浏览器可以解析，如Firefox。l以-ms-开头的样式，只有以Trident为内核的浏览器可以解析，如IE。l以-o-开头的样式，只有以Presto为内核的浏览器可以解
36、析，如Opera。CSS3背景设置1.6 先定一个小目标！掌握CSS3背景设置，能够使用background设置元素的背景效果1.6.1 什么是CSS3背景CSS3背景指的是通过CSS3为元素设置背景属性，如通过CSS3设置背景各种样式。CSS3背景1.6.1 什么是CSS3背景CSS3用于背景设置的常用属性属性名属性描述允许取值取值说明background-color设置背景色red，green，blue预定义的颜色值#FF0000，#FF6600，#29D794十六进制颜色值，也是最常用的定义颜色的方式rgba(255,0,0,0.5)或rgba(100%,0%,0%,0.5)r：红色值；
37、g：绿色值；b：蓝色值，rgb的取值可以是正整数也可以是百分数。a：透明度，取值01之间background-image 设置图片背景url(url)直接引用图片地址来设置图片作为对象背景1.6.2 CSS3背景的常用属性CSS3用于背景设置的常用属性属性名属性描述允许取值取值说明background-repeat 设置背景平铺重复方向repeat背景图像在纵向和横向上平铺no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺background-attachment 设置或检索背景图像是随对象内容滚动还是固定的scroll背景图像是随对象内容滚
38、动fixed背景图像固定1.6.2 CSS3背景的常用属性CSS3用于背景设置的常用属性属性名属性描述允许取值取值说明background-position 设置或检索对象的背景图像位置，语法为length|length或者position|position35%80%或35%2.5cm或top rightlength：百分数|由浮点数字和单位标识符组成的长度值。position：top|center|bottom|left|center|rightbackground-size规定背景图像的尺寸length第一个值设置宽度，第二个值设置高度。一个值时，第二个值会被设置为 autopercen
39、tage以父元素的百分比来设置背景图像的宽度和高度，用法同上cover背景图完全覆盖背景区域宽和高完全适应内容区域contain1.6.2 CSS3背景的常用属性选择器background:background-color|background-image|background-repeat|background-attachment|background-positionbackground属性的各个参数的含义，具体如下。background-color指定背景颜色background-image指定一个或多个背景图像background-repeat指定重复背景图像background-a
40、ttachment设置背景图像是否固定或者随着页面的其余部分滚动background-position指定背景图像的位置1.6.3 background的基本语法基本语法格式CSS3阴影和渐变1.7 先定一个小目标！掌握阴影，能够使用box-shadow实现盒子对象和图片对象的阴影效果1.7.1 阴影1.7.1 阴影对象选择器 box-shadow:X轴偏移量|Y轴偏移量|阴影模糊半径|阴影扩展半径|阴影颜色|投影方式text-shadow是对象的文本设置阴影。box-shadow是给对象实现图层阴影效果。基本语法格式1.7.1 阴影box-shadow属性取值说明参数类型取值说明投影方式此参
41、数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，其投影就是内阴影X轴偏移量是指阴影水平偏移量其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边Y轴偏移量是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部1.7.1 阴影box-shadow属性取值说明参数类型取值说明阴影模糊半径此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊阴影扩展半径此参数是可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值，
42、则缩小阴影颜色此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数STEP 01定义类名为box和box1的标签在chapter01目录下新建demo05.html文件，编写HTML代码。1.7.1 阴影 盒子对象阴影测试 DIV盒子内阴影 图片对象阴影测试 .box box-shadow:7px 4px 10px#000 inset;width:300px;height:80px .box1 img box-shadow:#000 7px 4px 10px 定义.box和
43、.img的阴影效果在demo05.html文件中，编写CSS代码。STEP 021.7.1 阴影水平阴影的位置7px；垂直阴影的位置4px；模糊距离10px；阴影的颜色为黑色；inset表示从外层的阴影（开始时）改变阴影内侧阴影；运行程序在浏览器中打开demo05.html运行结果。STEP 03盒子阴影1.7.1 阴影 先定一个小目标！掌握线性渐变，能够使用linear-gradient()实现图片的线性渐变效果1.7.2 线性渐变1.7.2 线性渐变background-image:linear-gradient(|,color stop,color stop,color stop*)渐变
44、是两种或多种颜色之间的平滑过渡。CSS3的渐变属性主要包括线性渐变、径向渐变和重复渐变。基本语法格式linear-gradient的参数取值说明参数类型取值说明表示渐变的角度，角度数的取值范围是0360deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变描述渐变线的起始点位置。它包含to和两个关键词：第1个指出水平位置left or right，第2个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的color stop用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100
45、%则表示该边界位于可视区域外。两个 color stop 之间的区域为颜色过渡区1.7.2 线性渐变STEP 01定义类名为rainbow-linear-gradient的标签在chapter01目录下新建demo06.html文件，编写HTML代码。1.7.2 线性渐变 .rainbow-linear-gradient width:460px;height:160px;background-image:linear-gradient(to right,#E50743 0%,#F9870F 15%,#E8ED30 30%,#3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,
46、#71378A 80%)定义标签的线性渐变效果在demo06.html文件中，编写CSS代码。STEP 021.7.2 线性渐变运行程序在浏览器中打开demo06.html运行结果。STEP 03CSS3线性渐变1.7.2 线性渐变 先定一个小目标！掌握径向渐变，能够使用radial-gradient()实现图片的径向渐变效果1.7.3 径向渐变1.7.3 径向渐变background-image:radial-gradient(圆心坐标,渐变形状,渐变大小,color stop,color stop,color stop*)CSS3中的径性向渐变通过background-image:radi
47、al-gradient(参数值);来设置。基本语法格式radial-gradient的参数取值说明参数类型取值说明圆心坐标可设置为x-offset y-offset，如10px 20px；或使用预设值center（默认值）用于设置放射的圆形坐标渐变形状circle圆形ellipse椭圆形，默认值1.7.3 径向渐变radial-gradient的参数取值说明参数类型取值说明渐变大小closest-side 或 contain 以距离圆心最近的边的距离作为渐变半径closest-corner以距离圆心最近的角的距离作为渐变半径farthest-side以距离圆心最远的边的距离作为渐变半径fart
48、hest-corner 或 cove以距离圆心最远的角的距离作为渐变半径1.7.3 径向渐变STEP 01定义类名为rainbow-radial-gradient的标签在chapter01目录下新建demo07.html文件，编写HTML代码。1.7.3 径向渐变 .rainbow-radial-gradient width:300px;height:300px;background-image:radial-gradient(100px,#ffe07b 15%,#ffb151 2%,#16104b 50%)定义标签的径向渐变效果在demo07.html文件中，编写CSS代码。STEP 021
49、.7.3 径向渐变运行程序在浏览器中打开demo07.html运行结果。STEP 03CSS3径向渐变1.7.3 径向渐变多学一招：重复渐变重复渐变需要添加“repeating-”前缀，具体语法格式：/*线性重复渐变*/repeating-linear-gradient(起始角度,color stop,color stop,color stop*)/*径向重复渐变*/repeating-radial-gradient(圆心坐标,渐变形状，渐变大小,color stop,color stop,color stop*)1.7.3 径向渐变【项目1-2】许愿墙1.8 先定一个小目标！掌握许愿墙的实现
50、，能够通过编程实现许愿墙的页面结构1.8.1 项目分析1.8.1 项目分析项目展示在生活中，许愿墙是一种承载愿望的实体，来源于“许愿树”的习俗。后来人们逐渐改变观念，开始将愿望写在小纸片上，然后贴在墙上，这就是许愿墙。随着互联网的发展，人们又将许愿墙搬到了网络上，通过网站上的一个空间页面，来发表和展示愿望。许愿墙页面效果许愿墙页面效果：1.8.1 项目分析结构分析该页面由、和等标签构成的。l 使用、和等标签实现页面结构。l 使用圆角边框、背景颜色渐变来实现页面的效果。页面结构示意图1.8.1 项目分析STEP 01定义、和等标签在chapter011-2目录下新建index.html文件，编写
