版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
HTML5静态网站开发概述单元1目录01常用HTML5开发环境的搭建02完成第一个HTML5页面1-1HTML5+CSS3网页设计任务教程（第二版）常用HTML5开发环境的搭建1234技能知识网站目录结构网页命名规范开发环境搭建四大命名规范任务1-1
常用HTML5开发环境的搭建HBuilderX是数字天堂（北京）网络技术有限公司，即DCloud推出的集成开发环境，是免费绿色软件，可从DCloud官网https://www.dcloud.io/hbuilderx.html上直接下载。HBuilderX简称HX，HBuilder，H是HTML的缩写，Builder是建设者。是为前端开发者服务的通用IDE，或者称为编辑器。与vscode、sublime、webstorm类似。由于HX的轻巧、极速、小程序支持等特点，赢得了广大用户的喜爱，是900万开发者的选择。任务1-1常用HTML5开发环境的搭建
任务1-1
常用HTML5开发环境的搭建1、css文件夹。这个文件夹是用来存放网站的样式文件，样式文件的文件扩展名为.css。2、img文件夹。这个文件夹是用来存放网站页面显示的图片文件，常用的图片文件格式为.jpg，其他的比如.png，.gif等格式的图片文件也需要放置在此文件夹中。3、js文件夹。这个文件夹是用来存放完成网站相关功能的脚本文件，脚本文件的扩展名为.js。4、index.html文件。一个静态网站的首页面文件默认使用index.html命名，所以在HX中创建一个Web项目时会自动创建好一个空的index.html文件。任务1-1
常用HTML5开发环境的搭建常用HTML5开发环境的搭建1、骆驼命名法：也称为小驼峰命名法，当标识符是由一个或多个单词连结在一起构成的唯一识别字时，第一个单词以小写字母开始，之后每个单词的首字母都大写。例如：myFirstName、myLastName，这样的标识符看上去就像骆驼峰一样此起彼伏，故得名。2、帕斯卡命名法：也称为大驼峰命名法，与骆驼命名法相似，不同的是帕斯卡命名法的第一个单词是以大写字母开始。例如：MyFirstName、MyLastName。常用HTML5开发环境的搭建3、匈牙利命名法：其命名的基本原则是，变量名=属性+类型+对象描述。标识符的名字以一个或者多个小写字母开头作为前缀，前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指明变量的用途。如：iMyAge、cMyName[10]、fManHeight表示三个变量的类型分别为int、char、float。4、下划线命名法：此法在命名中用到的单词使用小写字母，每个单词直接用下划线‘_’分割，例如：book_author、book_price。在此推荐统一使用子页面功能翻译的英文命名，命名规则采用骆驼命名法。页面文件的命名统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。推荐统一使用子页面功能翻译的英文命名，如：首页—index.html、产品列表—proList.html产品详细页面—proDetail.html、新闻列表—newsList.html
新闻详细页面—newsDetail.html、发展历史—history.html关于我们—about.html、联系我们—contact.html任务1-1
常用HTML5开发环境的搭建1-2HTML5+CSS3网页设计任务教程（第二版）完成第一个HTML5页面任务1-2完成第一个HTML5页面<title>标签的使用<body>标签的使用HTML5注释的使用<meta>标签的使用完成第一个HTML5页面HTML文档的根元素（标签）标签的内容通常给浏览器看的指页面标题标签的内容给人看的1、<meta>标签<meta>标签是用来描述一个HTML页面文档的属性，可提供有关页面的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等。2、<title>标签<title>标签是用来定义一个HTML页面文档的标题。3、<body>标签<body>标签用来定义页面文档的主体。任务1-2完成第一个HTML5页面1、在HTML5中，注释标签用于在源代码中插入注释，注释不会显示在浏览器中。注释标签的格式为：<!--注释的内容-->。2、在HTML5中可使用注释对相关代码进行解释，这样做有助于自己在以后或者其他开发人员对代码进行修改，尤其是在编写大量代码时注释的作用非常明显。3、在后面的学习中需要在页面文档中添加脚本时，使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯。4、在HTML5中，注释标签仅仅起到解释相关代码的作用，它不支持任何的标准属性和事件属性。任务1-2完成第一个HTML5页面点击运行单击工具栏中的“浏览器运行”按钮，或按“Ctrl+R”组合键，选择Chrome浏览器浏览页面直接打开网站文件夹内直接打开网页任务1-2完成第一个HTML5页面HTML5静态网站开发概述单元1HTML5中常用标签的使用单元2目录02使用<a>标签实现超链接03使用<a>标签实现锚点链接01使用<marquee>标签制作滚动字幕04使用文本类标签实现页面文本的显示05使用文本格式类属性实现页面文本特殊显示效果06使用转义字符显示特殊符号07使用图像类标签显示图像及图像映射08<iframe>标签使用09多媒体标签使用10表单的简单应用11表单格式验证2-1HTML5+CSS3网页设计任务教程（第二版）使用<marquee>标签制作滚动字幕任务2-1使用<marquee>标签制作滚动字幕<marquee>标签的语法结构如下：<marqueeA属性=”A值”B属性=”B值”C属性=”C值”>...</marquee><marquee>标签常用属性：1、behavior：设置文本在marquee元素内如何滚动。2、bgcolor：可以通过颜色名称或十六进制设置背景颜色。3、direction：设置<marquee>标签内文本滚动的方向。4、height：以像素（px）或者百分比值设置高度。5、width：以像素（px）或者百分比值设置宽度。6、scrollamount：设定活动字幕的滚动速度。7、onMouseOut=“this.start();”：用来设置鼠标移出该区域时继续滚动。8、onMouseOver=“this.stop();”：用来设置鼠标移入该区域时停止滚动。任务2-1使用<marquee>标签制作滚动字幕HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在HTML元素的开始标签中规定。2-2HTML5+CSS3网页设计任务教程（第二版）使用<a>标签实现超链接任务2-2使用<a>标签实现超链接任务2-2使用<a>标签实现超链接<a>标签定义超链接，用于从一个页面链接到另一个页面，其语法结构如下：<a属性设置>...</a>href属性指示链接的目标，链接目标可以是网址，也可以是文件路径，还可以是空（使用“###”表示，如果使用“#”则会跳到当前网页的头部），href属性必不可少。target属性值可以为：_blank（在新空白窗口中打开链接），_parent（在当前窗口的上一层里打开链接），_self（在当前窗口中打开链接），_top（在顶层框架中打开链接）。2-3HTML5+CSS3网页设计任务教程（第二版）使用<a>标签实现锚点链接任务2-2使用<a>标签实现锚点链接任务2-3使用<a>标签实现锚点链接锚点链接是指在同一个页面跳转到指定位置的方式，类似于word的目录，点击目录可以跳转到内容处。此种方式是超链接的一种特殊方式，仍然使用<a>标签来实现。在HTML5规范中实现这种功能要利用标签的ID属性值进行页面内跳转。例如：<ahref=”#mark”>页面内链接</a>…………<pid=”mark”>目标</p>因为ID在同一个HTML页面中是唯一的，适合用于锚点连接。2-4HTML5+CSS3网页设计任务教程（第二版）使用文本类标签实现页面文本的显示任务2-4使用文本类标签实现页面文本的显示1<div>标签与<p>标签的区别<ul>、<ol>标签的使用<div>、<span>标签的使用<i>、<em>、<b>、<strong>标签的使用<h>、<p>、<br>标签的使用2354任务2-4
使用文本类标签实现页面文本的显示
〓<h>、<p>、<br>标签1、HTML
中提供了从<h1>到<h6>六个级别的标题标签，<h1>标签的级别最高，<h6>标签的级别最低，通过这些标签可以定义网页中的标题（与
word
中的标题类似），合理使用标题可以使网页的层次结构更加清晰。2、<p>标签用于在HTML文档里定义一个段落。浏览器在显示<p>段落时，将在其前后分别插入一个空白行。这些空白是由浏览器在呈现网页时自动加入的，你也可以用样式表来指定显示多少空白。3、<br>
可插入一个简单的换行符。<br>
标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在
XHTML
中，把结束标签放在开始标签中，也就是
<br
/>。请注意，<br>
标签只是简单地开始新的一行，而当浏览器遇到
<p>
标签时，通常会在相邻的段落之间插入一些垂直的间距。任务2-4
使用文本类标签实现页面文本的显示
〓<h>、<p>、<br>标签任务2-4
使用文本类标签实现页面文本的显示
〓<i><em><b><strong>标签任务2-4
使用文本类标签实现页面文本的显示
〓<i><em><b><strong>标签1、<i>标签的作用是给元素文本添加斜体样式；在html里添加i标签后，浏览器会将包含在i标签中的文本以斜体字（italic）或者倾斜（oblique）字体显示。2、<em>标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。3、<b>元素以粗体标记要强调的文本。对于所有浏览器来说，这意味着要把这段文字以加粗（粗体）样式方式显示。4、<strong>标签是一个短语标签，用于表示浏览器上文档的重要文本。任务2-4
使用文本类标签实现页面文本的显示
〓<div>、<span>标签任务2-4
使用文本类标签实现页面文本的显示
〓<div>、<span>标签1、<div>标签可定义文档中的分区或节，可以把文档分割为独立的、不同的部分。<span>标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。2、<span>元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width，可以给<span>设置margin值，设置与父元素之前的距离。3、<span>可以通过CSS声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，<span>可以很好解决这些问题。任务2-4
使用文本类标签实现页面文本的显示
〓<div>标签与<p>标签1、结构差距<div>与<p>均是一对最先与闭合标签。<div>以<div>最先，以</div>结束的一对标签。<p>以<p>开端，以</p>完结的一对标签。2、称谓分歧<div>是布局框架标签，<p>是段落标签，布局文章标签。3、<div>与<p>基本CSS属性<div>与<p>均独占一行的块元素标签，<p>自带有不一定margin-top和margin-bottom属性值，而<div>两个属性值为0，也便是两个<p>之间有间距，而<div>没有。4、框架结构在结构HTML重构时分，<div>首要用于布局框架，大小结构结构均使用<div>来布局。任务2-4
使用文本类标签实现页面文本的显示
〓<div>标签与<p>标签任务2-4
使用文本类标签实现页面文本的显示
〓<ul>、<ol>标签<ul>是无序列表，全称是unordered
list，先来个例子：
●张三
●李四
●王二●刘五
<ol>是有序列表
,全称是ordered
list，同样举个例子：
1、张三2、李四3、王二4、刘五任务2-4
使用文本类标签实现页面文本的显示
〓<ul>、<ol>标签<ul>与<ol>前的符号是可以修改的。只需要修改它们的type值。
<ul>的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
<ol>的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。start属性，属性值是数字，表示第一个列表项的起始值。任务2-4使用文本类标签实现页面文本的显示2-5HTML5+CSS3网页设计任务教程（第二版）使用文本格式类属性实现页面文本特殊显示效果任务2-5使用文本格式类属性实现页面文本特殊显示效果1、word-spacing是单词间隔属性，表示单词之间所添加的空白间隔的长度，但对于中文无效。2、letter-spacing是字符间隔属性，表示字符之间所添加的空白间隔的长度，对于英文文本就是字母之间，对于中文文本就是每个汉字之间。这两个属性必须放在样式属性style中或是在样式表文件中进行设置。任务2-5使用文本格式类属性实现页面文本特殊显示效果任务2-5使用文本格式类属性实现页面文本特殊显示效果1、text-decoration属性是以下三种属性的简写：text-decoration-line属性规定文本修饰要使用的线条类型。text-decoration-color属性规定文本修饰的颜色。text-decoration-style属性设置文本装饰的类型（实线、波浪线、点线、虚线、双线）。text-decoration:overline;上划线。text-decoration:line-through;删除线。text-decoration:underline;下划线。2、text-indent属性规定文本块中首行文本的缩进，允许使用负值。如果使用负
值，那么首行会被缩进到左边。2em代表两个字符的大小。任务2-5使用文本格式类属性实现页面文本特殊显示效果2-6HTML5+CSS3网页设计任务教程（第二版）使用转义字符显示特殊符号任务2-6使用转义字符显示特殊符号对于HTML代码而言，有些字符具有特别的含义，比如说“<”和“>”这两个符号，根据前面所学知识知道这两个符号是标签的起始字符和结尾字符，是不显示在页面里的；除此，还有一种具有特殊含义但却无法用键盘直接输入的字符。HTML提供了转义字符功能专门用来显示这些字符。转义字符由三部分组成：以一个“&”符号开头，紧跟字符专用名称或字符代号，以“;”结束。任务2-6使用转义字符显示特殊符号任务2-6使用转义字符显示特殊符号显示结果描述实体名称实体编号
空格
<小于号<<>大于号>>&和号&&"双引号""￠分¢¢£镑££¥人民币¥¥§节§§©版权©©®注册商标®®×乘号××÷除号÷÷2-7HTML5+CSS3网页设计任务教程（第二版）使用图像类标签显示图像及图像映射<img>标签定义HTML页面中的图像。从技术上讲，图像并不会插入HTML页面中，而是链接到HTML页面上。<img>标签有两个必需的属性：src和alt。src属性是<img>标签的必需属性，用于在页面上显示图像。需要使用该属性指定图片的URL地址，即图像文件的路径和文件名。alt属性用来为图像定义一串预先自定义的可替换的文本，当浏览器无法载入图像时，会显示替换文本来告知用户相关信息，使用替换文本属性有助于更好的显示信息，提高页面友好度。title属性用来设置鼠标移动到图片上的提示文字。它的值一般与alt的值相同，最大的区别是显示的前提条件不同，alt属性是图片加载失败后显示，而title属性则是图片加载成功后鼠标放到它上面才显示。width属性用来设置图片的宽度，使用时不需要加单位，默认是像素（px）。height属性用来设置图片的高度，和width一样在使用时不需要加单位，默认是像素（px）。任务2-7使用图像类标签显示图像及图像映射任务2-7使用图像类标签显示图像及图像映射属性值描述alttext规定图像的替代文本srcURL规定显示图像的URLaligntop，bottom，middle，left，right不推荐使用。规定如何根据周围的文本来排列图像borderpixels不推荐使用。定义图像周围的边框heightpixels，%定义图像的高度hspacepixels不推荐使用。定义图像左侧和右侧的空白ismapURL将图像定义为服务器端图像映射longdescURL指向包含长的图像描述文档的URLusemapURL将图像定义为客户器端图像映射vspacepixels不推荐使用。定义图像顶部和底部的空白widthpixels，%设置图像的宽度<map>的作用是定义一个客户端"图像映射"，"图像映射"指带有可点击区域的一幅图像，<map>一般需要与<imgsrc="值"usemap="#值">配合使用，src属性负责为<map>提供作用对象；<map>依靠usemap属性来寻找和引用<img>。<area>用于定义可点击区域的形状、大小以及路径。<area>的shape属性表示定义热点(可点击区域)的形状，可选值有rect(矩形)\circle(圆)\poly(自定义形状)。<area>的href属性表示可点击区域的跳转链接地址。任务2-7使用图像类标签显示图像及图像映射base64为采用二进制流表示图片。常用格式为：<imgsrc=”data:image/png;base64,编码”/>1、使用base64的优点是：减少一个图片的http请求。2、使用base64的缺点是：1）、大小会比原文件大小大1/3，影响文件加载速度，增加文件解析渲染时间。2）、使用base64无法直接缓存，这相比于直接缓存图片的效果要差很多。3）、兼容性的问题，ie8以前的浏览器不支持。一般一些网站的小图标可以使用base64图片来引入。任务2-7使用图像类标签显示图像及图像映射2-8HTML5+CSS3网页设计任务教程（第二版）<iframe>标签使用任务2-8<iframe>标签使用<iframe>标签规定一个内联框架。一个内联框架被用来在当前HTML文档中嵌入另一个文档。所有的主流浏览器都支持<iframe>标签。例如：<iframename="myiframe"id="myrame"src="external_file.html"frameborder="0"align="left"width="200"height="200"scrolling="no"><p>你的浏览器不支持iframe标签</p></iframe>任务2-8<iframe>标签使用<iframe>的常用属性：name：规定<iframe>的名称。width：规定<iframe>的宽度。height：规定<iframe>的高度。src：规定在<iframe>中显示的文档的URL。frameborder：规定是否显示边框。(0为无边框，1位有边框)。align：规定如何根据周围的元素来对齐<iframe>。(left,right,top,middle,bottom)。scrolling：规定是否在<iframe>中显示滚动条(yes,no,auto)。任务2-8<iframe>标签使用2-9HTML5+CSS3网页设计任务教程（第二版）多媒体标签使用任务2-9多媒体标签使用<audio>标签是一对，其常用属性有：autoplay：如果出现该属性，则音频在就绪后马上播放。controls：如果出现该属性，则向用户显示控件，比如播放按钮。loop：如果出现该属性，则每当音频结束时重新开始播放。preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。src：要播放的音频的URL。<audio>标签支持的音频格式有：wav，mp3和ogg格式。任务2-9多媒体标签使用<video>标签也是一对，其常用属性有：autoplay：如果出现该属性，则视频在就绪后马上播放。controls：如果出现该属性，则向用户显示控件，比如播放按钮。poster：属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。src：要播放的视频的URL。height：设置视频播放器的高度。width：设置视频播放器的宽度。video标签支持的视频格式有：Ogg，MPEG4和WebM格式。任务2-9多媒体标签使用2-10HTML5+CSS3网页设计任务教程（第二版）表单的简单应用任务2-10表单的简单应用在HTML中，<label>元素用于创建文本标签，用于标识表单控件或其他交互元素。for属性是<label>元素的一个属性，用于指定与之关联的表单控件的ID属性。通过使用for属性，可以实现以下两个作用：关联表单控件：for属性的值应设置为要关联的表单控件的ID属性。这样，当用户点击<label>标签时，关联的表单控件就会被激活或获得焦点，从而方便用户与表单进行交互。这提供了更大的点击目标区域，增加了表单控件的可用性。辅助功能：<label>标签的for属性也有助于提升网页的可访问性。屏幕阅读器等辅助技术可以使用<label>标签与表单控件之间的关联，提供更好的用户体验和可访问性支持。任务2-10表单的简单应用<input>标签中常用的type属性有以下几种：text：用于输入单行文本数据，例如用户名、密码等。password：用于输入密码等敏感数据，输入的内容会被隐藏。checkbox：用于选择一个或多个选项，可以勾选或取消勾选。radio：用于选择一个选项，可以单选。submit：用于提交表单数据到服务器，通常与form标签一起使用。reset：用于重置表单数据，将所有表单元素的值重置为默认值。button：用于创建一个按钮，通常需要通过JavaScript脚本来实现点击后的功能。file：用于选择上传文件，可以上传图片、文档等多种类型的文件。number：用于输入数字，可以设置最大、最小值和步长等属性。date：用于选择日期，可以设置日期的格式和范围等属性。email：用于输入邮箱地址，可以进行邮箱地址格式的验证。tel：用于输入电话号码，可以进行号码格式的验证。search：用于输入搜索关键词，可以与JavaScript脚本一起使用，实现搜索功能。任务2-10表单的简单应用2-11HTML5+CSS3网页设计任务教程（第二版）表单格式验证任务2-11表单格式验证用户在提交数据的时候，不可避免的会对<input>内的数据格式进行验证，pattern属性规定用于验证输入字段的模式。pattern属性适用于以下<input>类型：text，search，url，telephone，email以及password，其格式为<inputpattern="regexp">。RegExp(正则表达式)是RegularExpression缩写，是用于查找符合某些规则的字符串的工具。任务2-11表单格式验证regexp常用表达式如下：1、^\d+$：正整数+02、^[0-9]*[1-9][0-9]*$：正整数3、^((-\d+)|(0+))$：负整数+04、^-[0-9]*[1-9][0-9]*$：负整数5、^-?\d+$：整数，正整数和负整数和0：6、^\d+(\.\d+)?$：正浮点数+07、^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$：正浮点数8、^((-\d+(\.\d+)?)|(0+(\.0+)?))$：负浮点数+09、^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$：负浮点数10、^(-?\d+)(\.\d+)?$：浮点数11、^[0-9]+(.[0-9]{2})?$：金额校验，精确到2位小数12、^[A-Za-z]+$：由26个英文字母组成的字符串任务2-11表单格式验证13、^[A-Z]+$：由26个英文字母的大写组成的字符串14、^[a-z]+$：由26个英文字母的小写组成的字符串15、^[A-Za-z0-9]+$：由数字和26个英文字母组成的字符串16、^\w+$：由数字、26个英文字母或者下划线组成的字符串17、^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$：email地址18、^[a-zA-z]+://注释：匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$：匹配url19、^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$：密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间20、^[\\u4e00-\\u9fa5]{0,}$：字符串仅能是中文21、^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$：18位身份证22、^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$：检验日期yyyy-mm-dd格式23、^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$：各大运营商手机号码正则表达式任务2-11表单格式验证HTML5中常用标签的使用单元2CSS基本应用单元3目录02CSS元素选择器的使用03内联式、嵌入式、外部式样式的使用01使用CSS设置body样式04测试样式优先级05创建盒子模型06CSS中float属性的使用07常用文本样式属性的使用08常用图片样式属性的使用09position的4种定位方式的使用10Chrome浏览器调试基本技巧3-1HTML5+CSS3网页设计任务教程（第二版）使用CSS设置body样式任务3-1使用CSS设置body样式任务3-1使用CSS设置body样式CSS是CascadingStyleSheets的缩写，即层叠样式表，在标准网页设计中，CSS负责网页内容在浏览器内的显示样式，如文字大小、字体颜色、元素位置等。CSS基本语法：selector{declaration1;declaration2;...declarationN}/*这里是注释*/body选择器是CSS中的基础选择器，用于对整个文档进行全局样式的设置。我们可以通过在CSS文件中为body元素添加样式来改变整个页面的风格。我们设置了背景颜色、字体、字号和字体颜色。这些样式将应用于整个文档的body元素。另外，我们也可以为body元素设置其他样式，如边距、边框和填充等。这些样式可以让网页的布局更加美观和整洁。CSS代码需要放在CSS文件或者<style>标签内，如果放在独立的CSS文件内，则页面需要调用：<linkrel="stylesheet"type="text/css"href="css/style.css"/>css/style.css为CSS文件存放的地址。任务3-1使用CSS设置body样式1、background-color:背景颜色，background-image:背景图像，background-repeat:背景重复，background-position:背景图像位置，background-attachment:如何设置固定的背景图像。2、margin:外边距，此处是指页边距，margin:20px（上、下、左、右各20px）;margin:20px40px（上、下20px；左、右40px）;margin:20px40px60px（上20px；左、右40px；下60px）;margin:20px40px60px80px（上20px；右40px；下60px；左80px）。3、font-size:字体大小。4、color:字体颜色，如果采用6位16进制数，前面需要加上”#”，注意字体颜色不是font-color。5、font-family:ComicSansMS,"微软雅黑";先写英文字体，再写中文字体，会优先匹配英文字体，但是在英文字体中找不到中文字符，这样中文就会自动使用后写的中文字体了。6、line-height:文本行高，一般采用em单位，1em代表一倍行距。3-2HTML5+CSS3网页设计任务教程（第二版）CSS元素选择器的使用1234CSS选择器标签选择器所谓标签选择器就是使用已有的HTML代码中的标签作为名称的选择器。例如：{font-size:12px;color:white;}类选择器为标签设置“class=CLASS名称”，类选择器定义时以“.”开头。格式为：.类选器名称{CSS样式代码；}通用选择器(通配选择器)
指的是当前页面上的所有标签都应用该样式
*{color:red;}
指所有元素,优先级非常低,
性能低
*{margin:0;padding:0}是指将所有元素的内外间距去除
ID选择器
即标记选择器，为标签设置“id=ID名称”，ID选择器定义时以“#”开头，ID选择器在一个HTML文件中只能使用一次。格式为：#ID选择器名称{CSS样式代码}任务3-2CSS元素选择器的使用〓
基础选择器1、组合选择器：也称为分组选择器，或并集选择器，用“,”将需要设置相同样式的多个选择器组合起来就构成了组合选择器。h1,p{background-color:yellow;}2、交集选择器：两个选择器构成，其中第一个为标签选择器，第二个为类选择器或ID选择器，两个选择器之间没有空格。p.hometown{background-color:yellow;}3、后代选择器：也称为包含选择器，即在选择器之间加入空格，用于选择指定选择器的后代元素，后面元素是前面元素的后代元素，是一种从属关系。divp{background-color:yellow;}任务3-2CSS元素选择器的使用〓
复合选择器4、子元素选择器：用来选择元素的子元素，父级标签写前面，子级标签写后面，中间跟一个“>”进行连接，符号左右两侧各保留一个空格。div>p{background-color:yellow;}5、兄弟选择器：是CSS3.0新增的一个选择器，分别使用“~”或者“+”连接两个元素，其中“~”表示某元素后所有同级的指定元素，强调所有的。“+”表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。div+p{background-color:yellow;}6、属性选择器：是选取标签带有某些特殊属性的选择器，使用[]括起来，一般用于<form>标签中的<input>标签。如input[type=”text”]表示type属性值为text的<input>标签。a[target=_blank]{background-color:yellow;}任务3-2CSS元素选择器的使用〓
复合选择器伪类选择器：用于向某些选择器添加特殊的效果。以“:”开头，分为链接伪类、结构伪类等。a:link{color:#FF0000;}/*未访问的链接*/a:visited{color:#00FF00;}/*已访问的链接*/a:hover{color:#FF00FF;}/*鼠标划过链接*/a:active{color:#0000FF;}/*已选中的链接*/任务3-2CSS元素选择器的使用〓
伪类选择器3-3HTML5+CSS3网页设计任务教程（第二版）内联式、嵌入式、外部式样式的使用任务3-3内联式、嵌入式、外部式样式的使用内联式：把CSS代码直接作为标签的style属性的内容写在现有的HTML标签
（如p,span...）中，如：<pstyle="color:red;font-size:12px;">表示这个段落中的文字大小是12像素，字体颜色是红色。嵌入式：也称作内部样式表，把CSS样式写在标签<styletype="text/css"></style>之间，并且一般情况下嵌入式CSS样式写在<head></head>之间。外部式：把CSS代码写在一个单独的外部文件中存放在根目录的CSS文件夹下面，这个CSS样式文件以“.css”为扩展名，在<head>标签内使用<link>标签将CSS样式文件链接到HTML文件内：
<linkhref="style.css"rel="stylesheet"type="text/css"/>一般外部式的样式文件名字为style.css。.任务3-3内联式、嵌入式、外部式样式的使用CSS三种使用方法40%15%15%20%20%3-4HTML5+CSS3网页设计任务教程（第二版）测试样式优先级任务3-4测试样式优先级任务3-4测试样式优先级通常我们可以将CSS的优先级由高到低分为六组：1、无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。2、第二高位的优先属性是在HTML中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。3、第三级优先的属性是由一个或多个id选择器来定义的。例如#id{margin:0;}会覆盖.classname{margin:3px;}。4、第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。例如.classname{margin:3px;}会覆盖div{margin:6px;}5、第五级由一个或多个类型选择器定义。例如div{margin:6px;}覆盖*{margin:10px;}。6、最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。CSS优先级的优先顺序!important>内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>通配选择器。3-5HTML5+CSS3网页设计任务教程（第二版）创建盒子模型任务3-5创建盒子模型1、内容（content）：内容包括了文本，块状盒子，图片，内容盒子的盒模型等等。2、内边距（padding）：内边距规定了内容与边框之间的填充距离。3、边框（border）：border默认为0；可以设置边框样式。4、外边距（margin）：外边距规定了盒子与盒子之间的距离，因此它不会被计算到盒子的总体宽度和高度之中，盒子内的盒子的外边距则会影响父级元素的宽度和高度。5、元素框的总宽度=内容（content）的width+padding的左边距和右边距的值+margin的左边距和右边距的值+border的左右宽度。6、元素框的总高度=内容（content）的height+padding的上下边距的值+margin的上下边距的值＋border的上下宽度。3-6HTML5+CSS3网页设计任务教程（第二版）CSS中float属性的使用任务3-6CSS中float属性的使用任务3-6CSS中float属性的使用我们可以给<div>设置float属性，让块元素转变为行元素，实现两个块元素并排显示。float是CSS属性，它可以让元素“浮动”到其容器的左侧或右侧。当一个元素设置了float属性后，它就会向左或向右移动，直到碰到父容器或另一个浮动元素的边缘为止。float属性的值有：1.none：元素将保持其原始位置，不会受到影响。2.left：元素将向左移动，直到达到其最近的无边边距元素或文档流中的其他元素。3.right：元素将向右移动，直到达到其最近的无边边距元素或文档流中的其他元素。4.top：元素将向上移动，直到达到其最近的无边边距元素或文档流中的其他元素。5.bottom：元素将向下移动，直到达到其最近的无边边距元素或文档流中的其他元素。6.inline-block：元素将转换为一个内联块元素，其宽度将根据其宽度值自动调整。7.inline：元素将保持其原始位置，但将被视为一个内联行元素。8.float：元素将浮起来，直到达到其最近的无边边距元素或文档流中的其他元素。3-7HTML5+CSS3网页设计任务教程（第二版）常用文本样式属性的使用任务3-7常用文本样式属性的使用〓<div>居中margin-left:auto;margin-right:auto;设置div左右居中任务3-7常用文本样式属性的使用〓
文字左右居中text-align:center;设置文字左右居中任务3-7常用文本样式属性的使用〓
文字上下居中如果只有一行文字，可通过设置块状元素的高度属性height与文本的行高属性line-height的属性值相等实现任务3-7常用文本样式属性的使用〓CSS3文本阴影文本设置阴影使用text-shadow属性，其使用格式为：text-shadow:h-shadowv-shadowblurcolor;h-shadow表示水平阴影的位置，允许负值；v-shadow表示垂直阴影的位置，允许负值；blur表示阴影模糊的距离；color表示阴影的颜色。任务3-7常用文本样式属性的使用〓
自定义字体在CSS3之前，WEB设计师必须使用已在用户计算机上安装好的字体。通过CSS3WEB设计师可将喜欢的字体文件存放到WEB服务器上，它会在需要时被自动下载到用户的计算机上。这种字体我们称之为自定义字体，是在CSS3@font-face规则中定义的。其使用的语法格式为：@font-face{font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}任务3-7常用文本样式属性的使用〓
远程调用字体引入<linkhref="/css?family=Condiment"rel="stylesheet"type="text/css">代表远程调用Condiment字体3-8HTML5+CSS3网页设计任务教程（第二版）常用图片样式属性的使用任务3-8常用图片样式属性的使用〓border-radius属性CSS3border-radius指定每个圆角如果你在border-radius属性中只指定一个值，那么将生成4个圆角。但是，如果你要在四个角上一一指定，可以使用以下规则：四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。三个值：第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角。两个值：第一个值为左上角与右下角，第二个值为右上角与左下角。一个值：四个圆角值相同。任务3-8常用图片样式属性的使用〓border-radius属性任务3-8常用图片样式属性的使用〓border-radius属性渐变属性是实现渐变效果的重要方式，其中包括线性渐变、径向渐变和重复渐变。线性渐变：在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。基本语法为bacground-image：linear-gradient（渐变角度，起始颜色，结束颜色）。径向渐变：在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。基本语法为：background-image：radial-gradient（渐变形状圆心位置，起始颜色，结束颜色）。任务3-8常用图片样式属性的使用〓CSS3渐变任务3-8常用图片样式属性的使用〓border-radius属性CSS滤镜（CSSfilters）是一种CSS属性，它可以应用于元素的可视呈现，用于实现各种视觉效果和图像处理效果。滤镜属性允许你修改元素的外观，如调整亮度、对比度、模糊度等。以下是一些常用的CSS滤镜属性：1、blur()：给元素添加模糊效果。2、brightness()：调整元素的亮度。3、contrast()：调整元素的对比度。4、grayscale()：将元素转换为灰度图像。5、sepia()：给元素添加复古色调。6、saturate()：调整元素的饱和度。7、hue-rotate()：旋转元素的色相。8、invert()：反转元素的颜色。这些是一些常用的CSS滤镜属性，你可以根据需要使用其中的一个或多个属性来实现特定的视觉效果。请注意，滤镜属性在不同浏览器中的兼容性可能会有所不同，因此在使用时需要进行相应的浏览器兼容性检查。任务3-8常用图片样式属性的使用〓CSS3Filter（滤镜）属性在计算机查找网页文档时，计算机需要明确该网页文档所在位置。我们把网页文档所在的位置称为路径。网页中的路径分为绝对路径和相对路径两种，具体介绍如下：1、绝对路径绝对路径就是网页上的文档或目录在盘符(即C盘、D盘等)中的真正路径，例如“D：\案例源码\chapter02limagesbannerl.jpg”就是一个盘符中的绝对路径。再如完整的网络地址“/images/logo.gif”。2、相对路径相对路径就是相对于当前文档的路径。相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。3、相对路径使用的特殊符号以下为建立路径所使用的几个特殊符号，及其所代表的意义。"./"：代表目前所在的目录。"../"：代表上一层目录。以"/"开头：代表根目录。任务3-8常用图片样式属性的使用〓相对路径和绝对路径3-9HTML5+CSS3网页设计任务教程（第二版）position的4种定位方式的使用任务3-9position的4种定位方式的使用〓staticstatic：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。任务3-9position的4种定位方式的使用〓relativerelative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。任务3-9position的4种定位方式的使用〓absoluteabsolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。任务3-9position的4种定位方式的使用〓z-indexz-index：指定了元素及其子元素的z轴顺序，而z轴顺序可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。任务3-9position的4种定位方式的使用〓fixedfixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。3-10HTML5+CSS3网页设计任务教程（第二版）Chrome浏览器调试基本技巧不论是前端开发者，还是后端开发者，我们在调试web项目时，偶尔弹出相关错误。此时，我们需要按F12打开浏览器的调试模式（图片3-20），通过浏览器的调试模式，来排查错误的根源。Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。任务3-10Chrome浏览器调试基本技巧任务3-10Chrome浏览器调试基本技巧〓样式无效任务3-10Chrome浏览器调试基本技巧〓终端选择任务3-10Chrome浏览器调试基本技巧〓样式修改CSS基本应用单元3CSS3高级应用单元4目录02CSS3图片背景的使用03制作搜索框01FontAwesome图标的使用04制作无间隙滚动文字和图片05制作轮播文字和图片06制作多种文字特效07制作图片遮罩和悬停特效4-1HTML5+CSS3网页设计任务教程（第二版）FontAwesome图标的使用任务4-1
FontAwesome图标的使用font-awesome是一款完全免费的基于CSS框架的网页字体图标库，提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以通过CSS定义的样式。1、引入CSS文件：<linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css">2、可以使用CSS前缀fa和图标的名称在任何地方放置FontAwesome图标：<iclass="fafa-cog"></i>代表齿轮3、可以直接设置需要的样式：style="font-size:50px;color:gold;"代表齿轮大小及颜色其他功能我们可以详见/p/font-awesome/网站。任务4-1
FontAwesome图标的使用1、大图标fa-lg(增加33％)，fa-2x，fa-3x，fa-4x，或fa-5x类用于增加相对于其容器的图标大小。2、列表图标fa-ul和fa-li类用于替换无序列表中的默认前缀。3、边界和被拉的图标fa-border，fa-pull-right或fa-pull-left类用于拉式引用或文章图标。4、动态图标fa-spin类可以让图标旋转,fa-pulse类可以使图标以8步为周期进行旋转。5、旋转和翻转的图标fa-rotate-*和fa-flip-*类用于旋转和翻转图标。6、堆叠的图标要堆叠多个图标，请使用父级上的fa-stack类，fa-stack-1x类用于常规大小的图标，fa-stack-2x用于较大的图标。fa-inverse类可以用作替代图标颜色。您还可以向父级添加更大的图标类，以进一步控制尺寸。7、固定宽度图标fa-fw类用于设置固定宽度的图标。当不同的图标宽度偏离对齐时，此类非常有用。特别适用于Bootstrap的导航列表和列表组。任务4-1
FontAwesome图标的使用4-2HTML5+CSS3网页设计任务教程（第二版）CSS3图片背景的使用任务4-2CSS3图片背景的使用CSS的background-attachment属性规定了背景图片的固定方式。在很多情况下，一个网页的背景图片需要随着用户的滚动而移动，但是有些时候，我们只是希望背景图片一直显示在页面的某个位置上，无论用户怎么滚动页面，这时可以使用background-attachment属性来实现这个效果。background-attachment属性可以接受的值分为三种，分别为scroll、fixed、local。1、scroll：默认值。背景图片随着页面的滚动而滚动。2、fixed：背景图片固定，不随页面的滚动而滚动。3、local：背景图片随着对象本身的移动而移动。任务4-2CSS3图片背景的使用任务4-2CSS3图片背景的使用1、padding-box:此值为background-origin的默认值，决定background-position起始位置。从padding的外边缘(border的内边缘)开始显示背景图片;2、border-box:此值决定background-position起始位置从border的外边缘开始显示背景图片;3、content-box:此值决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片。任务4-2CSS3图片背景的使用任务4-2CSS3图片背景的使用background-position属性用来设置背景图像的起始位置。可以使用具体的百分数或数值进行设置，也可以使用left，center，top，right，top，bottom配合设置，而其中以下几种表示相同定位方式：1、"topleft","lefttop"和"0%0%","0,0"代表元素的左上角；2、"top","topcenter","centertop"和"50%0"表示在元素顶边居中位置；3、"righttop","topright"和"100%0"代元素的是元素的右上角位置；4、"left","leftcenter","centerleft"和"0%50%"表示在元素左边中间位置；5、"center","centercenter"和"50%50%"表示在元素中间位置；6、"right","rightcenter","center,right"和"100%50%"表示在元素右边中间位置；7、"bottomleft","leftbottom"和"0%100%"表示在元素的左下角；8、"bottom","bottomcenter","centerbottom"和"50%100%"表示在元素的底下中间点位置；9、"bottomright"，"rightbottom"和“100%100%”表示在元素右下角位置。任务4-2CSS3图片背景的使用4-3HTML5+CSS3网页设计任务教程（第二版）制作搜索框任务4-3制作搜索框1、content-box是默认值。标准盒子模型。width与height只包括内容的宽和高，不包括边框（border），内边距（padding），外间距（margin）。注意：内边距、边框和外间距都在这个盒子的外部。比如说：.box{width:350px;border:10pxsolidblack;}在浏览器中的渲染的实际宽度将是370px。尺寸计算公式：width=border+margin+padding+CSS的宽度height=border+margin+padding+CSS的高度content-box顾名思义就是CSS宽度和高度只是针对内容部分，都不包含内容的边框（border）、外间距（margin）和内边距（padding）。任务4-3制作搜索框2、border-box告诉浏览器：width和height属性包括内容，内边距和边框，但不包括外间距。这是当文档处于Quirks模式时InternetExplorer使用的盒模型。注意，填充和边框将在盒子内，例如，.box{width:350px;border:10pxsolidblack;}导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。尺寸计算公式：width=CSS的宽度
height=CSS的高度border-box顾名思义就是CSS宽度和高度包含了边框、内容及内边距部分，但不包含外间距。任务4-3制作搜索框任务4-3制作搜索框搜索框的制作，首先设置*{box-sizing:border-box;}网页上所有元素均采用此属性，确保网页所有元素都采用border-box属性值来设置大小，其中文本框和按钮分别占据大小为80%和20%。设置placeholder="搜索..."属性，placeholder属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。任务4-3制作搜索框4-4HTML5+CSS3网页设计任务教程（第二版）制作无间隙滚动文字和图片任务4-4制作无间隙滚动文字和图片〓
无间隙滚动文字任务4-4制作无间隙滚动文字和图片〓
无间隙滚动文字CSS3中的animation属性是一个非常有用的工具，可以用来控制元素在页面上的运动和动画效果。animation属性非常强大，可以用其内置的参数来控制元素的动画效果，下面介绍一些常用的参数。animation-duration:定义动画持续时间，单位为秒或毫秒。animation-timing-function:定义动画的时间曲线，常用的值有linear、ease、ease-in、ease-out和ease-in-out。animation-delay:定义动画延迟执行的时间，单位为秒或毫秒。animation-iteration-count:定义动画的播放次数，可以是数字或infinite（无限播放）。任务4-4制作无间隙滚动文字和图片〓
无间隙滚动文字animation-direction:定义动画播放的方向，可以是normal（正常播放）、reverse（反向播放）或alternate（交替播放）。animation-fill-mode:定义动画播放前后元素的状态，可以是none（正常状态）、forwards（保持最后一帧的状态）或backwards（保持第一帧的状态）。animation-play-state:定义动画的播放状态，可以是running（正在播放）和paused（暂停播放）。参数放在一起的结构为：animation:动画名称动画时间运动曲线什么时候开始播放次数是否反方向动画起始或结束方向;任务4-4制作无间隙滚动文字和图片〓
无间隙滚动图片任务4-4制作无间隙滚动文字和图片〓
无间隙滚动图片在CSS3中，使用@keyframes规则用来创建动画，即通过逐步改变从一个CSS样式设定到另一个。在动画过程中，可通过多次更改CSS样式的设定。指定的变化发生时使用%，或关键字"from"和"to"，这是和0%到100％相同，其中0%是开头动画，100%是当动画完成。@keyframes语法：@keyframesanimationname{keyframes-selector{css-styles;}}1、animationname（必选）：定义animation的名称。2、keyframes-selector（必选）：动画持续时间的百分比。合法值：0-100%from（和0%相同），to（和100%相同）4-5HTML5+CSS3网页设计任务教程（第二版）制作轮播文字和图片任务4-5制作轮播文字和图片〓
轮播文字任务4-5制作轮播文字和图片〓
轮播图片任务4-5制作轮播文字和图片transform属性可以对元素进行移动、缩放、转动、拉长或拉伸。transform属性有四个常用方法：rotate(旋转)，scale(缩放)，translate(移动)和skew(倾斜)。1、rotate(旋转)rotateX(90deg);表示绕X轴，向上旋转90度。transform:rotateY(90deg);表示绕Y轴，向右旋转90度。transform:rotateZ(90deg);Z轴正对着我们的面前，相当于平面上顺时针旋转90度。2、scale(缩放)transform:scaleX(1);表示元素在X轴缩放元素。transform:scaleY(1);表示元素在Y轴缩放元素。3、translate(移动)translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。translateX(x)仅水平方向移动（X轴移动）。translateY(Y)仅垂直方向移动（Y轴移动）。4、skew(倾斜)transform:skewX(x);沿X轴方向倾斜。transform:skewY(y);沿Y轴方向倾斜。transform:skew(x,y);沿X轴和Y轴同时倾斜。4-6HTML5+CSS3网页设计任务教程（第二版）制作多种文字特效任务4-6制作多种文字特效〓writing-mode属性实现writing-mode属性定义了文本在水平或垂直方向上如何排布。语法格式如下：writing-mode:horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lrhorizontal-tb：水平方向自上而下的书写方式。即left-right-top-bottomvertical-rl：垂直方向自右而左的书写方式。即top-bottom-right-leftvertical-lr：垂直方向内内容从上到下，水平方向从左到右sideways-rl：内容垂直方向从上到下排列sideways-lr：内容垂直方向从下到上排列任务4-6制作多种文字特效〓writing-mode属性实现任务4-6制作多种文字特效〓column-count属性实现column-count：指定元素应该被分割的列数，数字表示。column-fill：指定如何填充列。大部分浏览器暂时不兼容，慎用。column-gap：设置列与列之间的距离。column-rule：所有column-rule-*属性的简写，设置列之间的宽度，样式和颜色。column-rule-color：指定两列间边框的颜色。column-rule-style：指定两列间边框的样式。column-rule-width：指定两列间边框的宽度。column-span：指定元素要跨越多少列。column-width：指定列的宽度是多少。columns：column-width与column-count的简写属性。任务4-6制作多种文字特效〓column-count属性实现4-7HTML5+CSS3网页设计任务教程（第二版）制作图片遮罩和悬停特效任务4-7制作图片遮罩和悬停特效〓
图片遮罩任务4-7制作图片遮罩和悬停特效〓
图片遮罩图片遮罩区域宽度500px，高度500px，一共两幅图片，鼠标移上去图片旋转显示相关文字。开始只是显示图片部分，文字“倒”在图片的右下角，溢出隐藏。transform-origin:rightbottom;属性设置旋转中心点为图片右下角；transform:rotate(90deg);设置旋转角度为90度；transition:all0.35s;设置所有属性的过渡时间为0.35s；.boxulli:hover.cover样式设置鼠标移上去时候，隐藏的文字从0度旋转到90度。任务4-7制作图片遮罩和悬停特效〓
悬停特效任务4-7制作图片遮罩和悬停特效〓
悬停特效悬停特效区域宽度1000px，高度220px，一共四幅图片，鼠标移上去图片翻滚显示相关文字。要利用CSS3实现3D的效果，最主要的就是借助transform-style属性。transform-style:preserve-3d;。当我们指定一个容器的transform-style的属性值为preserve-3d时，容器的后代元素便会具有3D效果，也就是当前父容器设置了preserve-3d值后，它的子元素就可以相对于父元素所在的平面，进行3D变形操作。设置翻转页面的位置和可见性，face为正面，back为反面，设置类.qcontainer:hover.film的backrotateY(180deg);代表鼠标移上去需要旋转180度。CSS3高级应用单元4页面局部布局单元5目录02中英文混合标题03阅读更多内容01图文混排与文字溢出04制作文字选项卡与图片选项卡05制作内容折叠与菜单折叠06制作导航条
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 喷绘供货合同模板
- ipo聘请律师合同模板
- 园区管道养护合同模板
- 个人监理服务合同模板
- 买卖公司合同模板
- 买船简易合同模板
- 制冷设备安装合同模板
- 企业租船合同模板
- 仔母猪购销合同模板
- 公对公汇款合同模板
- 景观照明施工组织方案
- 定向越野（教学设计）-2023-2024学年人教版体育三年级下册
- 部编人教版8八年级上册《初中语文补充习题》参考答案
- 江苏省扬州市广陵区扬州中学2024-2025学年高三上学期8月开学考试地理试题（解析版）
- 休闲农庄改造建设合同协议书
- 2024年新教科版科学一年级上册全册核心素养目标教案（新教材专用）
- 2024-2025年高考体育单招真题专项作文阅读汇编作文阅读复习
- 部编版道德与法治四年级下册第三单元美好生活哪里来 3 单元作业设计
- 代谢重编程对免疫功能的影响
- 2024年计算机软考（初级）程序员考试题库大全（含真题等）
- 思辨与创新智慧树知到期末考试答案章节答案2024年复旦大学
评论
0/150
提交评论