文档章节

使用HTML5搭建京东登录界面(二)

博为峰教研组
 博为峰教研组
发布于 2017/03/28 18:18
字数 674
阅读 47
收藏 0

在我们html文件中,引入了2个css文件,分别为reset.css和login.css。下面我们就来看一下这2个css文件是如何实现布局的。

先来看一下reset.css,这里是对于整个html文件共同的元素需要统一设置的样式,

代码如下:

login.css是针对性的设置各个布局的样式

代码如下:

/*header*/

*{

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;}

header{

    width:100%;

    height: 80px;

}

header .header-content{

    box-sizing: border-box;

    width: 990px;

    height: 80px;

    margin: 0 auto;

    /*background-color: red;*/

}

header .header-content .logo{

    float: left;

    width: 160px;

    height: 60px;

    background: url("../image/icon.png") no-repeat 0 15px;

}

header .header-content span{

    float: left;

    font-size: 24px;

    padding-left: 30px;

    margin-top: 20px;

}

header .header-content .login{

    float: right;

    font-size: 12px;

    margin-top: 55px;

    padding-bottom: 5px;

    font-family: Arial,Verdana,"\5b8b\4f53";

}

header .header-content .login i{

    display: inline-block;

    width: 18px;

    height: 16px;

    margin: 0 5px;

    background: url("../image/msg-icon.png") no-repeat ;

}

header .header-content .login a{

    color: #999;

    position: relative;

    top: -5px;

 

}

header .header-content .login a:hover {

    color: #E4393C;

    text-decoration: underline;

}

 

main{

    width:100%;

    height: 475px;

    background-color: #E8C99A;

    position: relative;

}

main section{

    width: 990px;

    height:100%;

    margin:  0 auto;

    background: url("../image/loginBg.jpg")no-repeat 0 0 ;

}

 

main section .login-content{

    width: 346px;

    height: 346px;

    padding: 20px;

    float: right;

    top: 40px;  ;

    background: #fff;

    position: relative;

    color: #666;

}

main section .login-content-top{

    width:100%;

    height: 55px;

    border-bottom: 1px solid #f4f4f4;

    position: absolute;

    top: 0;

    left:0;

 

}

main section .login-content-top a:hover,main section .login-content-top a:nth-child(2) {

    font-weight: bold;

    color: #e4393c;

}

main section .login-content-top a{

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    float: left;

    width: 50%;

    height: 100%;

    padding: 0 20px;

    text-align: center;

    line-height: 55px;

    color: #666;

    font-size: 18px;

}

 

main section .login-content-notice{

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    width: 100%;

    height: 23px;

    position: relative;

    background: #fef4e5;

    color: #666;

    margin: 40px auto 5px;

    padding-left: 40px;

    border: 1px solid #f6c090;

    font-size: 12px;

    line-height: 23px;

}

main section .login-content-notice i{

    display: inline-block;

    width: 16px;

    height: 17px;

    position: absolute;

    left: 10px;

    top: 3px;

    background: url("../image/pwd-icons.png")no-repeat  -104px -24px;

}

main section form{

    width: 100%;

}

main section form .form-item{

    border: 1px solid #bdbdbd;

    height: 38px;

    width: 100%;

    margin-bottom: 20px;

    position: relative;

}

main section form .form-item label{

    position: absolute;

    top: 0;

    left: 0px;

    width: 38px;

    height: 36px;

    border-right: 1px solid #bdbdbd;

}

 

main section form .form-item input{

    height: 100%;

    width:100%;

    padding-left: 45px;

    color: #666;

    border: none;

}

main section form .form-item:nth-child(1) label{

    background: url("../image/pwd-icons.png") no-repeat ;

}

main section form .form-item:nth-child(2) label{

    background: url("../image/pwd-icons.png") no-repeat -48px 0;

}

main section form .form-check{

    font-size: 12px;

 

}

main section form .form-check label{

    margin-left: 5px;

    vertical-align: top;

}

main section form .form-check a{

    float: right;

    color: #666;

}

main section form .form-check a:hover{

    color: #E4393C;

    text-decoration: underline;

}

 

main section form input[type = submit]{

    width:100%;

    height: 31px;

    background: #e4393c;

    color: #ffffff;

    font-size: 18px;

    word-spacing: 1em;

    border: 1px solid #e85356;

    margin-top: 15px;

}

main section .login-content-bottom{

    width:100%;

    position: absolute;

    bottom:0;

    left: 0;

    padding: 0 18px;

    line-height: 50px;

    border-top: 1px solid #f4f4f4;

    background-color: #fcfcfc;

}

main section .login-content-bottom a{

    font-size: 12px;

 

}

main section .login-content-bottom span{

    padding-left: 1px;

    margin: 0 5px;

    font-size: 10px;

    background-color: #999;

}

main section .login-content-bottom a i{

    width: 19px;

    height: 18px;

    display: inline-block;

    position: relative;

    top: 5px;

 

}

main section .login-content-bottom a:nth-child(1) i{

    margin-right: 5px;

    background: url("../image/QQ-weixin.png") no-repeat;

}

main section .login-content-bottom a:nth-child(3) i{

     margin-right: 5px;

     background: url("../image/QQ-weixin.png") no-repeat -20px 0;

 }

main section .login-content-bottom a:nth-child(6){

    float: right;

}

main section .login-content-bottom a:nth-child(6) i{

    margin-right: 5px;

    background: url("../image/pwd-icons.png")-104px -75px no-repeat;;

}

main section .login-content-bottom a:hover {

    color: #e4393c;

    text-decoration: underline;

}

/*footer*/

footer{

    font-size: 12px;

    text-align: center;

    border-top: solid 1px #e6e6e6;

    color: #999;

    padding-bottom: 30px;

}

footer p a{

    font-size: 12px;

    text-align: center;

    color: #999;

 

 

}

footer p:nth-child(1){

 

    padding-top: 30px;

    padding-bottom: 15px;

}

footer p span{

 

    padding-left: 1px;

    margin: 0 10px;

    font-size: 10px;

    background-color: #999;

}

 

 

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
移动应用 APP 编辑器

【业务需求】 一、功能需求 1、移动应用项目是为了建立能在手机端进行翻页类HTML5页面的编辑、展示与传播的移动应用。 本次项目建立的系统属于轻应用,用户不需要下载APP应用程序,只需扫描二...

Miss_Fung
2015/12/28
26
5
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
2018/06/29
0
0
HTML5和CSS3不仅仅是两项新的Web技术标准

HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那...

课工场CC老师
2017/10/24
13
0
HTML5 localStorage本地存储实际应用举例

HTML5 localStorage本地存储实际应用举例 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1952 一、引言 HTML5虽未来到其鼎盛时期,但这并...

吟啸_徐行
2014/07/06
232
0
JS 详解 Cookie、 LocalStorage 与 SessionStorage

基本概念 Cookie Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过...

飞翔的熊blabla
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【2019年8月版本】OCP 071认证考试最新版本的考试原题-第9题

Choose three Which three statements are true about views in an Orade batabase? A) A SELECT statement cannot contain a where clause when querying a view contaning a WHERE clause ......

oschina_5359
29分钟前
5
0
[JSON].connectionValue()

本文转载于:专业的前端网站➭[JSON].connectionValue() 语法: [JSON].connectionValue() 说明: 将对象的所有键值接连成新的字符串值 返回: [String] 示例: Set a = toJson()c = Array(1,2,...

前端老手
30分钟前
4
0
云计算给大数据分析工具带来了什么

如果大数据是一块蛋糕,那么大数据分析工具就是切蛋糕的刀叉。人们都期待着能用“刀叉”从大数据中挖出自己想要的“价值”,因此大数据分析工具被人们寄予厚望。而云计算技术的兴起似乎又给大...

青果云小潘
32分钟前
4
0
centOS7下es的使用

安装启动es7.4.0 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.4.0docker run -d -p 9200:9200 -e "discovery.type=single-node" docker.elastic.co/elasticsearch/elast......

无畏的老巨人
40分钟前
4
0
iptables删除命令中的相关问题

最近在做一个中间件的配置工作,在配置iptables的时候,当用户想删除EIP(即释放当前连接),发现使用iptables的相关命令会提示错误。iptables: Bad rule (does a matching rule exist in t...

xiangyunyan
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部