*一个简单的登录页面(小白练手之作)

最新推荐文章于 2021-12-03 21:53:35 发布

再见！！！

最新推荐文章于 2021-12-03 21:53:35 发布

阅读量200

点赞数 2

分类专栏：笔记文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_43909221/article/details/113829109

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个简单的登录页面(小白练手之作)

效果显示
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>炫酷登录界面</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<section>
			<div class="color"></div>
			<div class="color"></div>
			<div class="color"></div>
				<div class="loin-box">
					<h2>Login</h2>
					<form action="">
						<div class="user-box">
							<input type="text" name="" required="">
							<!-- label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
							如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，
							浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
							<label class="label1">Username</label>
						</div>
						<div class="user-box">
							<input type="password" name="" required="">
							<label class="label2">Password</label>
						</div>
						<a href="">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							Submit
						</a>
					</form>
				</div>
		</section>
	</body>
</html>

完整代码获取地址：关注公众号，回复“登录”即可`
在这里插入图片描述