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>
