利用html基础标签与列表标签制作可跳转的登录界面

希区柯克294

已于 2023-07-18 17:53:29 修改

阅读量1k

点赞数 3

分类专栏：前端文章标签： html 前端

于 2023-07-13 16:06:40 首次发布

本文链接：https://blog.csdn.net/weixin_65789931/article/details/131704810

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章仅包括登录界面，跳转界面在随后发布的html列表标签的简单运用中查看

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style type="text/css">
			div {
				background-color: rgba(187, 187, 187, .5);
				height: 400px;
				width: 500px;
				margin: auto;
				padding: 30px;
				margin-top: 100px;
				text-align: center;
				border-radius: 20%;
				box-shadow: 0 0 30px black;
			}
		</style>
	</head>
	<body style="background-image: url(./壁纸-1.png);">
		<div>
			<h1 style="text-align: center; color: rgba(85, 170, 255, .6); text-shadow: 0 0 30px black;">登录页面</h1><br>
			<label style=""><b>用户名: </b></label><input type="" name="" id="" value="" placeholder="请输入用户名" style="border-color: rgba(187, 187, 187, .5); border: 1px; border-radius: 10px; background-color: rgba(187, 187, 187, .5);" /><br><br>
			<label style=""><b>密码: </b>&nbsp;&nbsp;&nbsp;</label><input type="password" name="" placeholder="请输入密码" style="border-color: rgba(187, 187, 187, .5); border: 1px; border-radius: 10px; background-color: rgba(187, 187, 187, .5);" /><br><br>
			<label style=""><b>籍贯: </b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
			<select style="border-color: rgba(187, 187, 187, .5); border: 1px; border-radius: 10px; background-color: rgba(187, 187, 187, .5);">
				<option value=""><b>山西省临汾市尧都区</b></option>
				<option value=""><b>山西省太原市</b></option>
				<option value=""><b>山西省吕梁市</b></option>
			</select><br><br>
			<!-- <label >记住密码</label>
			<input type="checkbox" name="" id="" value="" /><br><br> -->
			<label style=""><b>性别: </b></label><input type="radio" name="sex" id="" value=""/><b>男</b>
			<input type="radio" name="sex" id="" value="" /><b>女</b><br><br>
			<label style=""><b>爱好: </b></label><input type="checkbox" name="" id="" value="" /><b>吃饭</b>
			</label><input type="checkbox" name="" id="" value="" /><b>睡觉</b>
			</label><input type="checkbox" name="" id="" value="" /><b>学习</b><br><br><br>

			<a href="biaodan.html" target="new" style="display: block; text-align: center; color: gainsboro; background-color: rgba(30, 30, 30, .5);width: 100px; height: 25px; margin: auto; padding: 10px; box-shadow: 0 0 10px black; border-radius: 5%; text-shadow: 0 0 10px black;">登录</a>
		</div>
	</body>
</html>