css制作漂亮的登陆页面
1、首先准备一张验证码的图片，实际开发中是自动生成的，这里为了演示，提示了一张图片：
2、首先写html内容，标题为用户登陆，放3个文本框分别用来输入用户名，密码、验证码，再放一个提交按钮，代码如下：
<body>
<div class='gcs-login'>
<div class="gcs-login-panel">
<div class="login-title">
<h2>用户登陆</h2>
</div>
<div class="gcs-login-container">
<input type="text" class="input" placeholder="请输入用户名" />
</div>
<div class="gcs-login-container">
<input type="password" class="input" placeholder="请输入密码"/>
</div>
<div class="gcs-login-container">
<div class="gcs-login-validation">
<input type="text" class="input validation-input" placeholder="请输入验证码"/>
<img class="validation-img" src="../img/captcha.png" title="看不清楚？点击换一张">
</div>
</div>
<br />
<br />
<div class="gcs-login-container">
<input type="button" value="立即登录" class="btn-login" />
</div>
</div>
</div>
</body>
3、css初始化整个登陆框的大小与背景，代码如下：
.gcs-login {
position: absolute;
right: 0px;
box-sizing: border-box;
width: 470px;
height: 100%;
background-color: #E6E6E6;
z-index: 100;
}
.gcs-login .gcs-login-panel{
height: 360px;
position:absolute;
margin:auto;
left: 0;
right: 0;
top:0;
bottom: 0;
}
4、美化标题，输入框，代码如下：
.gcs-login .login-title {
text-align: center;
color: #62a8ea;
}
.gcs-login .login-title h2 {
letter-spacing: 10px;
}
.gcs-login-container {
width: 100%;
box-sizing: border-box;
width: 100%;
margin: 20px 0 0;
text-align: center;
}
.gcs-login .input {
border: 1px solid white;
display: inline-block;
box-sizing: border-box;
width: 80%;
height: 46px;
padding-left: 10px;
margin: 0 auto;
font-size: 14px;
outline: none;
color: #76838f;
}
效果图如下：
5、设置验证码图片大小，并设置登陆按钮样式，代码如下：
.gcs-login .gcs-login-validation{
width:80%;
margin: 0 auto;
position: relative;
}
.gcs-login .validation-input{
position: absolute;
width: 250px;
left: 0px;
}
.gcs-login img.validation-img{
position: absolute;
cursor:pointer;
width: 125px;
height: 45px;
right: 0px;
}
.gcs-login .input:focus {
outline: none;
border: 1px solid #62a8ea;
}
.gcs-login .btn-login {
background-color: #62a8ea;
border: none;
width: 80%;
height: 45px;
line-height: 45px;
color: white;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.gcs-login .btn-login:hover{
opacity: 0.9;
}
6、最后，提供下所有的代码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎登陆！</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
/*右边登陆框开始*/
.gcs-login {
position: absolute;
right: 0px;
box-sizing: border-box;
width: 470px;
height: 100%;
background-color: #E6E6E6;
z-index: 100;
}
.gcs-login .gcs-login-panel{
height: 360px;
position:absolute;
margin:auto;
left: 0;
right: 0;
top:0;
bottom: 0;
}
.gcs-login .login-title {
text-align: center;
color: #62a8ea;
}
.gcs-login .login-title h2 {
letter-spacing: 10px;
}
.gcs-login-container {
width: 100%;
box-sizing: border-box;
width: 100%;
margin: 20px 0 0;
text-align: center;
}
.gcs-login .input {
border: 1px solid white;
display: inline-block;
box-sizing: border-box;
width: 80%;
height: 46px;
padding-left: 10px;
margin: 0 auto;
font-size: 14px;
outline: none;
color: #76838f;
}
.gcs-login .gcs-login-validation{
width:80%;
margin: 0 auto;
position: relative;
}
.gcs-login .validation-input{
position: absolute;
width: 250px;
left: 0px;
}
.gcs-login img.validation-img{
position: absolute;
cursor:pointer;
width: 125px;
height: 45px;
right: 0px;
}
.gcs-login .input:focus {
outline: none;
border: 1px solid #62a8ea;
}
.gcs-login .btn-login {
background-color: #62a8ea;
border: none;
width: 80%;
height: 45px;
line-height: 45px;
color: white;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.gcs-login .btn-login:hover{
opacity: 0.9;
}
/*右边登陆框结束*/
</style>
</head>
<body>
<div class='gcs-login'>
<div class="gcs-login-panel">
<div class="login-title">
<h2>用户登陆</h2>
</div>
<div class="gcs-login-container">
<input type="text" class="input" placeholder="请输入用户名" />
</div>
<div class="gcs-login-container">
<input type="password" class="input" placeholder="请输入密码"/>
</div>
<div class="gcs-login-container">
<div class="gcs-login-validation">
<input type="text" class="input validation-input" placeholder="请输入验证码"/>
<img class="validation-img" src="../img/captcha.png" title="看不清楚？点击换一张">
</div>
</div>
<br />
<br />
<div class="gcs-login-container">
<input type="button" value="立即登录" class="btn-login" />
</div>
</div>
</div>
</body>
</html>