案例：登录页面
登录页面
展示效果
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="reset.css">
<style>
div{
width: 500px;
height: 500px;
border: 2px solid gray;
/*外边距居中*/
margin: auto;
/*内边距*/
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-bottom: 1px;
}
/*“立即注册”设置*/
div p a{
/*右浮动*/
float: right;
/*去除下划线*/
text-decoration: none;
/*字体颜色*/
color: cyan;
}
/*输入框设置*/
div form input{
width: 480px;
height: 40px;
/*外边距*/
margin: 10px 0 10px 0;
/*内边距*/
padding: 0 10px 0 10px;
/*字体大小*/
font-size: 18px;
/*圆角*/
border-radius: 5px;
/*边框*/
border: 1px solid gray;
}
/*“忘记密码”设置*/
div form a{
/*右浮动*/
float: right;
/*去除下划线*/
text-decoration: none;
/*转换块级元素*/
display: block;
/*字体颜色*/
color: cyan;
/*外边距*/
margin: 10px 0 10px 0;
}
/*自动登录设置*/
div form #dl{
width: 16px;
height: 16px;
/*外边距*/
margin: 10px 0 10px 0;
}
div form .box{
/*背景颜色*/
background-color: dodgerblue;
/*边框*/
border: 1px solid gray;
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 type="password" placeholder="请输入密码"><br>
<input id="dl" type="checkbox">七天自动登录
<a href="#">忘记密码？</a><br>
<input class="box" type="submit" value="登录">
</form>
</div>
</body>
</html>
