html5新属性和css3新属性

最新推荐文章于 2024-06-23 16:20:48 发布

qq_40169837

最新推荐文章于 2024-06-23 16:20:48 发布

阅读量351

点赞数

分类专栏：每日自主练习写代码的散记文章标签： css html5

本文链接：https://blog.csdn.net/qq_40169837/article/details/105848330

版权

每日自主练习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

写代码的散记

2 篇文章 0 订阅

订阅专栏

练习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>

在这里插入图片描述