前端工具HBuilder
浏览器
首先准备一张验证码的图片，实际开发中是自动生成的，这里为了演示，提示了一张图片：
首先写html内容，标题为用户登陆，放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;}
美化标题，输入框，代码如下：.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;}
最后，提供下所有的代码，如下：
用户登陆