CSS进阶

已于 2024-09-20 14:21:53 修改
阅读量324 收藏 2
点赞数 2
分类专栏： css 前端 文章标签： css 前端
于 2024-09-18 00:19:55 首次发布
原文链接：https://mysqlandredisconfig.helplook.com/docs/css-jin-jie-shi-yong, https://mysqlandredisconfig.helplook.com/docs/CSS-jin-jie-shi-yong-2, https://mysqlandredisconfig.helplook.com/docs/css-jin-jie-shi-yong-shi-zhan-ti-da-an这三个链接加起来的全部内容
版权

CSS进阶使用

常见的有三种布局:

一、相对布局

二、绝对布局

三、固定布局

一、相对布局:

想要把的布局开启, 那就需要用到position属性。
开启相对布局:

position: relative;

相对布局的特点:
1.是元素在移动位置的时候, 他是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
2.原来的位置继续占有, 后面的盒子仍然保留在原来的位置。

我们上代码, 来看看效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				/* 相对定位 */
				/* position 开启定位 relative 开启相对定位 */
				position: relative;
				top: 100px;
				/* 超出了浏览器屏幕范围, 而不是方块变小了 */
				/* right: 100px; */
				left: 0px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 1.是元素在移动位置的时候, 他是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置) -->
		<!-- 2.原来的位置继续占有, 后面的盒子仍然保留在原来的位置。 -->
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

运行结果:

我们可以看到上面淡蓝色的框, 把下面的深蓝色的框, 给覆盖掉了。这个就是遵循相对布局特点的第二条。

相对布局，是相对于自己原来的位置来移动的。参照物是自己, 不是浏览器。（相对布局的第一条特性）所以如果css里面设置right: 100px;的话, 则浅蓝色的方框会超出浏览器的范围, 因为它是按照自己的原来的位置来移动的。

二、 绝对布局:

绝对布局特点:
1.如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位
2.当爷爷开启定位的时候, 儿子以爷爷作为参考点
3.当爸爸开启定位的时候, 儿子以爸爸作为参考点

第一种情况:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				/* 爸爸现在没有开定位 */
				background-color: green;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				/* 开启绝对定位 */
				/* 爸爸没有开启定位 那儿子就以浏览器为参考点 */
				position: absolute;
				bottom: 100px;
				right: 500px;
			}
		</style>
	</head>
	<body>
		<!-- 如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位 -->
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

我们可以看到祖先元素或者祖先元素没有定位, 则儿子元素以浏览器为准定位。

结果如图:

红色方框的位置以浏览器为准定位。

第二种情况:
当爷爷开启定位的时候, 儿子以爷爷作为参考点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.yeye{
				width: 600px;
				height: 600px;
				background-color: palegreen;
				/* 给爷爷开启相对定位 */
				/* 当爷爷开启定位的时候, 儿子以爷爷作为参考点 */
				position: relative;
			}
			.baba{
				width: 400px;
				height: 400px;
				background-color: red;
			}
			.erzi{
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 给儿子开启绝对定位 */
				position: absolute;
				/* 为儿子加偏移量 */
				top: 100px;
				right: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 如果祖先元素有定位(相对、绝对、固定定位), 则以最近一级的有定位的祖先元素为参考点移动位置 -->
		<div class="yeye">
			<div class="baba">
				<div class="erzi"></div>
			</div>
		</div>
	</body>
</html>

结果:

第三种情况:

3.当爸爸开启定位的时候, 儿子以爸爸作为参考点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.yeye{
				width: 600px;
				height: 600px;
				background-color: palegreen;
				/* 给爷爷开启相对定位 */
				/* 当爷爷开启定位的时候, 儿子以爷爷作为参考点 */
				position: relative;
			}
			.baba{
				width: 400px;
				height: 400px;
				background-color: red;
				/* 为爸爸开启相对定位 */
				/* 当爸爸开启定位的时候, 儿子以爸爸作为参考点 */
				/* 当爷爷和爸爸开启定位的时候, 儿子以爸爸作为参考点(就近原则法) */
				/* 当爷爷没有开启定位并且爸爸开启定位的时候, 儿子以爸爸作为参考点 */
				position: relative;
			}
			.erzi{
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 给儿子开启绝对定位 */
				position: absolute;
				/* 为儿子加偏移量 */
				top: 100px;
				right: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 如果祖先元素有定位(相对、绝对、固定定位), 则以最近一级的有定位的祖先元素为参考点移动位置 -->
		<div class="yeye">
			<div class="baba">
				<div class="erzi"></div>
			</div>
		</div>
	</body>
</html>

我们把爸爸的那个元素, 打开相对定位
结果:

子绝父相

儿子元素是绝对布局, 爸爸元素是相对布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				background-color: red;
				/* 给爸爸开相对定位 */
				position: relative;
			}
			.box2{
				width: 150px;
				height: 150px;
				background-color: yellow;
				/* 给儿子1开绝对定位 */
				position: absolute;
			}
			.box3{
				width: 150px;
				background-color: green;
				/* 原来的为位置不再占有, 后面的盒子会占用位置 */
        /* 我们这里把高度设置为200px, 这样看上去更直观一点, 是被覆盖了。 如果只设置150px的话, 就看不到box3方框了, 其实它是被覆盖了, 而不是消失了。 */
				height: 200px;
			}
			.box11{
				width: 500px;
				height: 500px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">我是黄色的盒子</div>
			<div class="box3">我是绿色的盒子</div>
		</div>
		<div class="box11"></div>
	</body>
</html>

结果:

子绝父绝的情况比较少, 但不代表没有。
下面是子绝父绝的情况:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				background-color: red;
				/* 给爸爸开绝对定位 */
				position: absolute;
			}
			.box2{
				width: 150px;
				height: 150px;
				background-color: yellow;
				/* 给儿子1开绝对定位 */
				position: absolute;
			}
			.box3{
				width: 150px;
				background-color: green;
				/* 原来的为位置不再占有, 后面的盒子会占用位置 */
				height: 200px;
			}
			.box11{
				width: 500px;
				height: 500px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">我是黄色的盒子</div>
			<div class="box3">我是绿色的盒子</div>
		</div>
		<div class="box11"></div>
	</body>
</html>

结果:

固定布局

特点:
1.无论窗口怎么滑动, 元素的位置始终固定
我们举个例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.box{
				width: 100%;
				height: 100px;
				background-color: red;
				/* 给红色盒子加上固定布局fixed */
				position: fixed;
				/* 固定到 距离下面的距离为0 */
				/* 无论窗口怎么滑动, 红色盒子的位置始终固定 */
				bottom: 0px;
			}
			.box1{
        /* 让box1的盒子足够高, 以至于可以用上下滚动条来滑动, 通过上下滚动条滑动的实验来验证固定布局的特性  */
				height: 3000px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box1">我是一个盒子</div>
	</body>
</html>

结果:

我们可以从两张图片看的出来, 无论滚动条怎么上下滑动, 红色的方框始终在最下方, 这就是固定布局的作用。

flex布局

flex布局, 称之为弹性布局, 我们来学习下flex布局, 到底有哪些属性, 已经它的用法。

首先, 我们在css里面用到弹性布局, 需要用到display: flex;这句话。

display: flex;

我们简单举个列子, 上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				/* 弹性布局 */
				display: flex;
			}
			.inner-box{
				/* width: 200px; */
				height: 200px;
				border: 3px red solid;
				/* 每个盒子占一份空间 */
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box"></div>
			<div class="inner-box"></div>
		</div>
	</body>
</html>

结果:

我们可以从结果的图中发现, 有两个方框, 而且占用的宽度都是平均分, 这里面就和弹性布局有关了, 我们首先在box盒子里面设置了弹性布局, 然后再inner-box盒子里面设置了一个flex: 1;这个属性, 这个属性代表着两个inner-box,它们两占领的空间都是一份, 所以一个inner-box就占用了总共大小的二分之一。当然这里我要提醒下, 如果把flex值设置为2的话, 结果也是一样的, 因为第一个inner-box占比2, 第二个inner-box占比也是2, 那这样的话, 它们两占比大小, 还是一样不变的, 相当于都是4份里面占其中2份, 也就是说四分之二同时又等于二分之一。

那我们试着想一下, 如果第一个盒子的flex值设置为2, 第二个盒子的flex值设置为1, 那么呈现出来的效果又会是如何呢?

我们举个例子, 就一目了然了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				/* 弹性布局 */
				display: flex;
			}
			.inner-box1{
				/* width: 200px; */
				height: 200px;
				border: 3px red solid;
				/* inner-box1盒子占一份空间 */
				flex: 1;
			}
			.inner-box2{
				/* width: 200px; */
				height: 200px;
				border: 3px red solid;
				/* inner-box2盒子占两份空间 */
				flex: 2;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box1"></div>
			<div class="inner-box2"></div>
		</div>
	</body>
</html>

结果:

我们不难看到, 第一个盒子宽度短些, 第二个盒子宽度长些。原因也很简单, 因为我们把第一个盒子的flex的值设置成了1, 而第一个盒子的flex的值设置成了2, 那么第一个盒子占比整个盒子的三分之一, 而第二个盒子占比整个盒子的三分之二。

flex布局里面的常见属性配置:

x轴的排列方式用到的属性:
justify-content: 属性值;

以x轴为排列方式, 通常的属性值有:
1.flex-start默认排列方式
2.center居中排列方式
3.flex-end末尾排列方式
4.space-between均匀排列方式, 首个元素放置于起点, 末尾元素放置于终点
5.space-evenly均匀排列方式, 每个元素之间的间隔相等
6.space-around均匀排列方式, 每个元素周围分配相同的空间

这里需要注意下:
运行出来蓝色背景, 背景大小为全屏, height: 100vh;的意思是占比视口高度为100, 相当于占满全屏。

1.flex-start默认排列方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* flex-start默认排列方式 */
				/* center居中排列方式 */
				/* flex-end末尾排列方式 */
				/* space-between均匀排列方式, 首个元素放置于起点, 末尾元素放置于终点 */
				/* space-evenly均匀排列方式, 每个元素之间的间隔相等 */
				/* space-around均匀排列方式, 每个元素周围分配相同的空间 */
				justify-content: flex-start;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: flex-start; 通过这行代码,我们可以看到四个inner-box都在最左上方, 当然上下也有个参数叫做align-items属性, 这个一会儿我们会讲到，这里的关键是四个盒子都在最左边。

2.center居中排列方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* center居中排列方式 */
				justify-content: center;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: center; 通过这行代码,我们可以看到四个inner-box都在最中间。

3.flex-end末尾排列方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
        /* flex-end末尾排列方式 */
				justify-content: flex-end;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: flex-end; 通过这行代码,我们可以看到四个inner-box都在最右边。

4.space-between均匀排列方式, 首个元素放置于起点, 末尾元素放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* space-between均匀排列方式, 首个元素放置于起点, 末尾元素放置于终点 */
				justify-content: space-between;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: space-between; 通过这行代码,我们可以看到四个inner-box的中间间隔的距离一样, 而且第一个inner-box贴在浏览器的最左边, 第四个inner-box贴在浏览器的最右边。

5.space-evenly均匀排列方式, 每个元素之间的间隔相等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* space-evenly均匀排列方式, 每个元素之间的间隔相等 */
				justify-content: space-evenly;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: space-evenly; 通过这行代码,我们可以看到四个inner-box的中间间隔的距离一样, 而且第一个inner-box贴在浏览器的最左边, 第四个inner-box贴在浏览器的最右边, 但和justify-content: space-between; 的区别是, justify-content: space-evenly; 结果出来第一个和最后一个box-inner没有贴在浏览器旁边, 而是在浏览器中间。

6.space-around均匀排列方式, 每个元素周围分配相同的空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* space-around均匀排列方式, 每个元素周围分配相同的空间 */
				justify-content: space-around;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: space-around; 的效果, 在图中, 已用红色线条展示出来了。均匀排列方式, 每个元素周围分配相同的空间!

y轴的排列方式用到的属性:
align-items: 属性值;

以y轴为排列方式, 通常的属性值有:
1.start(或flex-start)默认排列方式, 元素位于容器的起始位置
2.center中间排列方式, 元素位于容器的中心
3.end(或flex-end)末尾排列方式, 元素位于容器的末尾位置

1.start(或flex-start)默认排列方式, 元素位于容器的起始位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* center居中排列方式 */
				justify-content: center;
				/* y轴的排列方式 */
				/* start(或flex-start)默认排列方式, 元素位于容器的起始位置 */
				align-items: flex-start;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

align-items: flex-start; 这个属性的设置让四个inner-box在浏览器的最上方。

2.center中间排列方式, 元素位于容器的中心

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* center居中排列方式 */
				justify-content: center;
				/* y轴的排列方式 */
				/* center中间排列方式, 元素位于容器的中心 */

				align-items: center;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

align-items: center;这个属性的设置让四个inner-box在浏览器的正中间。

3.end(或flex-end)末尾排列方式, 元素位于容器的末尾位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* flex-end末尾排列方式 */
				justify-content: center;
				/* y轴的排列方式 */
				/* end(或flex-end)末尾排列方式, 元素位于容器的末尾位置 */
				align-items: flex-end;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

align-items: flex-end; 这个属性的设置让四个inner-box在浏览器的最下方。

display属性的其他用法

常见的有:
1.block(块级元素)
2.inline(行内元素)

1.block(块级元素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 50px;
				background-color: red;
				/* 块级元素(默认), 占一整行空间 */
				display: block;
			}
		</style>
	</head>
	<body>
		<!-- span, 一左一右(行内元素), 都是在一行里面排列的(左右排列), 但不能调整大小 -->
		<span>我是文字</span>
		<span>我是文字</span>
		<!-- div一般默认都是块级元素, 块级元素, 都是占用一整行空间的, 但是可以挑战大小 -->
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>

结果:

我们可以看到有两个红色的方框, 以上下排列, 因为div的display属性默认值是block, 块级元素, 是占用一整行空间的, 所以第二个div会跟在第一个div下面

2.inline(行内元素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 50px;
				background-color: red;
				/* 行内元素, 左右排列, 都在同一行 */
				display: inline;
			}
		</style>
	</head>
	<body>
		<!-- span, 一左一右(行内元素), 都是在一行里面排列的(左右排列), 但不能调整大小 -->
		<span>我是文字</span>
		<span>我是文字</span>
		<!-- div一般默认都是块级元素, 块级元素, 都是占用一整行空间的, 但是可以挑战大小, 不过我们在这里把div设置成了inline(行内元素) -->
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>

结果:

我们可以看到有两个红色的方框, 以左右排列, 因为div的display属性默认值是inline, 行内元素, 所有的元素都在一行空间里面, 所以第二个div会跟在第一个div右边(左右排列)

css中hover的用法

比如:

/* 鼠标移入效果hover */
.inner-box:hover{
	color: red;
}

当我鼠标指在方框上面的时候, 方框里面的文字, 会变色
当我们鼠标离开方框的时候, 方框里面的文字, 又会变为原来的颜色。

实战:

实现以下界面:

先尝试着自己做下, 只要把网站里面的界面效果做出来就行哦, 不一定要和图片里面的一模一样哦。

答案:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/进阶css练习.css" />
	</head>
	<body>
		<div class="header">
			<img src="img/beautiful_girl.png" alt="图片无法加载" class="image"/>
			<h1>我是网站标题, 我最棒</h1>
		</div>
		<div class="navigator">
			<ul>
				<li><a href="https://www.baidu.com">主页</a></li>
				<li><a href="">关于我们</a></li>
				<li><a href="">加入我们</a></li>
			</ul>
			<ul>
				<li><a href="">联系电话</a></li>
			</ul>
		</div>
		<div class="content">
			<h2 class="content-title">欢迎来到我的网站</h2>
			<p class="content-text">这是我做的html和css的练习, 请批阅!!!</p>
		</div>
		<div class="footer">
			<p>2024</p>
			<p>我的网站练习</p>
		</div>
	</body>
</html>

.header{
	height: 100px;
	background-color: saddlebrown;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.image{
	width: 50px;
	height: 50px;
	display: flex;
	border-radius: 50%;
	border: 2px red solid;
}
.navigator{
	height: 50px;
	background-color: dimgray;
	display: flex;
	align-items: center;
	position: relative;
	line-height: 50px;
}
ul:nth-child(1){
	width: 200px;
	/* 去除文字前面的小圆点 */
	list-style-type: none;
	display: flex;
	justify-content: center;
	text-align: center;
}
ul:nth-child(1) li:nth-child(1){
	flex: 1;
	height: 50px;
}
ul:nth-child(1) li:nth-child(2){
	flex: 2;
	height: 50px;
}
ul:nth-child(1) li:nth-child(3){
	flex: 2;
	height: 50px;
}
.navigator ul:nth-child(2){
	/* 去除文字前面的小圆点 */
	/* position: absolute;
	right: 20px; */
	list-style-type: none;
	/* display: flex; */
	position: absolute;
	right: 40px;
	text-align: center;
}
.navigator ul:nth-child(2) li:nth-child(1){
	height: 50px;
	line-height: 50px;
}
ul:nth-child(1) li:nth-child(1):hover{
	background-color: darkgray;
	color: blue;
}
ul:nth-child(1) li:nth-child(2):hover{
	background-color: darkgray;
	color: blue;
}
ul:nth-child(1) li:nth-child(3):hover{
	background-color: darkgray;
	color: blue;
}
ul:nth-child(2) li:nth-child(1):hover{
	background-color: darkgray;
	color: blue;
}
a{
	text-decoration: none;
	color: white;
}
.content{
	border: 2px gray solid;
	border-radius: 5px;
	height: 100px;
	position: relative;
	top: 10px;
}
.content-title{
	position: relative;
	left: 40px;
	bottom: 5px;
}
.content-text{
	position: absolute;
	left: 40px;
	bottom: 5px;
}
.footer{
	position: fixed;
	width: 100%;
	bottom: 0px;
	height: 50px;
	background-color: dimgray;
	color: white;
	text-align: center;
}
.footer p{
	display: inline;
	line-height: 50px;
}

这里面的css,我们用到了外部样式。
运用了link标签将css文件引入进来。

请问, 你答对了吗? 如果把这个实战题靠自己独立做出来的话, 那就给自己一个掌声哦!!!

以上就是css进阶的所有内容了, 如果有哪里不懂的地方,可以把问题打在评论区, 欢迎大家在评论区交流!!!
如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!

源创可可
关注
专栏目录
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
startyangu的博客
02-24 87
https://blog.csdn.net/qq_39826207/article/details/126409050
Android五大布局：FrameLayout、LinearLayout、AbsoluteLayout、RelativeLayout和TableLayout
最新发布
一个IT人的技术成长历程。
11-07 1829
AndroidSDK 定义了多种布局方式以方便用户设计 UI。各种布局方式均为 ViewGroup 类的子类，结构如图 1 所示。本节将对 FrameLayout（单帧布局）、LinearLayout（线性布局）、AbsoluteLayout（绝对布局）、RelativeLayout（相对布局）和TableLayout（表格布局）进行简单的介绍。
css relative 和absolute布局
hang on it more longer
09-09 906
1、relative和absolute内部的元素都是相对于父容器，若父容器没有指定为relative，则默认为整个文档视图空间，absolute可以重叠元素，relative则不行。relative意味着元素的任意属性如left和right都是相对于其他元素的。absolute则相当于外部容器。2、margin属性相对于容器中的其他元素和父边框。
【安卓学习笔记】Android Studio第1课——布局与Hello World！
冯宇的博客
05-07 1168
一、Android五大布局分类1、相对布局2、绝对布局3、线性布局4、表格布局5、帧布局 二、具体布局的使用（这里主要介绍相对布局和线性布局）1、相对布局（RelativeLayout）可以这样理解：在安卓屏幕中的父元素就是整个屏幕，而子元素就是那些按钮、文本框之类的东西。相对布局内视图可用的常用属性如下：与位置相关的属性android:layout_above 表示在目标组件之上android:...
css中的相对布局和绝对布局及层叠关系
wyl164778的博客
07-26 960
简单暴力，亲测有效！！！ 一、css中的相对布局和绝对布局 相对布局：position:relative; 绝对布局：position:absolute; 二、层叠关系 z-index:10;//值越大，越在上层，越先显示 三、组合解决问题 文字在图片指定位置显示 四、代码 div id="pptImgcontainer" style="width:350px;height: 230px"> <div style="position: absolute;z-index: 10;left:
CSS进阶指引
09-25
接下来，我们将探讨CSS进阶中的一些关键知识点，包括BEM和OOCSS方法论、CSS预处理器的使用，以及代码组织和模块化的技巧。 BEM（Block, Element, Modifier）是一种CSS类命名方法论，旨在帮助开发人员创建可重用和...
CSS进阶书籍 网上基本没有书签，我的有
11-16
### CSS进阶书籍知识点概述 #### 一、深入探索CSS设计技术原理与方法 - **基础知识回顾**：书中首先对CSS的基本概念进行了回顾，包括选择器、属性与值等基础知识，为初学者打下坚实的基础。 - **布局原理**：详细...
CSS进阶学习资源 面试题
03-07
### CSS进阶学习资源知识点梳理 #### 一、CSS书写顺序 在编写CSS时，合理的书写顺序不仅能提高代码的可读性，还能帮助开发者更好地组织样式。以下是一种推荐的书写顺序： 1. **位置属性**：`position`, `top`, `...
CSS的三种布局方式
weixin_57153112的博客
07-28 1105
流式布局、浮动布局、flex布局、定位、position、弹性盒子
CSS网页布局教程:绝对定位和相对定位
08-03
NULL 博文链接：https://mauersu.iteye.com/blog/1993590
duilib各种布局的作用，相对布局与绝对布局的的意义与用法
a539284554的博客
08-13 613
转载请说明原出处，谢谢~~ 我使用duilib快3个月了，总体感觉duilib的使用还是较为简单的，只是刚入门时可能有些摸不清头脑。今天写一篇关于duilib的入门日志，大致说一下duilib中的各个布局的作用，以及很关键的相对布局与绝对布局的意义与用法。希望可以帮到使用duilib的新手朋友们。duilib高手就可以直接省略这篇文章了！ 我...
HTML的绝对布局和相对布局的区别
qq_45486059的博客
08-12 2431
绝对布局（absolute;）：一般指的指是相对于顶层页面；相对布局（relative）指的是相对于上一层页面 代码： 相对布局 position: relative; top:300px; left:350px; 绝对布局 position: absolute; top:300px; left:350px; (一般用的是绝对布局) ...
CSS+DIV三种布局方式
热门推荐
qq_34283987的博客
09-08 7万+
在学习了盒模型、块级元素和行内元素得到概念后，我们来说一下CSS的一个比较重要的用途：布局。以前我们学过表格可以起到布局页面的作用，比如布局表单，但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用
css三种布局简介(主要实现三栏布局)
zhanggui____的博客
10-25 579
一. 先引入一些简单概念 1.盒模型：首先是最中间的content区域，就是我们常说的内容区，我们通常设置的height和width就是设置的这部分的长度。内容区是padding区域，这部分指的是内容区到边框的区域 就是我们常说的内边距。然后就是border区域，它也是占用空间的。边框外面是margin区域，这部分指的是当前元素与其他元素的距离，就是常说的外边距。 2.两个属性display，poistion display 有如下几个值 block（元素表现为块级元素，...
【CSS】CSS经典布局之绝对底部布局
任磊
05-31 766
转载自：CSS经典布局之Sticky footer布局 何为Sticky footer布局？ 　　我们常见的网页布局方式一般分为header（页头）部分,content（内容区...
Duilib布局--相对布局和绝对布局
u012719076的博客
10-10 553
摘抄自Redrain的博客园
css三种布局方式
weixin_45272209的博客
03-04 1206
css几种布局方式 流体布局 left和right都是浮动元素(脱离文档流)，漂浮于普通文档流上方，使其盖住main设置的margin main(普通文档流)左右两边设置margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流体布局</title> </head> <body> <div c
css布局 定位（绝对相对固定）
weixin_43378878的博客
07-20 818
定位详解 position 属性 规定元素的定位类型。 属性值 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bot...
CSS进阶：预处理器与高效编码实践
"这篇CSS进阶指引探讨了CSS在网页设计中的重要性，特别是通过引入BEM和OOCSS等编码方法，以及CSS预处理器如LESS和Sass的应用，提升CSS编写效率和网站性能。文章强调了CSS并非简单的装饰手段，而是一个关键的技术组成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值