html简单的登录界面结构，以及详细分析

最新推荐文章于 2025-09-19 10:13:36 发布

原创最新推荐文章于 2025-09-19 10:13:36 发布 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

这篇博客详细介绍了如何创建HTML登录界面，包括类选择器的使用、position: absolute;定位、背景设置、过渡效果、margin外边距以及盒子模型和border边框样式的应用。内容涵盖CSS基础和实践技巧，帮助理解网页布局和美化。

1例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登陆</title>
		<style>
		.box{
			width: 300px;
			height: 500px;
			top: 15%;
			left: 40%;
			position: absolute;
			border: 5px solid rgb(113, 113, 189);

		}	
		body{
        background-image:url("images/1.jpg");
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;
               }
		.box>form{
			text-align: center;
			margin-top: 15%;
		}
		.box>form>input{
			margin-top: 15%;
			width: 270px;
			height: 50px;

		}
		.one{
			width: 170px;
			height: 45px;
			margin-top:20px;
			transition-property: background;
			transition-duration: 2s;
			transition-timing-function: linear;
		
		}	
		.one:hover{
			background-color: aqua;

		}
			
		</style>
	</head>
	<body>
	<div class="box">
	<form>
				<h2>登录界面</h2>
				<input type="text" name="id" placeholder="姓名">
				<input type="password" name="as" placeholder="密码">
				<button  type="submit" class="one">提交</button>
	</form>
	</div>
	</body>
</html>

2类选择器

查阅资料可知

类选择器是 CSS 中一种常用的选择器，用于选择具有相同类名的元素。

类选择器使用类名作为选择器，并在类名前面加上一个点号（.）来表示。例如，.my-class 就是一个类选择器，选择具有 my-class 类名的所有元素。

使用类选择器的优点是可以将相同样式应用于多个元素，而不必为每个元素都添加一个独立的 ID 或标签选择器。

如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dom{
            color: aliceblue;
        }
    </style>
</head>
<body>
    <p class="dom">我是个p标签</p>
</body>
</html>

3.position: absolute;

查阅资料可知

position: absolute; 是 CSS 的样式规则，用于设置元素的定位方式。

具体解释如下：

position 是一个 CSS 属性，用于指定元素的定位方式。
absolute 是 position 的值之一，表示将元素的位置相对于其最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。

当将 position 设置为 absolute 时，元素的位置将被设置为相对于其最近的已定位的祖先元素。这意味着，通过使用 top、right、bottom 和 left 属性，可以调整元素相对于其定位祖先的位置。

一些重要的概念和注意事项：

已定位的祖先元素：已定位的祖先元素是指设置了定位属性（position 属性值为 relative、absolute、fixed 或 sticky）的元素。如果没有已定位的祖先元素，则根据文档的初始包含块进行定位。
定位偏移属性：使用 top、right、bottom 和 left 属性，可以相对于已定位的祖先元素或文档的初始包含块来调整元素的位置。这些属性控制元素的上、右、下、左方向的位置偏移量。
脱离文档流：使用 position: absolute; 可以使元素脱离正常的文档流，并且不占据原始位置。这意味着其他元素可能会填补其原始位置，而不会受到绝对定位元素的影响.