响应式Web开发项目教程整本书电子教案全书教学教程教学课件.pptx

2021/8/21,#,单击此处编辑标题,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,2021/8/21,#,单击此处编辑标题,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,2021/8/21,#,单击此处编辑标题,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,2021/8/21,#,单击此处编辑标题,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/8/21,#,第,1,章,HTML5+CSS3初体验,响应式,Web,开发项目教程（,HTML5+CSS3+Bootstrap,）（第,2,版）,学习目标,/,Target,了解,HTML5,和,CSS3,的,优势,掌握,HTML5,的,基本语法和语义化标签,熟悉,CSS,的,基本使用,掌握,CSS3,边框、背景、阴影和渐变的,设置,章节概述,/,Summary,十,几年前，人们开始用计算机在互联网上查询信息、社交、购物；几年前，大多数人变成了低头一族，移动互联网让人们依靠一部智能手机，就能够在一个陌生的城市找到自己想去的任何地方。那么，在这样一个,移动互联网,的时代，若要制作出一个符合实际需要的网页，,HTML5+CSS3,技术,是我们必须要掌握的。本章将带大家走进,HTML5+CSS3,的世界。,目录,/,Contents,01,02,03,04,HTML5,和,CSS3,的,优势,CSS,的,基本使用,项目,【1-1】,三栏布局页面,HTML5,的,基本使用,目录,/,Contents,05,06,07,08,CSS3,边框属性,CSS3,背景设置,CSS3,阴影和渐变,【,项目,1-2】,许愿墙,HTML5,和,CSS3,的优势,1.1,先定一个,小目标！,了解,HTML5,的优势,，能够说出,HTML5,的三大优势,1.1.1 H,TML5,的优势,1.1.1 H,TML5,的优势,HTML5,不仅仅是,HTML,规范的当前最新版本，也代表了一系列,Web,相关技术的总称，它把代码重复率很高的功能提取为,、,标签,等，它的,核心理念,是将一切新特性与原有功能保持,平滑过渡,，,HTML5,的,优势：,进化而非颠覆,化繁为简,良好的用户体验,HTML5,进化的重大意义还在于，它从技术层面带来了,8,个类别的革新,：,语义网,（,Semantics,）：提供了一组丰富的语义化标签。,离线,&,存储,（,Ofline&Storage,）：,HTML5 App Cache,、,Local Storage,、,Indexed DB,和,File API,使,Web,应用程序更加迅速，并提供了离线使用的能力。,设备访问,（,Device Access,）：增强了设备感知能力，使得,Web,应用在电脑、,Pad,、手机上均能使用。,通信,（,Connectivity,）：增强了通信能力，意味着增强了聊天程序的实时性和网络游戏的顺畅性。,多媒体,（,Multimedia,）：音频视频能力的增强是,HTML5,的最大突破。,图形和特效,（,3D,Graphics&Effects,）：,Canvas,、,SVG,和,WebGL,等功能使得图形渲染更高效、页面效果更加炫酷。,性能和集成,（,Performance&Integration,）：,Web Worker,使浏览器可以多线程处理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能。,呈现,（,CSS3,）：,CSS3,可以很高效地实现页面特效，并不会影响页面的语义和性能。,1.1.1 H,TML5,的优势,1.1.1 H,TML5,的优势,HTML5,以“简单至上，尽可能简化”为原则,做了改进,，具体介绍如下,：,简化了,DOCTYPE,和字符集,声明。,强化了,HTML5 API,，使页面设计更加,简单。,以浏览器的原生能力代替,复杂的,JavaScript,代码。,精确定义的错误恢复,机制,，如果页面中有错误，也不会影响整个页面的显示。,1.1.1 H,TML5,的优势,HTML5,以“用户至上”为宗旨,，具体介绍如下,：,在遇到冲突时，,规范的优先级,为：用户,页面作者,实现者（浏览器）,规范开发者（,W3C/WHATWG,）,纯理论。,HTML5,还引入了一种新的安全模型来保证,HTML5,足够,安全,。,各大浏览器对,HTML5的支持,正在不断完善，越来越多的开发者尝试在项目中使用,HTML5,。,先定一个,小目标！,了解,CSS3,的优势,，能够说出,CSS3,的两大优势,1.1.2 CSS3,的优势,1.1.2 CSS3,的优势,CSS即层叠样式表（,Cascading Style Sheets,），主要用于设置,HTML,页面中的各种元素的样式。CSS3是目前,CSS,规范的最新版本,，,CSS3的优势：,节约成本,提高性能,1.1.2 CSS3,的优势,关于,CSS3,节约成本和,提高性能,，具体介绍如下,：,在老版本的,CSS,中，这些功能都需要,大量,的代码或复杂的操作来完成，有些动画功能还涉及,JavaScript,脚本。,CSS3,的新功能帮我们摒弃了,冗余,的代码结构。,远离很多,JavaScript,脚本或者,Flash,代码。,网页设计者不再需要花大把,时间,去写脚本，极大地节约了开发成本。,在进行网页设计时，减少了标签的嵌套和图片的使用数量，网页页面加载也会,更快,。,此外，减少图片、脚本代码，,Web,站点就会,减少,HTTP,请求数。,页面加载速度和网站的,性能,就会得到提升。,HTML5,的基本使用,1.2,先定一个,小目标！,掌握,HTML5,的基本语法,，能够使用基本语法定义,HTML5,标准模板,1.2.1 HTML5,的基本语法,1.2.1 HTML5,的基本语法,网页标题,HTML,文档是由多种标签组成,，,HTML5,的,标准模板,：,内嵌式,用于向浏览器说明当前文档使用的,HTML,版本,标志着,HTML,文档的开始,标志着,HTML,文档的,结束,用于定义,HTML,文档的头部信息,用来描述,HTML,文档的属性,用于对代码进行解释,用于定义,HTML,文档所要呈现的内容,先定一个,小目标！,掌握,HTML5,语义化标签,，能够使用,定义页面中的头部区域,1.2.2 HTML5,语义化标签,1.2.2 HTML5,语义化标签,标签名,描述,表示页面中一个内容区块或整个页面的标题,页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分，可以和,h1,、,h2,元素结合起来使用，表示文档结构,表示页面中一块与上下文不相关的独立内容，如一篇文章,HTML5,常用的语义化标签,HTML5定义了一种,新的语义化标签,来描述元素的内容，让很多更语义化的结构化代码标签代替大量无意义的标签，具体如下。,标签名,描述,表示,标签内容之外的、与,标签内容相关的辅助信息,表示对整个页面或页面中的一个内容区块的标题进行组合,表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元,定义,标签的标题,表示页面中导航链接的部分,表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期及联系方式,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,种，分别是行内式、内嵌式和嵌入式,。,行内式,是通过标签的,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,设置字体颜色和大小,1.3.1 CSS,的引入方式,链,入式,是将所有的样式放在一个或多个以,.css,为扩展名的外部样式表文件中,。,标签,将外部样式表文件链接到,HTML,文档中，其基本语法格式。,定义所链接外部样式表文件的,URL,stylesheet表示被链接的文档是一个样式表文件,text/css,表示链接的外部文件为,CSS,样式表,先定一个,小目标！,熟悉,选择器,，能够列举,5,种基本选择器,1.3.2,选择器,1.3.2,选择器,选择器,用法,示例代码,说明,通用选择器,*,*,选择所有元素,标签选择器,元素名称,a,、,body,、,p,根据标签选择元素,常用的基本选择器,CSS中的,选择器,的种类非常多，并且在CSS3中也新增了一些选择器，使选择器的功能更强大,，具体如下。,1.3.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,匹配文本块的首行，如,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),匹配父元素的倒数第,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,匹配默认元素,: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:hoverbackground:#0099E5,/*,设置超链接的样式,*/,a,text-decoration:none;display:block;,color:#fff;height:35px;padding:038px,定义课程列表样式,在,demo01.html,文件中，编写,CSS,代码。,STEP 02,1.3.2,选择器,运行程序,在浏览器,中,查看,demo01.html,文件运行结果。,STEP 03,demo01.html,运行结果,先定一个,小目标！,熟悉,盒子模型,，能够使用,margin-top,设置元素的顶部外边距,1.3.3,盒子模型,1.3.3,盒子模型,盒子模型,就是把,HTML,页面中的元素视为一个矩形区域，即元素的盒子。,盒子,由,margin,（外边距）、,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,、左右边距为,50px,、下边距为,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:50px;padding:10px;,/*,设置边框为,1px,、黑色、实线,*/,border:1pxsolid#000,STEP 02,定义,.div1,样式,在,demo02.html,文件中，编写,CSS,代码。,1.3.3,盒子模型,在网页制作时，关于多个盒子之间,需要注意的问题,，具体如下。,相邻块级元素的垂直外边距合并：以上下相邻的块元素为例，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。,嵌套块级元素的垂直外边距合并：如果父元素没有上内边距和边框，则父元素与子元素的上外边距合并为较大者。,外边距合并,1.3.3,盒子模型,STEP 03,运行程序,在浏览器,中,查看,demo02.html,文件，并,按【,F12,】键打开开发者工具，切换到,Elements,（元素）选项卡,。,查看,div,元素的样式,先定一个,小目标！,熟悉,浮动与定位,，能够分别使用,float,和,position,实现元素的左浮动和相对定位,1.3.4,浮动与定位,1.3.4,浮动与定位,属性值,描述,left,元素向左浮动,right,元素向右浮动,none,元素不浮动（默认值）,float,的常用属性值,CSS,的浮动,和,定位,可以,改变,元素的,排列方式,，,使网页内容变得丰富多彩。,CSS,的浮动,可以通过,float,属性进行设置。,1.3.4,浮动与定位,CSS,允许任何元素浮动，,不论是列表、段落还是图像。无论元素先前是什么状态，浮动后都成为块级元素，浮动元素的宽度缺省为,auto,。,浮动元素,的外边缘不会超过其父元素的内边缘。,如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块（没有足够的空间），则它下降到低于先前任何浮动元素的位置，即,换行显示。,浮动特点,1.3.4,浮动与定位,position,属性,可以让,网页中的某个元,素,在网页的特定位置出现，如弹出菜单,。,position:relative;,left:30px;/*,距左边线,30px*/,top:10px;/*,距顶部边线,10px*/,相对定位方式,基本语法格式,1.3.4,浮动与定位,属性值,描述,static,静态定位（默认定位方式）,relative,相对定位，相对于其原文档流的位置进行定位,absolute,绝对定位，相当于,static,定位以外的第一个上级元素进行定位,fixed,固定定位，相对于浏览器窗口进行定位,设置定位方式的常用属性值,1.3.4,浮动与定位,属性值,描述,top,顶端偏移量，定义元素相对于其参照元素上边线的距离,bottom,底部偏移量，定义元素相对于其参照元素下边线的距离,left,左侧偏移量，定义元素相对于其参照元素左边线的距离,right,右侧偏移量，定义元素相对于其参照元素右边线的距离,设置元素具体位置的常用属性值,1.3.4,浮动与定位,重叠,是,当一个父元素中的多个子元素同时被定位时，定位元素之间有可能会发生,：,定位元素发生重叠,1.3.4,浮动与定位,显示器显示的图案,是一个二维平面，使用,x,轴和,y,轴来表示位置属性。,二维平面,1.3.4,浮动与定位,z-index,属性,表示,Z,轴的深度,，它,表示三维立体的概念,，多个定位子元素的,上下层的立体关系。,可以控制定位元素在垂直于显示屏方向（,z,轴）上的堆叠顺序,值大的元素发生重叠时会在值小的元素上面，其取值可为正整数、负整数和,0,，默认值为,0,。,只能在,position,属性值为,relative,、,absolute,或,fixed,的元素上有效。,z-index,值越大的元素越靠近用户。,三维空间,【,项目,1-1】,三栏布局页面,1.4,先定一个,小目标！,掌握,三栏布局页面的实现,，能够通过编程实现头部和底部区域的页面效果,1.4.1,项目分析,1.4.1,项目分析,项目展示,三栏布局,是一种常用的网页布局结构,。,当浏览器窗口的宽度发生变化时，页面中左侧边栏和右侧边栏的宽度固定不变，而内容区域的宽度会随着浏览器窗口宽度大小的变化而变化。,1.4.1,项目分析,三栏布局页面效果,三栏布局,页面效果,：,结构,分析,该页面分为,头部区域、底部区域,和,中间的区域（主体区域）,，其中，,中间的区域,由,左侧边栏、内容区域和右侧边栏,组成。,使用,标签制作头部区域，并为头部区域设置样式。,使用,标签分别制作左侧边栏和右侧边栏，并为左、右侧边栏设置样式。,使用,标签制作底部区域，并为底部区域设置样式。,使用,标签制作内容区域，并为内容区域设置样式。,1.4.1,项目分析,页面结构示意图,1.4.1 项目分析,搭建项目目录结构,项目目录结构,为了方便读者进行项目的搭建，在创建,C:codechapter011-1,文件目录下创建项目：,1-1,为项目目录，里面包含,css,文件，以及,index.html,项目入口文件。,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:16px,header,footer height:25px,.main,border-top:1px solid#ccc;,border-bottom:1px solid#ccc,1.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,.right,background:#eee,1.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,实现左侧边栏效果,将左侧边栏显示在左侧,左侧边栏,显示效果,：,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,文件中添加,CSS,代码。,.left,.right,.middle,height:199px,设置左侧边栏、右侧边栏和内容区域的高度为,199px,1.4.6,项目总结,通过本项目的练习，读者应该了解三栏布局页面的实现过程，熟练掌握,HTML5,页面结构,和,CSS,定位,在本项目中的简单运用。,本项目的练习重点,建议读者在编码时按照项目分析中的需求，先编写,HTML5,文件中的整体结构,，主要包括,header,、,footer,、,div,、,aside,以及,section,标签,。,然后再使用,CSS,定位实现,三栏布局结构,。编写完成后保存文件，用浏览器打开页面，即可呈现出三栏布局页面效果。,本项目的练习方法,CSS3,边框属性,1.5,先定一个,小目标！,掌握,圆角边框,，能够使用,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|%,基本语法格式,%,表示可以写成百分比,用于设置对象的圆角半径长度，不可为负值,。,1.5.1,圆角边框,border-radius,属性的,4,个值是按照,top-left,、,top-right,、,bottom-right,和,bottom-left,的顺序来设置的,，具体如下：,如果省略,top-right,，则其与,top-left,相同，其参数都是先,y,轴然后,x,轴,。,如果省略,bottom-left,，则其与,top-right,相同,。,如果省略,bottom-right,，则与,top-left,相同,。,border-top-left-radius:/,左上角,border-top-right-radius:/,右上角,border-bottom-right-radius:/,右下角,border-bottom-left-radius:/,左下角,基本语法格式,1.5.1,圆角边框,STEP 01,定义,和,标签,在,chapter01,目录下新建,demo03.html,文件，,编写,HTML,代码,。,圆角边框,1.5.1,圆角边框,sectionpadding:10px,div,display:inline-block;padding:15px25px;,text-align:center;font-size:16px;,border:2pxsolid#000;color:#000;,background-color:#eee;,border-radius:12px,定义,和,标签的样式,在,demo03.html,文件中，编写,CSS,代码。,STEP 02,1.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,特殊边框效果,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-color:#ff898e#93baff#c89386#ffb151,1.5.2,特殊边框效果,STEP 03,运行程序,在浏览器中打开,demo04.html,文件。,特殊边框效果,1.5.2,特殊边框效果,多学一招,：浏览器私有前缀,为不同内核的浏览器添加不同的私有前缀，从而区分不同的,浏览器内核,：,以,-webkit-,开头的样式，只有以,Webkit,为内核的浏览器可以解析，如,Chrome,、,Safari,。,以,-moz-,开头的样式，只有以,Gecko,为内核的浏览器可以解析，如,Firefox,。,以,-ms-,开头的样式，只有以,Trident,为内核的浏览器可以解析，如,IE,。,以,-o-,开头的样式，只有以,Presto,为内核的浏览器可以解析，如,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,：红色值；,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,背景图像,是随对象内容滚动,fixed,背景图像固定,1.6.2 CSS3,背景的常用属性,CSS3,用于背景设置的常用属性,属性名,属性描述,允许取值,取值说明,background-position,设置或检索对象的背景图像位置，语法为,length|length,或者,position|position,35%80%,或,35%2.5cm,或,top right,length,：百分数,|,由浮点数字和单位标识符组成的长度值。,position,：,top|center|bottom|left|center|right,background-size,规定背景图像的尺寸,length,第一个值设置宽度，第二个值设置高度。一个值时，第二个值会被设置为,auto,percentage,以父元素的百分比来设置背景图像的宽度和高度，用法同上,cover,背景图完全覆盖背景区域,宽和高完全适应内容区域,contain,1.6.2 CSS3,背景的常用属性,选择器background:background-color|background-image|background-repeat|background-attachment|background-position,background,属性,的各个参数的含义，具体如下,。,background-color,指定背景颜色,background-image,指定一个或多个背景图像,background-repeat,指定重复背景图像,background-attachment,设置背景图像是否固定或者随着页面的其余部分滚动,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,属性,取值说明,参数类型,取值说明,投影方式,此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“,inset,”时，其投影就是内阴影,X,轴偏移量,是指阴影水平偏移量其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边,Y,轴偏移量,是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部,1.7.1,阴影,box-shadow,属性,取值说明,参数类型,取值说明,阴影模糊半径,此参数是可选，但其值只能是为正值，如果其值为,0,时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊,阴影扩展半径,此参数是可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值，则缩小,阴影颜色,此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在,webkit,内核下的,safari,和,chrome,浏览器将无色，也就是透明，建议不要省略此参数,STEP 01,定义类名为,box,和,box1,的,标签,在,chapter01,目录下新建,demo05.html,文件,，编写,HTML,代码,。,1.7.1,阴影,盒子对象阴影测试,DIV,盒子内阴影,图片对象阴影测试,.box,box-shadow:7px4px10px#000inset;,width:300px;height:80px,.box1img,box-shadow:#0007px4px10px,定义,.box,和,.img,的阴影效果,在,demo05.html,文件中，编写,CSS,代码。,STEP 02,1.7.1,阴影,水平阴影的位置7px,；,垂直阴影的位置4px,；,模糊距离10px,；,阴影的颜色为黑色,；,inset表示从外层的阴影（开始时）改变阴影内侧阴影,；,运行程序,在浏览器中打开,demo05.html,运行结