HTML+CSS基础知识个人笔记_8_html8.0复习-优快云博客

本文深入探讨CSS3的高级应用，包括结构伪类选择器、属性选择器、伪元素选择器、过渡、动画及伸缩布局等核心概念，通过实例解析如何实现复杂网页布局和动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+CSS基础知识个人笔记_8

1. 结构伪类选择器
2. 属性选择器
3. 伪元素选择器
4. CSS3盒子模型
5. 经典案例
6. 过渡
- 6.1 transition
- 6.2 transform的translate（定位盒子居中,小心动画中可能的层叠）
7. 动画
8. 动画和变形小结
9. CSS3伸缩布局

1. 结构伪类选择器

注意理解，是第n个孩子的意思。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>03_结构伪类选择器.html</title>
	<style>
	/*ul li:first-child {
		background-color: pink;
	}*/
	/*ul li:last-child {
		background-color: pink;
	}*/
	/*ul li:nth-child(4) {
		background-color: pink;
	}*/
	/*ul li:nth-child(even) {
		background-color: purple;
	}*/
	/*ul li:nth-child(odd) {
		background-color: red;
	}*/
	/*ul li:nth-child(n) {
		background-color: purple;
	}*/
	/*ul li:nth-child(3n+1) {
		background-color: purple;
	}*/

	/*li:nth-child(2n) {
		background-color: yellow;
	}*/

	/*规定属于其父元素(dl)的第二个子元素(dd)的每个 dd 的背景色*/
	/*注意！！！祖先也是可以的！*/
	
	/*见day_12ctrip*/
	/*表示nav的后代中，排第二的孩子，这里的孩子不单单指的是nav的孩子，指的是nav后代的孩子
	nav所有后代中，它们对应的第二个孩子都会被选出来
	nav :nth-child(2)
	表示nav的后代中，排第二的孩子，且这些被选择的孩子是div标签的且类名为row的
	nav div.row:nth-child(2)*/
	dd:nth-child(2) {
		background-color: purple;
	}
	</style>
</head>
<body>
	<ul>
		<li>123</li>
		<li>123</li>
		<li>123</li>
		<li>123</li>
		<li>123</li>
		<li>123</li>
		<li>123</li>
	</ul>
	<dl>
		<dt></dt>
		<dd></dd>
		<dd></dd>
		<dd></dd>
		<dd></dd>
	</dl>
</body>
</html>

2. 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>04_属性选择器.html</title>
	<style>
	/*div[class="test"] {
		background-color: pink;
	}*/
	/*div[class^="te"] {
		background-color: purple;
	}*/
	/*对字母，可以不加双引号
	但是！习惯不好！都加上！！！*/
	/*a[href*="23"]
	{
		background-color: red;
	}*/
	a[href*="3"],
	div[class$="3"] {
		background-color: blue;
	}
	</style>
</head>
<body>
	<div class="test">123</div>
	<div>123</div>
	<div>123</div>
	<div>123</div>
	<div class="te3">123</div>
	<div>123</div>
	<a href="#1231w">123</a>
	<a href="#231w">1324</a>
</body>
</html>

3. 伪元素选择器

不要忘记content

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06_before和after.html</title>
	<style>
	/*before是个盒子！*/
	/*它不是真正的盒子，但是有盒子的状态*/
	/*在div 内容 的前面加东西！*/
	div::before {
		/*content属性必要！*/
		content: "我";
		/*这个盒子是行内的盒子！*/
		width: 200px;
		height: 200px;
		background-color: pink;
		display: block;
	}
	/*在div 内容 的后面加东西！*/
	div::after {
		content: "浙江";
	}
	.clearfix::after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	</style>
</head>
<body>
	<div>声明</div>
</body>
</html>

4. CSS3盒子模型

内减模式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>07_CSS3盒子模型.html</title>
	<style>
	div {
		width: 300px;
		height: 300px;
		background-color: pink;
		padding: 30px;
		border-top: 50px solid red;
		/*CSS3盒子模型,盒子大小就是width和height，内减模型，padding和border都是width和height*/
		box-sizing: border-box;
		/*默认，盒子宽度=padding(l r) + border(t b) + width*/
		/*box-sizing: content-box;*/
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

5. 经典案例

tab

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab.html</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.tab-hd {
		width: 190px;
		background-color: pink;
		border-bottom: 1px solid #ccc;
		position: relative;
	}
	a {
		/*注意，要转为行内块，否则无法设置宽高
		行高也是如此，撑不开a,a本身高度还是auto*/
		font: 12px/26px "Microsoft Yahei";
		padding: 5px;
		display: inline-block;
		text-decoration: none;
		color: #747474;
	}
	a:hover {
		color: #f10215;
	}
	.more {
		position: absolute;
		right: 0;
		top: 0;
	}
	span {
		color: #747474;
	}
	.line {
		width: 30px;
		height: 2px;
		background-color: #f10215;
		position: absolute;
		bottom: -1px;
		left: 2px;
	}
	</style>
</head>
<body>
	<div class="tab-hd">
		<a href="javascript:;" class="news">新闻</a>
		<span>|</span>
		<a href="javascript:;">公告</a>
		<a href="#" class="more">更多</a>
		<div class="line"></div>
	</div>
</body>
</html>

切盒子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>切盒子.html</title>
	<style>
	* {
		margin: 0;
		padding: 0
	}
	li {
		list-style: none;
	}
	div {
		width: 190px;
		height: 209px;
		/*background-color: pink;*/
		overflow: hidden;
	}
	ul {
		width: 192px;
		height: 210px;
	}
	li {
		width: 47px;
		height: 69px;
		/*background-color: blue;*/	
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	</style>
</head>
<body>
	<div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

滑动门

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动门</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	a {
		display: inline-block;
		/*行高会继承，会撑开盒子*/
		/*height: 33px;*/
		padding-left: 15px;
		background: url(images/wx-tu.png) no-repeat;
		text-align: center;
		font: 12px/33px "Microsoft Yahei";
		color: #fff;
		text-decoration: none;
	}
	a:hover,
	a:hover span {
		background-image: url(images/wx-ou.png);
	}
	span {
		display: inline-block;
		/*行高会继承，会撑开盒子*/
		/*height: 33px;*/
		padding-right: 15px;
		background: url(images/wx-tu.png) no-repeat right 0;
	}
	</style>
</head>
<body>
	<div>
		<!-- a放左半圆 -->
		<a href="#">
			<!-- span放右半圆 -->
			<span>首页</span>
		</a>
	</div>
</body>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图.html</title>
	<style>
	@font-face {
	  	font-family: 'icomoon';
	  	src:  url('fonts/icomoon.eot?4a76h7');
	  	src:  url('fonts/icomoon.eot?4a76h7#iefix') format('embedded-opentype'),
	    	url('fonts/icomoon.ttf?4a76h7') format('truetype'),
	    	url('fonts/icomoon.woff?4a76h7') format('woff'),
	    	url('fonts/icomoon.svg?4a76h7#icomoon') format('svg');
	  	font-weight: normal;
	 	font-style: normal;
	}
	li {
		list-style: none;
	}
	* {
		margin: 0;
		padding: 0;
	}
	div {
		width: 590px;
		height: 470px;
		position: relative;
		margin: 30px auto 0;
	}
	ul a {
		display: inline-block;
	}
	.arr-left,
	.arr-right {
		position: absolute;
		line-height: 40px;
		background-color: rgba(0, 0, 0, .3);
		top: 50%;
		margin-top: -20px;
		font-family: "icomoon";
		color: rgba(255, 255, 255, .3);
		font-size: 36px;
		text-decoration: none;
	}
	.arr-left {
		left: 0;
		padding-left: 3px;
	}
	.arr-right {
		right: 0;
		padding-right: 3px;
	}
	.arr-left:hover,
	.arr-right:hover {
		background-color: rgba(0, 0, 0, .6);
		color: rgba(255, 255, 255, .6);
	}
	ol {
		/*绝对定位，模式转换，不要定宽，这样可任意增加小圆点的数量*/
		/*height: 12px;*/
		/*width: 160px;*/
		background-color: rgba(0, 0, 0, .1);;
		padding: 4px;
		border-radius: 12px;
		position: absolute;
		bottom: 10px;
		left: 50%;
		margin-left: -124px;
	}
	ol li {
		width: 12px;
		height: 12px;
		background-color: blue;
		float: left;
		margin: 0 4px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .3);
	}
	ol li:hover {
		cursor: pointer;
	}
	.current {
		background-color: #fff;
	}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#"><img src="images/slider1.jpg" alt=""></a></li>
		</ul>
		<a href="#" class="arr-left"></a>
		<a href="#" class="arr-right"></a>
		<ol>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</div>
</body>
</html>

6. 过渡

6.1 transition

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02_过渡.html</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*多属性要逗号隔开，一组一组的隔开
		过渡写在本身上，谁做过渡写谁身上*/
		/*transition-property transition-duration transition-timing-function transition-delay
		时间必须带单位！*/
		/*一般只写前面两个*/
		transition: width .5s, height .2s;
	}
	div:hover {
		width: 300px;
		height: 300px;
		background-color: red;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

6.2 transform的translate（定位盒子居中,小心动画中可能的层叠）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>05_transform的translate（定位盒子居中）.html</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*position: absolute;*/
		/*top: 50%;*/
		/*left: 50%;*/
		/*translate 中的百分比，是对自身宽度的百分比！！！
		不同于之前遇到的定位或者宽高，是对父亲的百分比*/

		/*注意！！！translate 类似相对定位，脱标，且占坑*/
		transform: translate(50px, 50px);
		/*transform: translate(-100px, 0);*/
		/*可以连写*/
		/*顺序有关系，先移动，后缩放*/
		/*transform: translate(100px, 199px) scale(1.3);*/
	}
	p {
		width: 100px;
		height: 100px;
		background-color: purple;
	}
	</style>
</head>
<body>
	<div></div>
	<p></p>
</body>
</html>

7. 动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		position: absolute;
		top: 50%;
		left: 50%;
		/*margin-top: -50px;*/
		/*margin-left: -50px;*/
		/*小心！transform 和 animation 里面的transform会有冲突，被层叠*/
		/*不管是否设置相同的transform属性*/
		/*如外面translate，动画rotate，那么外面的translate也会无效*/
		/*这里的translate就没有效果了*/
		transform: translate(-50%, -50%);
		/*transform-origin: top left;*/

		/*必须定义动画的名称和时长
		@keyframes 	规定动画。 	3
		/*animation 	所有动画属性的简写属性，除了 animation-play-state 属性。
		animation-name 	规定 @keyframes 动画的名称。
		animation-duration 	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
		animation-timing-function 	规定动画的速度曲线。默认是 "ease"。
		animation-delay 	规定动画何时开始。默认是 0。
		animation-iteration-count 	规定动画被播放的次数。默认是 1。
		animation-direction 	规定动画是否在下一周期逆向地播放。默认是 "normal"。
		animation-play-state 	规定动画是否正在运行或暂停。默认是 "running"。
		animation-fill-mode 	规定对象动画时间之外的状态。*/
		animation: move 1s linear 0s infinite alternate;
		/*animation: change-color 1s linear 0s infinite alternate;*/
		/*animation: reform 1s linear 0s infinite alternate;*/
		/*animation: rotate 1s linear 0s infinite normal;*/
	}
	div:hover {
		transform: translate(50px, 50px);
	}
	@keyframes move {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(200px);
		}
	}
	@keyframes reform {
		/*为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。*/
		0% {
			background-color: #fff;
			transform: scale(1);
		}
		50% {
			background-color: #000;
			transform: scale(1.3);
		}
		100% {
			background-color: #fff;
			transform: scale(1.0);
		}
	}
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	@keyframes change-color {
		from {
			background-color: red;
		}
		to {
			background-color: #000;
		}
	}
	p {
		width: 50px;
		height: 50px;
		background-color: purple;
	}
	</style>
</head>
<body>
	<div></div>
	<p></p>
</body>
</html>

8. 动画和变形小结

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02_动画和变形小结.html</title>
</head>
<body>
	1.  在动画里，如果有transform，会层叠掉不在动画里的transform，而不管是否设置相同的transform属性
		如外面translate，动画rotate，那么外面的translate也会无效
		hover也一样
		如，在定位时，用了translate的，在动画的时候又用translate，原来的就不再起效
	2. 	共同点，动画和变形都类似于相对定位，脱标但占坑
	3. 	transform 的书写位置有讲究，先写的先变化
		transform: translate(-50%, -50%) scale(1.0);
		在动画里就会显现明显
</body>
</html>

9. CSS3伸缩布局

父亲添加弹性布局
孩子设定份数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06_CSS伸缩布局（垂直分布）.html</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	section {
		/*width: 1000px;*/
		width: 80%;
		height: 150px;
		margin: 0 auto;
		/*父亲添加 弹性布局*/
		display: flex;
		/*section的最小宽度*/
		/*min-width: 600px;*/
		flex-direction: column;
	}
	section div {
		height: 100%;
		/*孩子的份数*/
		/*flex: 1;*/
	}
	section div:nth-child(1) {
		/*固定宽度，那么这里就不要声明flex
		否则会覆盖掉width
		如果width也没有
		那么默认是内容宽度
		当没有内容的时候
		不会渲染，表现的和display: none;一样*/
		/*width: 600px;*/
		flex: 2;
		background-color: pink;
	}
	section div:nth-child(2) {
		background-color: blue;
		/*margin: 0 70px;*/
		margin: 70px 0;
		flex: 2;
	}
	section div:nth-child(3) {
		background-color: purple;
		flex: 1;
	}
	</style>
</head>
<body>
	<section>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</section>
</body>
</html>

HOME