用html+css写一个简单的登录页面
代码如下,拿走不谢~目前只是一个静态的页面,技术加强了再好好完善哈。
力拔山兮气盖世,加油!
这个是效果图:(祝大家学得开心~)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单2</title>
<style>
div {
margin: auto;
width: 400px;
height: 450px;
border: 1px solid gray;
border-radius: 20px;
background-color: #e1e5ee5e;
padding: 0 20px;
/* 选择div中的任何一个文字都没有效果 */
user-select: none;
}
/* 群组选择器 */
p.label1 {
font-size: 14px;
color: gray;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.ipt1 {
width: 341px;
height: 30px;
border-radius: 5px;
border: 1px solid skyblue;
margin-bottom: 20px;
}
.sel1 {
width: 50px;
height: 34px;
border-radius: 5px;
border: 1px solid skyblue;
}
.ipt2 {
width: 286px;
height: 30px;
border-radius: 5px;
border: 1px solid skyblue;
margin-bottom: 20px;
}
.ipt3 {
width: 253px;
height: 30px;
border-radius: 5px;
border: 1px solid skyblue;
margin-bottom: 20px;
}
.btn {
width: 83px;
height: 34px;
border-radius: 5px;
border: 1px solid skyblue;
background: url(images/666.jpg) center/83px 30px;
vertical-align: middle;
}
.sub {
width: 400px;
height: 50px;
border-radius: 5px;
border: 1px solid skyblue;
background-color: #92caf1;
margin-top: 20px;
color: white;
letter-spacing: 10px;
/* 将鼠标箭头键盘小手图标 */
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h2>请注册</h2>
<p>已有账号?
<a href="baidu.com">登录</a>
</p>
<form action="#" method="post">
<label for="user">用户名</label>
<input type="text" placeholder="请输入用户名" name="user" id="user" class="ipt1"><br>
<label for="phone">手机号</label>
<select name="phone" id="phone" class="sel1">
<option value="+86">+86</option>
<option value="+87">+87</option>
<option value="+88">+88</option>
</select>
<input type="text" placeholder="请输入手机号" name="phone" id="phone" class="ipt2"><br><!---placeholder是灰色字体,起提示作用的。--->
<label for="pwd">密 码</label>
<input type="password" placeholder="请输入密码" name="pwd" id="pwd" class="ipt1"><br>
<label for="code">验证码</label>
<input type="text" placeholder="请输入验证码" name="code" id="code" class="ipt3">
<input type="button" class="btn"><br>
<input type="checkbox" name="isAgree" id="isAgree" style="vertical-align: middle;">
<label for="isAgree" class="label1">阅读并接受协议</label><br>
<input type="submit" value="注册" class="sub">
</form>
</div>
</body>
</html>