案例：注册页面
注册页面
效果展示：
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
/*清空浏览器内外边距*/
*{
/*清空外边距*/
margin: 0;
/*清空内边距*/
padding: 0;
}
div{
width: 500px;
height: 500px;
/*边框设置:宽度2px 实线 灰色*/
border: 2px solid gray;
/*外边距居中*/
margin: auto;
/*内边距：上10 右20 下10 左20 */
padding: 10px 20px 10px 20px;
}
/*分界线*/
div p{
/*外边框底部，下边框*/
border-bottom: 2px solid gray;
/*内边框底部*/
padding-bottom: 8px;
}
/*设置字体 字体的下边框*/
div p span {
/*字体大小*/
font-size: 18px;
/*字体加粗*/
font-weight: bold;
border-bottom: 4px solid purple;
padding: 0 0 2px 0;
}
/*操作a标签*/
div p a{
/*浮动*/
float: right;
color: aqua;
/*去除a标签下划线*/
text-decoration: none;
}
/*表单*/
div form input{
width: 480px;
height: 40px;
/*外边距*/
margin: 10px 0 10px 0;
/*内边距*/
padding: 0 10px 0 10px;
/*边框圆角*/
border-radius: 5px;
/*字体*/
font-size: 18px;
/*边框*/
border: 1px solid gray;
}
.msg{
width: 300px;
}
div form a{
/*转换块级元素*/
display: block;
/*边框*/
border: 1px solid gray;
/*圆角*/
border-radius: 5px;
width: 160px;
height: 40px;
/*文本居中*/
text-align: center;
/*去除下划线*/
text-decoration: none;
/*文本垂直居中*/
line-height: 40px;
color: purple;
/*往右浮动*/
float: right;
/*上外边距*/
margin-top: 10px;
}
div form #box{
background-color: dodgerblue;
border: 1px solid gray;
width: 500px;
height: 50px;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div>
<p>
<span>请注册</span>
<a href="#">立即登录 ></a>
</p>
<form action="">
<input type="text" placeholder="请输入手机号"><br>
<input class="msg" type="text" placeholder="请输入短信验证码"><a href="#">发送验证码</a><br>
<input type="text" placeholder="请输入用户名"><br>
<input type="password" placeholder="请输入密码"><br>
<input type="password" placeholder="请再次输入密码"><br>
<input class="msg" type="text" placeholder="请输入图形验证码"><a href="#">获取图片验证码</a><br>
<input id="box" type="submit" value="立即注册">
</form>
</div>
</body>
</html>
