HTML5实战教程———开发一个简单漂亮的登录页面

　　最近看过几个基于HTML5开发的移动应用，比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的，虽然还是有点反应迟钝，但已经比较流畅了，相信随着智能手机的配置越来越高性能越来越好，会越来越流畅，HTML5技术的使用在移动端应用的会越来越普及，应用越来越广泛，因此作为移动开发者，掌握这门技术自然有着强烈的紧迫感。今天就写一个小小的登录页面的demo，巩固最近的学习，也给有兴趣的朋友学习HTML5技术做个参考。

　　在这里您可以下载到我最后实现的登录页面的demo源码，地址:http://pan.baidu.com/s/1kU1I50b。

准备工作

　　1.webStorm或者其他网页开发工具。因为我是用webStorm比较多，因此我只能在这里提供一下webStorm（破解版）的下载地址：windows版本，Mac版本。

　　2.会webSorm工具的基本使用。比如创建项目，创建css文件，创建HTML文件。

登录页面效果图

样图分析

　　1.这个是一个简单的登录页面，从页面效果图上看，我们可以通过图片来做按钮效果，也可以完全通过代码来实现。本文将通过纯源码的形式来实现。

　　2.前端开发通常要将UI设计的效果图进行切割，将他们分成不同的模块，本例只是一个简单的页面，但是这种切割思路同样适合其他大型网页，别看像京东，淘宝页面内容繁多，但是当您静下心来，将他们切割分块之后，您会发现其实用到的技术都差不多。下图是我对这个登录页面的切割思路：

　　这个页面可以有很多的切块方式，但是为了扩展性，分不同功能进行尽可能小的模块切割是我个人认为比较合适的方式。切割完之后，我们就可以编写我们的HTML5页面了。

操作步骤

　　1.在项目目录下创建login.html文件，在项目目录下创建CSS目录，并在CSS目录下创建login.css样式文件。如图所示结构：

　　2.然后按照我们刚才的设计，在index.html中实现我们的想法，加入如下代码:

 <div class="content">

        <!--  登录面板    -->
        <div class="panel">

            <!--  账号和密码组    -->
            <div class="group">
                <label>账号</label>
                <input placeholder="请输入账号">

            </div>
            <div class="group">
                <label>密码</label>
                <input placeholder="请输入密码" type="password">
            </div>

            <!--  登录按钮    -->
            <div class="login">
                <button>登录</button>
            </div>
        </div>

        <!--  注册按钮    -->
        <div class="register">
            <button>创建新账号</button>
        </div>

    </div>

　　3.完成HTML页面元素设计之后，我们就需要使用刚才创建的login.css样式文件控制页面显示样式了。不过先在页面中添加样式文件关联链接。

<link rel="stylesheet" href=“css/login.css">

　　4.然后就可以打开login.css设计我们的显示样式了，这里就不一步一步带您操作了，直接贴代码，我会把每个步骤注释清楚。

/*按照样图要求，添加一个浅灰色背景*/
body{
    background-color: #F2F2F2;
}

/*设置内容模块距离顶部一个有一段距离150px*/
.content {
    margin-top: 150px;
}

/*登录和注册按钮的整体样式*/
.content button {
    height: 30px;/*登录和注册按钮的高度*/
    color:  white;/*登录和注册按钮字体颜色为白色*/
    font-size: 18px;/*登录和注册按钮的字体大小*/
    border: 0px;/*无边框*/
    padding: 0px;/*无内边距*/
    cursor: pointer;/*登录和注册按钮的选择时为手形状*/
}

/*登录面板*/
.content .panel {
    background-color: white;/*登录面板背景颜色为白色*/
    width: 302px;/*宽度为302px*/
    text-align: center;/*子内容居中*/
    margin: 0px auto;/*自身居中*/
    padding-top: 20px;/*顶部的内边距为20px*/
    padding-bottom: 20px;/*底部的内边距为20px*/
    border: 1px solid #ddd;/*边框颜色为灰色*/
    border-radius: 5px;/*边框边角有5px的弧度*/

}

/*登录和密码组*/
.content .panel .group {
    text-align: left;/*子内容居中*/
    width: 262px;/*宽度为262px*/
    margin: 0px auto 20px;/*自身居中，并距离底部有20px的间距*/
}
.content .panel .group label {
    line-height: 30px;/*高度为30px*/
    font-size: 18px;/*字体大小为18px*/
}
.content .panel .group input {
    display: block;/*设置为块，是为了让输入框独占一行*/
    width: 250px;/*宽度为250px*/
    height: 30px;/*高度为30px*/
    border: 1px solid #ddd;/*输入框的边框*/
    padding: 0px 0px 0px 10px;/*左边内边距为10px，显得美观*/
    font-size: 16px;/*字体大小*/
}
.content .panel .group input:focus{

    border-left: 1px solid #CC865E;/*当输入框成为焦点时，左边框颜色编程褐色*/
}
.content .panel .login button {
    background-color: #CC865E;/*按钮的背景颜色*/
    width: 260px;/*按钮的宽度*/
}
.content .panel .login button:hover {
    background-color: white;/*按钮选中后背景颜色为白色*/
    color:  #CC865E;/*按钮选中后字体颜色为褐色*/
    border: 1px solid #CC865E;/*按钮选中后边框颜色为褐色*/
}

/*注册按钮*/
.content .register {
    text-align: center;/*子内容居中*/
    margin-top: 20px;/*顶部的内边距为20px*/
}
.content .register button {
    background-color: #466BAF;/*按钮的背景颜色为蓝色*/
    width: 180px;/*按钮的宽度*/
}

.content .register button:hover {
    background-color: white;/*按钮选中后背景颜色为白色*/
    color: #466BAF;/*按钮选中后字体颜色为蓝色*/
    border: 1px solid #466BAF;/*按钮选中后边框颜色为蓝色*/
}

　　5.所用工作完成，最后运行一下看看最终效果吧。

　　如果您看到这里，那我想谢谢你的阅读。期待您和我一起进步成长。