一个简单的注册页面，如有错误请指正（2.css）-Toy模板网

这篇具有很好参考价值的文章主要介绍了一个简单的注册页面，如有错误请指正（2.css）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这段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;
}

文章来源地址https://www.toymoban.com/news/detail-717398.html

到了这里，关于一个简单的注册页面，如有错误请指正（2.css）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！