案例：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0;
padding: 0;
}
.wai{
margin:auto;
width:1000px;
height: 600px;
background: #efefef;
}
.nei{
margin:auto;
width:800px;
height: 50px;
background: #38b593;
}
span{
display:inline-block;
margin-top: 58px;
width:790px;
height: 400px;
border:5px solid #fff;
}
input{
border:1px solid #b6c6d6;
width:280px;
height: 25px;
margin-left:230px;
font-size: 12px;
padding-left: 50px;
color:#999;
}
form{
margin-top: 20px;
}
p{
font-size: 14px;
margin-bottom:30px;
}
.five{
border: none;
font-size: 13px;
background-color:#38b593;
color:#fff;
width:330px;
height: 30px;
margin-left:230px;
padding-right:50px;
}
.one{
font-size:20px;
color: #7c7c7b;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="wai">
<div class="nei">
<span>
<form action="#" method="post">
<p class="one">注册新用户</p>
<p><input type="text" value="用户名"></p>
<p><input type="text" value="密码"></p>
<p><input type="text" value="记住密码"></p>
<p><input type="text" value="邮箱" ></p>
<p><input type="button" class="five" value="注册新用户"></p>
</form>
</span>
</div>
</div>
</body>
</html>
更多推荐
HTML5网页设计基础——用户注册界面
发布评论