您的位置：首页 > Web前端 > CSS

html+css制作简单百度登录界面

2020-07-18 05:08 495 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="box">
<label><strong>用户名</strong></label>
<div class="box1">
<input type="text" placeholder="  请设置用户名">
</div>
<br/>
<br/>
<label><strong>手机号</strong></label>
<div class="box2">
<input type="text" placeholder="  可用于登录和找回密码">
</div>
<br/>
<br/>
<label><strong>&nbsp;&nbsp;&nbsp;密码&nbsp;</strong></label>
<div class="box3">
<input type="password" placeholder="  密码">
</div>
<br/>
<br/>
<label><strong>验证码</strong></label>
<div class="box4">
<input id="inp" type="text" placeholder="  请输入验证码"><input id="inp1" type="button" value="获取短信验证码">
</div>
<br/>
<br/>
<div class="box5">
<input type="checkbox" id="inp2"><label id="id1">&nbsp;&nbsp;阅读并接受<span>《百度用户协议》</span>及<span>《百度隐私权保护声明》</span></label>
</div>
<div class="box6">
<input type="button" id="inp3" value="注册">
</div>
</div>
</body>
</html>

*{
padding: 0;
margin: 0;
}
body{
border:solid 1px #dddddd;
width:500px;
height: 500px;
background-color:#ffffff;
margin: 0 auto; /*水平居中*/
margin-top: 200px;
}
.box{
/*border: solid 1px red;*/
text-align: center;
margin-top:80px;
position: relative;
top: 50%;/*偏移*/
margin-top: -180px;
}
.box1,.box2,.box3,.box4,.box5{
position:relative;
display:inline;
}
.box5{
/*border: solid 1px red;*/
width: 350px;
height: 40px;
}
label{
color: #666666;
font-size:15px;
}
input{
width: 350px;
height: 40px;
margin-left: 12px;
}
#inp{
width: 180px;
height: 40px;
margin-right:1px;
}
#inp1{
width: 151px;
height: 40px;
background-color: #f7f7f7;
color: #666666;
}

#inp2{
width: 12px;
vertical-align:middle;
margin-left:56px;
}
#inp3{
width: 354px;
height: 52px;
background-color: #3f89ec;
color: white;
font-size: 18px;
margin-left:54px;
}
label{
font-size: 14px;
vertical-align:middle;
}
span{
color: #1b66c7;
}
input::-webkit-input-placeholder{
font-size: 15px;
}
#id1{
font-size: 12px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航