前端网页学习 Day49(z-index属性 flex布局响应式布局过渡动画)

本文链接：https://blog.youkuaiyun.com/sql121407/article/details/82873515

今天的学习涵盖了前端网页的几个关键概念：理解z-index属性如何控制显示层次，探索flex布局实现垂直居中，讨论响应式布局以适应不同设备，以及学习过渡和动画效果在交互中的应用。

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

前端网页学习(html)

DAY49

今日内容:

z-index属性

flex布局

响应式布局

过渡

动画

z-index属性

脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意的正整数

<!-- 需求1:d1,d2,d3均为box的一半大小 -->
<!-- 需求2:d1左上角,d2居中,d3右下角 -->
<!-- 需求3:d2区域在最上方(会覆盖d1,d3的重叠部分) -->
<div class="box">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>

CSS样式

<style type="text/css">
    .box {
        /*辅助子级进行绝对定位*/
        position: relative;
        width: 400px;
        height: 400px;
        background-color: red;
        margin: 0 auto;
    }
    .d1, .d2, .d3 {
        width: 200px;
        height: 200px;
        position: absolute;
    }
    .d1 {
        background-color: orange;
    }
    .d2 {
        background-color: blue;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
    }
    .d3 {
        background-color: black;
        right: 0;
        bottom: 0;
    }
    .d2 {
        z-index: 88888;
    }
    .d3 {
        z-index: 666;
    }
</style>

flex布局

作用:能够方便的实现块的垂直居中

flex布局:意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex布局</title>
	<style type="text/css">
		.container {
			width: 600px;
			height: 600px;
			border: 1px solid black;
			margin: 0 auto;
		}
		.item {
			/*width: 200px;*/
			/*height: 200px;*/
			/*border-radius: 50%;*/
			background-color: orange;
			font-size: 80px;
		}
		/*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/
		.container {
			display: flex;
		}
		.item {
			/*默认只能一行排列,所有item总宽不允许超出container宽度*/
			/*width: 300px;*/
			/*默认情况下item可以不规定高度,高度会自适应父级*/
			/*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/
		}
		/*.it1, .it3 {
			flex-grow: 1;
		}
		.it2 {
			flex-grow: 3;
			background-color: pink
		}*/
		/*container属性*/
		.container {
			/*flex-direction: row | row-reverse | column | column-reverse; 方向*/
			/*flex-direction: column-reverse;*/

			/*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/
			/*flex-wrap: wrap;*/

			/*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/
			/*item为沾满父级区域*/
			justify-content: space-around;
		}
		/*item属性*/
		.item {
			/*width: 300px;
			height: 200px;*/
		}

		.item {
			width: 100px;
		}
	</style>
	<!-- 总结 -->
	<!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->
	<!-- 2.container设置item的排列方向flex-direction -->
	<!-- 3.item对于container的空间占比flex-grow -->
</head>
<body>
	<div class="container">
		<div class="item it1">1</div>
		<div class="item it2">2</div>
		<div class="item it3">3</div>
	</div>
</body>
</html>

响应式布局

响应式布局就是一个网页能够兼容多个终端-而不是为每个终端做一个特定的版本

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>响应式布局</title>
	<style type="text/css">
		/*基本样式块*/
		/*.box {
			max-width: 1200px;
			width: 95%;
			margin: 0 auto;
			background-color: red!important;
		}
		.it {
			width: 300px;
			height: 300px;
			font: 900 50px/300px 'STSong';
			text-align: center;
			float: left;
			border-radius: 50%;
			background-color: orange;
		}
		.box:after {
			content: "";
			display: block;
			clear: both;
		}*/
		
		html, body {
			margin: 0;
		}
		.it {
			height: 300px;
			background-color: orange;
			font: 900 50px/300px 'STSong';
			text-align: center;
			border-radius: 50%;
			float: left;
		}
		.box:after {
			content: "";
			display: block;
			clear: both;
		}
		/*屏幕宽度超出1200px*/
		@media only screen and (min-width: 1200px) {
			/*1.在响应式布局内,css语法同正常样式表语法*/
			/*2.响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响*/
			/*解释:满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效*/
			/*3.当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则*/
			.box {
				background-color: pink;
			}
			.it {
				width: 25%;
			}

			/*原则:*/
			/*1.采用响应式布局的页面,基本样式块只做共性样式设置
			需要根据页面尺寸进行适应变化的样式均有响应式布局处理*/
			/*2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块*/
		}
		/*屏幕宽度间于600至1200px*/
		@media only screen and (min-width: 600px) and (max-width: 1200px) {
			.box {
				background-color: brown;
			}
			.it {
				width: 30%;
				margin: 0 calc(10% / 6);
			}

		}
		/*屏幕宽度小于600px*/
		@media only screen and (max-width: 600px) {
			.box {
				background-color: cyan;
			}
			.it {
				width: 80%;
				margin-left: 10%;
				min-width: 300px;
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="it">1</div>
		<div class="it">2</div>
		<div class="it">3</div>
		<div class="it">4</div>
		<div class="it">5</div>
		<div class="it">6</div>
		<div class="it">7</div>
		<div class="it">8</div>
		<div class="it">9</div>
		<div class="it">10</div>
		<div class="it">11</div>
		<div class="it">12</div>
	</div>
</body>
</html>

过渡

过渡:从一个状态以动画的方式变成另一种状态的这种变化过程

过渡效果通过hover产生,可以制作一个hover层

hover层处理方式:与显示层同等区域大小

同样可以将显示层的位置交于hover层处理

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>过度</title>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
			background-color: orange;
			/*过度*/
			/*持续时间*/
			/*来去均具有过度效果*/
			transition-duration: .5s;
			/*延迟时间*/
			/*transition-delay: 1s;*/
			/*过度属性: all*/
			/*transition-property: width, height;*/
			/*过度曲线*/
			/*transition-timing-function: linear;*/

			/*整体设置*/
			/*transition: all .3s .1s linear;*/
			transition: .3s cubic-bezier(0,.99,0,.99);
		}
		.hover {
			width: 200px;
			height: 200px;
			margin: 0 auto;
		}
		/*可以制造第二状态的处理方式*/
		.hover:hover .box {
			width: 400px;
			height: 190px;
			background-color: red;
			/*去向第二状态才有过度效果*/
			/*transition-duration: .1s;*/
		}

	</style>
</head>
<body>
	<div class="hover">
		<div class="box"></div>
	</div>
	
</body>
</html>

动画

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		/*动画样式*/
		.box {
			/*绑定动画名*/
			animation-name: wasai;
			/*持续时间*/
			animation-duration: 1s;
			/*延迟时间*/
			/*animation-delay: .1s;*/
			/*动画结束停留位置:backwards起点 forwards终点*/
			/*animation-fill-mode: forwards;*/
			/*运动次数 infinite无数次*/
			animation-iteration-count: 4;
			/*多次运动方向的规则*/
			/*alternate:来回*/
			/*alternate-reverse:终点开始来回*/
			/*animation-direction: alternate-reverse;*/quotes: ;
			/*动画状态 running*/
			/*animation-play-state: paused;*/

			/*整体设置*/
			animation: wasai 1s 2 linear alternate;
		}
		.box:hover {
			animation-play-state: running;
		}
		/*动画体*/
		@keyframes wasai{
   			0% {

   			}
    		100% {
    			width: 400px;
    		}
		}
		@keyframes wasai1{
   			0% {}
    		100% {}
		}
		@keyframes wasai2{
   			0% {}
    		100% {}
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>