文章仅包括登录界面,跳转界面在随后发布的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> </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> </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>