Home > Web Front-end > H5 Tutorial > body text

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

WBOY
Release: 2016-05-17 09:07:19
Original
7303 people have browsed it

最近看过几个基于HTML5开发的移动一样,已经越来越流畅了,相信随着职能手机的配置越来越高性能越来越好,HTML5技术的使用在移动端应用的会越来越普及,应用越来越广泛,因此作为移动开发者,掌握这门技术自然有着强烈的紧迫感。今天就写一个小小的登录页面的demo,巩固最近的学习,也给有兴趣的朋友学习HTML5技术做个参考。 

在这里您可以下载到我最后实现的登录页面的demo源码,

地址: http://pan.baidu.com/s/1kU1I50b

准备工作

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

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

登录页面效果图

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

样图分析

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

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

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

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

操作步骤

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

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

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

Copy after login

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

Copy after login

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

[代码]php代码:

/*按照样图要求,添加一个浅灰色背景*/
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;/*按钮选中后边框颜色为蓝色*/
}
Copy after login


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

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

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!