一个简单的注册页面，如有错误请指正（2.css）-CSDN博客

这段CSS代码定义了页面的样式让我逐个解释其功能

1. `* {}`通配符选择器用于将页面中的所有元素设置统一的样式。这里将margins和paddings设置为0以去除默认的边距。

2. `div img {}`选择页面中所有div元素内的img元素并设定其样式。这里设置img元素的宽度为视窗宽度的100%即铺满整个屏幕宽度高度为15视口高度。

3. `.head`定义一个类选择器用于对位于页头的元素进行样式设置。

4. `.head-left`和`.head-right`这两个类选择器分别用于对页头左侧和右侧的元素进行样式设置。设置了宽度、高度、字体大小、颜色、显示方式、背景颜色和底部边框等样式。

5. `.acc`和`.acc div`这两个选择器分别用于对显示账号的元素进行样式设置。

6. `.name`和`.name input`用于对显示姓名的元素进行样式设置。

7. `.add`和`.add div`用于对显示地址的元素进行样式设置。

8. `.code`和`.code input`用于对显示邮编的元素进行样式设置。

9. `.names`和`.names div`用于对显示名字的元素进行样式设置。

10. `.gender span`和`.gender input`用于对显示性别的元素进行样式设置。

11. `.gan-left`和`.print`用于对显示性格和印象的元素进行样式设置。

12. `#imgs`对ID为`imgs`的元素进行样式设置。

13. `.footer`和`.footer-f div`用于对页脚的元素进行样式设置。

14. `#alert`对ID为`alert`的元素进行样式设置包括宽度、高度、背景色、显示和定位等。

15. `.popup-container`、`.popup-container h2`、`.popup-container p`和`.popup-container button`用于对弹出框的元素进行样式设置包括定位、背景色、边框、内边距、字体颜色等。

这段代码定义了页面的布局和各种元素的样式通过对不同的元素应用不同的类选择器或ID选择器实现了个性化的样式设置。

* {
	margin: 0;
	padding: 0;
}

div img {
	width: 100vw;
	height: 15vh;
}

.head {
	width: 100%;
	display: flex;
}

.head-left {
	width: 50%;
	height: 40px;
	font-size: 12px;
	color: rgb(162, 162, 162);
	display: flex;
	background-color: #ebebeb;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid rgb(235, 235, 235);
}

.head-left div {
	/* margin-top: 8%; */
}

.head-right {
	width: 50%;
	height: 40px;
	font-size: 12px;
	color: rgb(162, 162, 162);
	display: flex;

	justify-content: center;
	align-items: center;
	border-bottom: 1px solid rgb(235, 235, 235);
}

.head-right div {
	font-size: 15px;
	justify-content: center;
	/* margin-top: 4%; */
}

.acc {
	width: 100%;
	margin-top: 10%;
}

.acc div {
	width: 50%;
	font-size: 15px;
	text-align: center;
}

.name {
	width: 80%;
	margin-left: 5%;
}

.name input {
	width: 100%;
	margin-top: 10%;
	border: none;
	margin-left: 10%;
	border-bottom: 1px solid #b1b1b1;
	outline: none;
}

.add {
	width: 100%;
	margin-top: 10%;
}

.add div {
	width: 50%;
	font-size: 15px;
	text-align: center;
}

.code {
	width: 80%;
	margin-left: 5%;
}

.code input {
	width: 100%;
	margin-top: 10%;
	border: none;
	margin-left: 10%;
	border-bottom: 1px solid #b1b1b1;
	outline: none;
}

.names {
	width: 100%;
}

.names div {
	width: 50%;
	margin-top: 10%;
	font-size: 15px;
	text-align: center;
}

.names input {
	width: 80%;
	margin-top: 10%;
	border: none;
	margin-left: 13%;
	border-bottom: 1px solid #b1b1b1;
	outline: none;
}

.gender {
	width: 100%;
	margin-top: 10%;
	display: flex;
}

.gender span {
	font-size: 15px;
}

.gender input {
	width: 15px;
	margin-left: 2%;
	border-radius: 100%;
	font-size: 10vh;
}


.gan-left {
	width: 30%;
	margin-left: 10%;
	font-size: 15px;
}

.print {
	display: flex;
	align-items: flex-end;
	width: 60%;
	margin-top: 10%;
	font-size: 15px;
	margin-left: 10%;
}

#imgs {
	width: 15vw;
	height: 10vh;
	border-radius: 50%;
	display: flex;
	align-items: center;
}

.footer {
	width: 85%;
	height: 50px;
	position: relative;
	margin-top: 1%;
	margin-left: 10%;
	justify-content: center;
	background-color: #66b1ff;
}

.footer-f {
	width: 100%;
	position: absolute;

}

.footer-f div {
	color: #fff;
	font-size: 15px;
	margin-top: 5%;
	text-align: center;
	justify-content: center;
}

#alert {
	width: 80%;
	height: 50px;
	margin-left: 8%;
	background-color: #66b1ff;
	display: none;
	text-align: center;
	padding: 10px;
	text-align: center;
	position: fixed;
	top: 100px;
}


.popup-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 20px;
	z-index: 9999;
}

.popup-container h2 {
	margin: 0;
	color: #333;
}

.popup-container p {
	margin: 10px 0;
	color: #555;
}

.popup-container button {
	padding: 5px 10px;
	background-color: #66b1ff;
	color: #fff;
	border: none;
	cursor: pointer;
}