<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html,body{
height: 100%;
}
body{
font-size:12px;
}
*{
margin: 0;
padding:0px;
}
form{
width: 400px;
padding:14px;
margin:auto;
border:2px solid #b7ddf2;
background:#ebf4fb;
}
h1{
font-size: 14px;
font-weight: bold;
margin-bottom:8px;
}
p{
font-size:11px;
color:#666;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:1px solid #b7ddf2;
}
label{
display: block;
width: 140px;
font-weight:bold;
text-align: right;
float: left;
/* border: 1px solid #000; */
}
.small{
color:#666;
font-size:11px;
font-weight:normal;
text-align: right;
display: block;
width: 140px;
/* border: 1px solid #000; */
}
input[type=text]{
float: left;
font-size:12px;
padding:4px 2px;
margin:2px 0 20px 10px;
border:1px solid #aacfe4;
width: 200px;
}
input[type=submit]{
clear: both;
margin-left: 150px;
width: 125px;
height: 31px;
text-align: center;
line-height:31px;
color: #fff;
font-size:11px;
font-weight: bold;
background-color:aqua;
border: 1px solid aqua;
}
input[type=text]:focus{
outline-style: dashed;
outline-width: 1px;
outline-offset:2px;
}
</style>
</head>
<body>
<form action="">
<h1>登录</h1>
<p>请准确填写个人信息...</p>
<label for="name">name<span class="small">姓名</span></label>
<input type="text" class='name'>
<label for="Email">email<span class="small">邮件</span></label>
<input type="text" class="name">
<label for="password">password<span class="small">密码</span></label>
<input type="text" class='name'>
<input type="submit" value="登录">
</form>
</body>
</html>
css登陆界面
最新推荐文章于 2024-05-31 11:20:07 发布