首先来张完工的效果图。
一、html文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body> <div class="content">
<div class="panel">
<div class="group">
<ul>
<li><label>账号</label></li>
<li><input type="text" placeholder=" 请输入账号" /></li>
</ul>
<ul>
<li><label>密码</label></li>
<li><input type="password" placeholder=" 请输入密码" /></li>
</ul>
</div>
<div class="login">
<button type="button">登录</button>
</div>
</div>
<div class="register">
<button type="button">注册</button>
<button type="button">找回密码</button>
</div>
</div>
</body>
</html>
二、对应的login.css文件如下，需要将CSS文件放到对应的CSS文件夹中:
*{
margin:0 auto;
padding:;
}
/*添加一个浅灰色背景*/
body{
background-color:#eee;
}
.content{
/*border:1px solid red;*/
width:300px;
margin-top:50px;
}
.content .panel{
border:1px solid #ccc;
border-radius:5px;
height:220px;
background-color:#fff;
}
.content .panel .group{
margin:30px 10px 10px 20px;
}
.content .panel .group ul{
list-style: none;
margin-top:15px;
}
.content .panel .group ul li{
margin-top:2px;
}
.content .panel .group ul li input{
line-height:22px;
width:250px;
font-size: 14px;
font-family: "微软雅黑","宋体";
}
.content .panel .group ul li label{
font-size: 14px;
font-family: "黑体","微软雅黑","宋体";
font-weight: bold;
}
.content .panel .login{
text-align: center;
/*border:1px solid red;*/
margin-top:20px;
}
.content button{
width:255px;
height:30px;
background-color:#008000;
border:none;
color:#fff;
font-size:16px;
font-weight: bold;
cursor:pointer;
}
.content .register{
margin-top:15px;
text-align: center;
}
.content .register button{
width:80px;
height:30px;
border:none;
font-size:14px;
background-color:#4c6bb2;
color:#fff;
font-family: "微软雅黑";
text-align: center;
margin-left:30px;
}