html5新属性和css3新属性

练习html5新属性以及css3新属性
html5新属性
一：直接利用第三方，腾讯，芒果等。分享之后，复制地址在代码中，之后打开刘浏览器就可以看见。
新增属性：audio(autoplay,controls,loop);video(autoplay,controls,loop,width,heigth)
部分代码如下：

<audio  controls loop>
		<source src="bgsound.mp3"/>
		<source src="music.ogg"/>
		您的浏览器版本太低
	</audio>

	<video autoplay  controls>
<!-- 多个浏览器同时兼容时候的写法 -->
		<source  src="movie04.ogg"/>
		<source  src="mp4.mp4"/>
	</video>

二：css3新属性
（1)结构伪类选择器（:frist-child,:last-child,nth-child,nth-last-child),
部分代码如下

/*a:hover  鼠标经过a链接的时候 */
	ul li:first-child {
		background-color: pink;
	}
	ul li:last-child {
		background-color: pink;
	}
	li:nth-child(3) {  选择第3个 
		background-color: purple;
	}

	li:nth-child(even) {   even 选择所有的偶数
		background-color: pink;
	}
	li:nth-child(odd) {   odd 选择所有的奇数
		background-color: purple;
	}

	li:nth-child(2n) {  n = 0  1  2 3 4 5   2n   0 2 4 6 8 10...开始 2n 类似于even
		background-color: pink;
	}
	

    li:nth-child(2n+1) {  奇数  odd
    	background-color: pink;
    }

	li:nth-child(4n) {  /* 4.8.12 */
		background-color: blue;
	}

（2）属性选择器（选取相同属性的）
部分代码如下：

div[class] {  选出所有 带有 class 属性的
		background-color: pink;
	  }
	  div[class=demo] {  选出 class = demo 的
		background-color: pink;
	  }

	  div[class^=test] {  选出test 开头的 标签
	  	background-color: purple;
	  }
	  div[class$=test] {  /*选出test 开头的 标签  ^    $  */
	  	background-color: purple;
	  }

（3）伪元素选择器（选择一个，一行，一段。或者用before,after)*
部分代码如下：

div::before {  /*必须带一个属性  content 伪元素 其实这个 before 是个盒子*/
		/* 这个盒子是行内的盒子  可以转换*/
		content: "我";
		/*width: 200px;
		height: 200px;
		background-color: pink;
		display: block;*/
	}
	div::after {
		content: "18岁";
	}

(4)多背景（css3）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 632px;
		height: 340px;
		/*子绝父相安排上*/
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	div:hover::after {
		/*（1）用border回外扩，（2）用内减会压不到，外面直接就有了。所以用伪元素，宽和高一样，压住，半透明度。*/
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border: 20px solid rgba(255, 255, 255, 0.5);
		/*给了宽和高，子盒子一定会撑开符盒子，所以利用css3中的内减模式*/
		box-sizing: border-box;
	}

	</style>
</head>
<body>
	<div>
		<img src="mi.jpg" alt="">
	</div>
	<div>
		<img src="mi.jpg" alt="">
	</div>
	<div>
		<img src="mi.jpg" alt="">
	</div>
	<div>
		<img src="mi.jpg" alt="">
	</div>
</body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_40169837/article/details/105848330
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 03:35:50
阅读 ( 570 )
分类：前端

html5新属性和css3新属性

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看