漂亮的登录界面（附代码）

最新推荐文章于 2024-01-19 13:55:03 发布

。。。ᵞᵉᴹᵃ

最新推荐文章于 2024-01-19 13:55:03 发布

阅读量227

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_69008064/article/details/128297742

版权

示例

仅为界面，登录按钮不可使用！！！

代码

HTML5代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>控制表单样式</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<form action="#" method="post">
		<p>
			<span>账号：</span>
			<input type="text" name="username" class="num" pattern="^[a-zA-Z][a-aZ-Z0-9_]{4,15}$"/>
		</p>
		<p>
			<span>密码：</span>
			<input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/>
		</p>
		<p>
			<input type="button" class="btn01" value="登录"/>
		</p>
	</form>
</body>
</html>

CSS代码：

@charset "utf-8";
body
{
	font-size: 18px;
	font-family: 微软雅黑;
	background: url('time.png') no-repeat top center;
	color: #FFF;
}
form,p
{
	padding: 0;margin: 0;border: 0;
}
form
{
	width: 620px;
	height: 250px;
	padding-top: 60px;
	margin: 250px auto;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
p
{
	margin-top: 15px;
	text-align: center;
}
p span
{
	width: 60px;
	display: inline-block;
	text-align: right;
}
.num,.pass
{
	width: 200px;
	height: 35px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 2px 2px 2px 22px;
	border-radius: 5px;
	color: #FFF;
}
.num
{
	background: 5px center rgba(255, 255, 255, 0.1);
}
.pass
{
	background: 5px center rgba(255, 255, 255, 0.1);
}
.btn01
{
	width: 190px;
	height: 35px;
	border-radius: 3px;
	border: 2px solid #000;
	margin-left: 65px;
	background: #57b2c9;
	color: #FFF;
	border: none;
}

CSS中涉及的背景图片（‘time.png’）(可改换其他图片)