学习了一些通用的基础知识之后,我们对HTML5 CSS3的补充内容加以学习。这里新增的内容大大简化了一些代码的书写。是十分有意义的。
一、 HTML5 新增的语义化标签
我们在书写html文件时的时候大多都是div去做,虽然可以解决问题,但是div没有语义。所以为了更有语义,增加了语义化标签,让编程更易理解,结构更加清晰。
比如为了更有语义:新增了 header头部 nav导航栏 articel内容 section文档某个区域 aside侧边栏 footer尾部。注意:新增的存在兼容性问题,IE9以上才支持。
<style> header { height: 120px; width: 800px; background-color: aquamarine; border-radius: 10px; margin: 15px auto; } nav { height: 120px; width: 800px; background-color: aquamarine; border-radius: 10px; margin: 15px auto; } </style>
复制
二、 HTML5新增的视频标签
2.1 视频标签的属性
1、autoplay 自动播放(谷歌禁用了,但是增加muted就可以使用了)。
2、controls 显示播放控件。
3、width 播放器宽度。
4、height 播放器高度。
5、loop 是否循环播放。
6、preload 是否预加载(有了autoplay 就不用设置了)。
7、src 路径。
8、poster 等待加载时显示的图片。
9、muted 静音播放。
2.2 视频标签的使用
1、<video src="" 属性 属性 属性 >;当前 <video> 元素支持三种视频格式:MP4 WEBM Ogg。 尽量使用 mp4格式,因为都兼容。
2、 设置一个video大的盒子,再标签内对video直接设置属性,然后在大盒子内部添加资源,依次执行找到可以执行的文件格式,如果没找到,添加提示语。
<video width="1400" height="500" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"> <source src="media/mi.mp4" type="video/mp4"> <source src="media/mi.ogg" type="video/ogg"> 您的浏览器暂不支持video标签 </video>
复制
三、 HTML5新增的音频标签
.1 音频标签的属性
1、autoplay 自动播放(谷歌禁用了)
2、controls 显示播放控件
3、loop 是否循环播放
4、src 路径
3.2 音频标签的使用
1、<audio src="" 属性 属性 属性 >;当前 <audio> 元素支持三种视频格式:MP3 Wav Ogg。 尽量使用 mp3格式,因为都兼容。
2、 设置一个audio大的盒子,再标签内对audio直接设置属性,然后在大盒子内部添加资源,依次执行找到可以执行的文件格式,如果没找到,添加提示语。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5新增音频标签</title> </head> <body> <h1>HTML5新增视频标签</h1> <ul> <li>1、音频 audio</li> <li>2、视频 video</li> <li>3、当前 <audio> 元素支持三种视频格式:MP3 Wav Ogg。 尽量使用 mp3格式,因为都兼容。</li> </ul> <h1>音频标签使用 </h1> <audio controls="controls" autoplay="autoplay"> <source src="media/music.mp3" type="audio/mp3"> <source src="media/music.ogg" type="audio/ogg"> 您的浏览器暂不支持video标签 </audio> <h1>音频标签的属性</h1> <ul> <li>1、autoplay 自动播放(谷歌禁用了)</li> <li>2、controls 显示播放控件</li> <li>3、loop 是否循环播放</li> <li>4、src 路径</li> </ul> </body> </html>
复制
四、 HTML5新增的input标签
如果要验证,将input所有的内容添加到form表单域,在点击提交以后就会自动验证。
1、<input type="search" name="" id="">search 搜索框,代替以前的text,语义更强。
2、<input type="email" name="" id="">email 邮箱。
3、<input type="url" name="" id="">url 。
4、<input type="date" name="" id="">date 日期。
5、<input type="time" name="" id="">time 时间。
6、<input type="month" name="" id="">month 月份。
7、<input type="week" name="" id="">week 周。
8、<input type="number" name="" id="">number 数字。
9、<input type="tel" name="" id="">tel 电话。
10、<input type="color" name="" id="">color 颜色选择菜单。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>HTML5新增input标签</h1> 如果要验证,必须添加form表单域,在点击提交以后就会自动验证 <form action=""> <ul> <li>1、<input type="search" name="" id="">search 搜索框,代替以前的text,语义更强</li> <li>2、<input type="email" name="" id="">email 邮箱</li> <li>3、<input type="url" name="" id="">url </li> <li>4、<input type="date" name="" id="">date 日期</li> <li>5、<input type="time" name="" id="">time 时间</li> <li>6、<input type="month" name="" id="">month 月份</li> <li>7、<input type="week" name="" id="">week 周</li> <li>8、<input type="number" name="" id="">number 数字</li> <li>9、<input type="tel" name="" id="">tel 电话</li> <li>10、<input type="color" name="" id="">color 颜色选择菜单</li> <!-- 在点击提交以后就会自动验证 --> <li><input type="submit"></li> </ul> </form> </body> </html>
复制
五、 HTML5新增的表单属性
何为表单属性,就是表单类型标签在使用时,可以设置的属性。我们以前学习<input>一般使用的只有 name id type value。现在新增了如下内容:
1、required 必填。
2、placeholder 提示文本。
3、autofocus 自动聚焦,页面加载后光标自动定位到指定位置。
4、autocomplete 用户正确提交过有些内容后时,基于输入过的值,显示可填写的内容.前提,这个input必须有name,且成功提交过。默认是on。
5、multiple 多文件提交,一般和type="file"一起使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5新增表单属性</title> <style> /* ::叫做伪元素 */ input::placeholder { color: red; } </style> </head> <body> <h1>HTML5新增表单属性</h1> <ul> <li>1、required 必填</li> <li>2、placeholder 提示文本</li> <li>3、autofocus 自动聚焦,页面加载后光标自动定位到指定位置</li> <li>4、autocomplete 用户正确提交过有些内容后时,基于输入过的值,显示可填写的内容.前提,这个input必须有name,且成功提交过。默认是on11</li> <li>5、multiple 多文件提交</li> </ul> <h1>HTML5新增表单属性测试</h1> <form action=""> <input name="box1" type="search" required="required" placeholder="用户输入了,这里不显示了" autofocus autocomplete>*必填<br> <input type="file" name="" id="" multiple><br> <input type="submit" name="" id=""> </form> </body> </html>
复制
六、 CSS3新增的选择器--属性选择器
6.1 什么是属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
一般是多个同种类的标签在一起,按照某个属性的内容,进行某些标签的选择。
注意:类选择器、属性选择器、伪类选择器,权重为 10
6.2 如何使用
1、 想要挑选的指定标签类型[ 属性 = ”指定内容“] 这样选择的是:属性的值完全是指定内容的指定标签类型。
2、 想要挑选的指定标签类型[ 属性 ^= ”指定内容“] 这样选择的是:属性的值以指定内容开头的指定标签类型。
3、 想要挑选的指定标签类型[ 属性 $= ”指定内容“] 这样选择的是:属性的值以指定内容结尾的指定标签类型。
4、 想要挑选的指定标签类型[ 属性 *= ”指定内容“] 这样选择的是:属性的值只要包含指定内容的指定标签类型。
为了更好的理解写了如下的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3新增属性选择器</title> <style> input[value] { color: blue; } input[type=password] { border-color: blue; } div[class^="cl"] { color: blueviolet; font-weight: 700; font-size: xx-large; } div[class$="ss"] { color: aqua; font-weight: 700; font-size: xx-large; } /* 此时的权重是10+1 */ div[class*="bb"] { color: red; font-weight: 700; font-size: xx-large; } </style> </head> <body> <h1>CSS3现状介绍</h1> <ul> <li>1、新增的CSS3特性有兼容性问题,ie9+才支持 </li> <li>2、移动端支持优于 PC 端</li> <li>3、不断改进中</li> <li>4、应用相对广泛</li> <li>5、后续主要学习:新增选择器和盒子模型以及其他特性 </li> </ul> <h1>CSS3 新增选择器</h1> <ul> <li>1、属性选择器</li> <li>2、结构伪类选择器</li> <li>3、伪元素选择器</li> </ul> <h1>CSS3 属性选择器</h1> 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器 <div>选择某一类标签下含有某个属性的部分标签</div> <div>注意:类选择器、属性选择器、伪类选择器,权重为 10。</div> <h1>CSS3 属性选择器测试</h1> <!-- 1、利用属性选择器:选择某一类标签下含有某个属性的部分标签 --> <input type="text"> <input type="text" value="你好哈哈哈哈呵呵"><br> <!-- 2、利用属性选择器:选择属性=特定值的元素--> <input type="time" name="" id=""> <input type="password" name="" id=""> <!-- 3、利用属性选择器:选择类名以某些值开头(^=)的元素--> <div class="cl class1">1</div> <div class="cl class2">2</div> <div class="cl class3">3</div> <div class="cl class4">4</div> <!-- 4、利用属性选择器:选择类名以某些值结尾($=)的元素 --> <div class="cl class1 ss">1</div> <div class="cl class2 ss">2</div> <div class="cl class3 ss">3</div> <div class="cl class4 ss">4</div> <!-- 5、利用属性选择器: 选取属性中含有某个内容的标签 --> <div class="xxx aaa bbb">1</div> <div class="xxx aaa bbb">2</div> <div class="xxx aaa bbb">3</div> <div class="xxx aaa bbb">4</div> </body> </html>
复制
七、 CSS3新增的选择器--结构伪类选择器
7.1 结构伪类选择器使用情况
根据父级选择器里面的子元素,一个父级有多个子元素,不用起太多名字了,直接使用这个方法,可以针对性选取。选取某一个,某几个,或者按照某个规律选取。
7.2 如何使用结构伪类选择器
父亲 想要选取的子标签类型:挑选规则
1、父亲 想要选取的子标签类型:first-child 选取第一个子标签
2、父亲 想要选取的子标签类型:last-child 选取最后一个子标签
3、父亲 想要选取的子标签类型:nth-child(数值 或者 n的表达式 或者 关键字) 选取某个子标签、或者以n的表达式和关键字选取某些子标签
1、2 使用起来很简单,第三个使用起来比较灵活后面主要讨论。
7.3 如何使用nth-child(n)
1、n 可以是数字,关键字和公式
2、n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始…
3、 n 可以是关键字:even 偶数,odd 奇数
4、n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )
注意:这里的n是从开始迭代的!但是第一个标签是从1开始增加的。
5、2n 偶数;2n+1 奇数;5n 5的倍数;n+5 从第五个开始(包含第5个);-n+5 取前五个(包含第5个)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3新增结构伪类选择器</title> <style> /* 结构伪类选择器选取第一个子标签 */ .box1 li:first-child { color: aquamarine; } .box2 li:nth-child(5) { color: aquamarine; } .box3 li:nth-child(odd) { background-color: blue; } .box3 li:nth-child(even) { background-color: red; } .box4 li:nth-child(-n+4) { /* n从0开始,每次加1 */ background-color: red; } .box4 li:nth-child(n+5) { /* n从0开始,每次加1 */ background-color: green; } </style> </head> <body> <h1>结构伪类选择器场景</h1> <div>根据父级选择器里面的子元素,一个父级有多个子元素,不用起太多名字了,直接使用这个方法,可以针对性选取。</div> <h1>结构伪类选择器场景</h1> <div>父类 想要选取的子标签类型:第几个{}</div> <h1>结构伪类选择器选取第一个子标签</h1> <ul class="box1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <h1>结构伪类选择器选取任意一个子标签</h1> <ul class="box2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <h1>结构伪类选择器选取任意多个子标签</h1> <ul class="box3"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <h1>结构伪类选择器nth,可以跟公式</h1> <ol class="box4"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ol> <ol class="box5"> <li>2n 偶数</li> <li>2n+1 奇数</li> <li>5n 5的倍数</li> <li>n+5 从第五个开始(包含第5个)</li> <li>-n+5 取前五个(包含第5个)</li> </ol> </body> </html>
复制
八、 CSS3新增的选择器--伪元素选择器
7.1 如何使用
父亲 想要选取的子标签类型:挑选规则
1、父亲 想要选取的子标签类型:first-of-type 选取第一个子标签
2、父亲 想要选取的子标签类型:last-of-type 选取最后一个子标签
3、父亲 想要选取的子标签类型:nth-of-type(数值 或者 n的表达式 或者 关键字) 选取某个子标签、或者以n的表达式和关键字选取某些子标签
注意:这里的n是从开始迭代的!但是第一个标签是从1开始增加的。
7.2 nth-of-type 和 nth-child 的区别
通关观看使用方法,我们发现nth-of-type 和 nth-child几乎没有任何区别。但是两者其实有很大不同,体现在我们看不到的地方。体现在处理方式不同上。
1、nth-child 会把所有的盒子(不论子标签的类型)都排列序号。执行的时候先看1、:nth-child(n)挑选第几个,2、再看:挑选出来的标签和想要选取的子标签类型是否一致。如果不一致则不执行内容。
2、nth-of-type 只对我们指定的属性的标签进行排序,再去挑选。
针对性的设计了一个测试案例---在多种标签下选择第二个div标签例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3新增选择器nth-type-of</title> <style> .box2 div:nth-of-type(2) { background-color: red; } </style> </head> <body> <h1>在多种标签下选择第二个div标签例子</h1> <section class="box2"> <p>我是p标签</p> <div>我是第一个div标签</div> <h1>我是h标签</h1> <div>我是第二个div标签</div> </section> </html>
复制
九、 CSS3盒子模型
9.1 伪元素选择器before和after
before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素。
9.2 伪类选择器的特点
1、before 和 after 创建一个元素,但是属于行内元素。
2、新创建的这个元素在文档树中是找不到的,所以我们称为伪元素。
3、语法: element::before {}。
4、before 和 after 必须有 content 属性。否则不执行!!
5、before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素。
6、伪元素选择器和标签选择器一样,权重为 1。
可以使用CSS创建一个新的HTML标签元素,简化html结构。
9.3 伪类选择器的使用1-实现左右浮动效果
以前我们想要实现大盒子里左右 各一个小盒子的情况,是使用float浮动制作的,但是这样需要我们对盒子进行CSS设置,占用很多的篇幅。现在可以使用直接使用伪类选择器制作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器before和after</title> <style> /* 这个的权重为 1 */ .box1 { border: 1px solid red; width: 600px; height: 300px; } /* 这个的权重为1+1 */ .box1::before { /* 必须包含content属性 */ /* 可以转换属性,就可以设置长宽了 */ content: "我是before"; border: 1px solid red; } .box1::after { /* 必须包含content属性 */ content: "我是after"; border: 1px solid red; /* float: right; */ } </style> </head> <body> <h1>使用场景</h1> 可以使用CSS创建一个新的HTML标签元素,简化html结构。 <div>注意:创建的是行内元素</div> <h1>注意</h1> <ul> <li>1、before 和 after 创建一个元素,但是属于行内元素</li> <li>2、新创建的这个元素在文档树中是找不到的,所以我们称为伪元素</li> <li>3、语法: element::before {}</li> <li>4、before 和 after 必须有 content 属性</li> <li>5、before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素</li> <li>6、伪元素选择器和标签选择器一样,权重为 1</li> </ul> <h1>使用测试</h1> <div class="box1"> 我是box原本的内容,我被伪元素包围了!!!!!!!!!! </div> </body> </html>
复制
9.4 伪类选择器的使用2-字体图标
比如我们设计一个下拉框,可以用到这个。
这里分析一下怎么做:1、需要一个大盒子。2、使用标签::after的方法使用字体图标。3、两者子绝父相。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器使用场景-字体图标</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?1lv3na'); src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } .box { position: relative; margin: 100px auto; width: 300px; height: 30px; border: 1px solid red; border-radius: 5px; } .box::after { font-family: 'icomoon'; /* content: ""; */ /* 字体图标的新的使用 */ content: "\e91e"; position: absolute; right: 10px; top: 8px; color: red; } </style> </head> <body> <h1>伪元素选择器使用场景-字体图标</h1> <div>不需要设置新的盒子,就可以简化代码</div> <div class="box"> </div> </body> </html>
复制
这里需要我们回顾一下如何使用字体图片:1、在CSS中申明(直接粘贴即可)。2、在使用的标签下,同样申明。3、从demo中找到想用的图标复制过来即可。
注意因为图标复制过来都一样,设计者看不出来,所以可以使用前面的专属代码。
9.5 伪类选择器的使用3-设置遮罩层
首先强调一点,如何设置鼠标经过对伪元素的影响,明确效果是对伪元素的父亲做的,所以使用方法是:父亲:hover::before/after{}
明确了使用方法,我们做一个以前的案例
思路分析:1、需要一个大盒子承装图片和标题,还需要一个伪元素作为遮罩层。2、大盒子和遮罩层的关系依旧是子绝父相。3、伪元素必须含有content属性,设置隐藏display: none;。4、设置经过效果(注意写法),设置显示:.box:hover::before{display: block;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title> <style> * { margin: 0; padding: 0; } .box { position: relative; margin: 100px auto; width: 400px; height: 280px; border: 1px solid red; } .box::before { content: ""; position: absolute; width: 400px; height: 225px; display: none; background: rgba(0, 0, 0, 0.5) url(images/arr.png) no-repeat center; } /* 注意写法 */ .box:hover::before { display: block; } .box img { width: 100%; } h1 { display: inline-block; border: 1px solid red; } </style> </head> <body> <h1>使用伪元素,设置遮罩层</h1> <div class="box"> <img src="images/tudou.jpg" alt=""> <h1>【预告】 今晚张柏芝做客</h6> </div> </body> </html>
复制
9.6 伪元素的清除
谈及清除这个操作,是因为一个父盒子,如果没内容,子元素都是浮动,那么父盒子没有高度。可以通过添加添加为伪元素避免。
9.6.1 单边法
单边法是使用after,转化为块级元素,堵住父盒子的尾部。
.box2::after { content: "必须是块级元素"; display: block; height: 0; visibility: hidden; clear: both; }
复制
9.6.2 双边法
双边法是使用after,before,转化为块级元素,堵住父盒子的头部和尾部。
这里注意为什么不是block,而是table?因为两个伪元素,需要转化为block后放在同一行,所以使用table。
.box3::after, .box3::before { content: ""; /* 因为是两个,所以使用table,块级元素,一行显示 */ display: table; } .box3::after { clear: both; }
复制
9.6.3 案例测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title> <style> * { margin: 0; padding: 0; } .box { position: relative; margin: 100px auto; width: 400px; height: 280px; border: 1px solid red; } .box::before { content: ""; position: absolute; width: 400px; height: 225px; display: none; background: rgba(0, 0, 0, 0.5) url(images/arr.png) no-repeat center; } /* 注意写法 */ .box:hover::before { display: block; } .box img { width: 100%; } h1 { display: inline-block; border: 1px solid red; } .box2 { border: 1px solid red; width: 300px; margin: 100PX auto; } .box2::after { content: "必须是块级元素"; display: block; height: 0; visibility: hidden; clear: both; } .box2 .left1 { float: left; height: 30px; width: 30px; border: 1px solid red; } .box2 .right1 { float: right; height: 30px; width: 30px; border: 1px solid red; } .box3 { border: 1px solid red; width: 300px; margin: 100PX auto; } .box3 .left2 { float: left; height: 30px; width: 30px; border: 1px solid red; } .box3 .right2 { float: right; height: 30px; width: 30px; border: 1px solid red; } .box3::after, .box3::before { content: ""; /* 因为是两个,所以使用table,块级元素,一行显示 */ display: table; } .box3::after { clear: both; } </style> </head> <body> <h1>使用伪元素,设置遮罩层</h1> <div class="box"> <img src="images/tudou.jpg" alt=""> <h1>【预告】 今晚张柏芝做客</h6> </div> <h1>单边伪元素的清除</h1> <ul> <li>1、额外标签法也称为隔墙法,是 W3C 推荐的做法。</li> <li>2、父级添加 overflow 属性</li> <li>3、父级添加after伪元素</li> <li>4、父级添加双伪元素</li> </ul> <h1>单边伪元素的清除的例子</h1> <div>我是父盒子,如果没内容,子元素都是浮动,那么我没有高度。可以添加为伪元素避免。</div> <div class="box2"> <span class="left1"></span> <span class="right1"></span> </div> <h1>双边伪元素的清除的例子</h1> <div>我是父盒子,如果没内容,子元素都是浮动,那么我没有高度。可以添加为伪元素避免。</div> <div class="box3"> <span class="left2"></span> <span class="right2"></span> </div> </body> </html>
复制
十、图片模糊处理
给图片添加一个filter: blur( px);就可以实现模糊效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片模糊处理filter</title> <style> img { filter: blur(15px); } img:hover { filter: blur(0px); } </style> </head> <body> <h1>filter滤镜</h1> <div>filter: 函数(); 例如: filter: blur(5px); blur模糊处理 数值越大越模糊</div> <img src="images/tudou.jpg" alt=""> </body> </html>
复制
十一、宽度计算函数clac()
我们可以借助这个方法,自动设置宽度。
比如我们可以让子标签始终比父标签小30px。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3属性calc函数</title> <style> .box1 { width: 200px; height: 100px; margin: 100px auto; background-color: aquamarine; border: 1px solid red; } .box1 .son1 { width: calc(100% - 30px); height: 20px; background-color: red; border: 1px solid blue; } </style> </head> <body> <h1>calc() 此CSS函数让你在声明CSS属性值时执行一些计算。</h1> <div> 使用如下: width: calc(100% - 80px); </div> <h1>子标签始终比父标签小30px</h1> <div class="box1"> <div class="son1"></div> </div> </body> </html>
复制
十二、CSS3的盒子模型
12.1 属性对盒子的影响
以前学习的盒子的大小:border+padding+长宽。
一旦改变border 和 padding ,盒子会被撑大。
12.2 盒子模型的设置
通过box-sizing设置盒子的模式。
1、content-box 就是默认的,以前我们使用的。
2、border-box 盒子大小只由长宽决定,即使border占了大小,盒子的总大小不变
注意:padding+border 不要超过宽度!!!!(否则也会撑大)
12.3测试案例
我们设置两个盒子的初始大小都一样100px 100px。但是盒子的属性不同,一个是content-box,一个是border-box。我们来观察padding和border对大小的影响。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3盒子模型</title> <style> .box1 { width: 100px; height: 100px; border: 10px solid red; background-color: hotpink; padding: 40px; } .box2 { /* 可以通过*直接设置 */ box-sizing: border-box; width: 100px; height: 100px; border: 10px solid red; background-color: hotpink; padding: 5px; } </style> </head> <body> <h1>属性对盒子的影响</h1> <div>以前盒子的大小:border+padding+长宽</div> <div>border 和 padding 对盒子大小会变化</div> <div>CSS3盒子模型可以使用 box-sizing 指定,这样计算盒子大小的方式就发生改变了。</div> <div>1、content-box 就是默认的,以前我们使用的。2、border-box 盒子大小只由长宽决定,即使border占了大小,盒子的总大小不变</div> <div>注意:padding+border 不要超过宽度</div> </body> <div class="box1"></div> <div class="box2"></div> </html>
复制
十三、 CSS3过渡效果
这个方法最牛的点是可以不使用JS,直接使用CSS就可以完成过渡动画效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态。
11.1 如何使用
注意:谁做过渡给谁加!!!加给需要变化的标签!!!
注意一个写法:1、hover决定哪一个标签开始效果变化。2、son是变化后的值
/* 注意这个写法 */ .box:hover .son { width: 200px; height: 10px; border-radius: 5px; background-color: red; }
复制
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 后两个一般直接省略。
11.2 测试案例-进度条
思路分析:1、一个大盒子充当外边框,一个小盒子充当进度条。2、设置小盒子的初始大小。3、设置鼠标hover后的属性变化。4、对小盒子添加过渡效果代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3过渡练习-进度条</title> <style> .box { width: 200px; height: 10px; padding: 1px; border: 1px solid red; border-radius: 5px; transition: all 10s; } .box .son { width: 100px; height: 10px; border-radius: 5px; background-color: red; transition: all 3s; } /* 注意这个写法 */ .box:hover .son { width: 200px; height: 10px; border-radius: 5px; background-color: red; } </style> </head> <body> <h1>进度条案例</h1> <div class="box"> <div class="son"></div> </div> </body> </html>
复制