微信小程序相关一、模仿京东静态登录页面

一、培训的第一天，基本上没有什么最新的东西，但是看到老师的代码收获的确实是不少。

　　1.1、首页代码很简洁，将共有的样式都提取的很好。

　　1.2、其次是每一个小块写样式的时候用到了好多子代选择器和后代选择器，这样看起来css的一个样式就写的很长，但是比之前我们只是单一的写一个样式，大大提高了IO请求，整体css渲染也变快了。因为当渲染css的时候是从右向左的，就是先确定后代，在往上寻找祖辈，直到找到相对应的样式。dom树从叶子节点往上全部扫描一遍，可想而知只写一个单一的样式，效率是多么的低。

　　1.3、在开始写之前，先分析页面的结构，分成上中下还是左右还是什么自己心里要清楚，然后css样式要有初始化的样式，还有简单的公用的样式先提取出来。组后每个小的模块还可以再写一写公共的样式。还有wrapper样式.wrapper{width:990px;margin:0 auto;}尽量在每个模块中都套一层

　　1.4注释注释注释一定要多写点写好，还有代码格式tab键给对齐，将代码整理一下

二、下面是第一节具体的知识点

　　2.1 当图片和文字进行排列的时候，要想使图片和文字在同一水平线上？
　　答: 在img和文本上都设置vertical-align:middle
　　2.2 display:inline-block;
　　行级标签的特性: 不独占一行、宽高无效、margin和padding上下无效。
　　2.3 input为checkbox类型时，想和文字在同一水平线上？
　　在父元素加上font-size:0; 在子元素上都加上vertical-align:middle;
　　2.4 精灵图（雪碧图、css sprites）
　　减少加载次数，提高加载速度。
　　怎么截取精灵图？
　　background-position: X Y;

三、模仿京东登录页

　　3.1页面展示

　　3.2代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>京东-欢迎登录</title>

         <!--加入title里面的图标-->

         <link rel="icon" href="img/title.ico" type="image/x-icon">

         <link rel="stylesheet" href="css/index.css" />

     </head>

     <body>

         <!--头部开始-->

         <header class="wrapper">

             <div class="header-left left">

                 <img src="img/logo.png" />

                 <a>欢迎登录</a>

             </div>

             <div class="header-right right">

                 <img src="img/q-icon.png" />

                 <a>登录页面，调查问卷</a>

             </div>

         </header>

         <!--头部结束-->

         <!--中间内容开始-->

         <div class="content">

             <div class="wrapper beijing">

                 <!--登录表单-->

                 <div class="login-form right">

                     <!--扫码登录-->

                     <div class="login-tab login-tab-left left" id="saomaTab" >

                         <a>扫码登录</a>

                         <span class="right">|</span>

                     </div>

                     <!--账号登陆-->

                     <div class="login-tab login-tab-right left" id="zhanghuTab" >

                         <a>账户登录</a>

                     </div>

                     <!--账户登录的内容项-->

                     <div class="zhanghu-login" id="zhanghu-content">

                         <div id="zhanghu">

                             <label class="login-label login-rentou" for="name"></label>

                             <input type="text" class="name" id="name" placeholder="邮箱/用户名/已验证手机"/>

                         </div>

                         <div id="mima">

                             <label class="login-label login-mima" for="password"></label>

                             <input type="text" class="name" id="password" placeholder="密码"/>

                         </div>

                         <a class="right forget">忘记密码</a>

                         <input type="submit" class="denglu" value="登录"/>

                     </div>

                     <!--扫码登录的内容项-->

                     <div class="saoma-login" id="saomiao-content">

                         <div class="saoma-login-top">

                             <img src="img/show.png" class="erweima left" id="erweima"/>

                             <img src="img/phone-orange.png" class="phone left" id="phone"/>

                         </div>

                         <div class="saoma-login-bottom">

                             <span class="one">打开<a>手机京东</a>&nbsp;&nbsp;扫描二维码</span>

                             <ul class="saomiaodibu">

                                 <li>

                                     <span class="saoma-span shuru"></span>

                                     <span class="ziti">免输入</span>

                                     <span class="saoma-span gengkuai"></span>

                                     <span class="ziti">更快</span>

                                     <span class="saoma-span anquan"></span>

                                     <span class="ziti">更安全</span>

                                 </li>

                             </ul>

                         </div>

                     </div>

                     <!--底部的微信qq标志-->

                     <div class="dibu">

                         <label class="qq"></label>

                         <a>QQ</a>

                         <span>|</span>

                         <label class="weixin"></label>

                         <a>微信</a>

                         <div class="lijizhuce right">

                             <i class="liji"></i>

                             <a>立即注册</a>

                         </div>

                     </div>

                 </div><!--登陆表单结束-->

             </div><!--背景结束-->

         </div>

         <!--中间内容结束-->

         <!--尾部开始-->

         <footer class="wrapper">

             <div class="dibudaohang">

                 <div class="lianjie">

                 <a href="">关于我们</a><span>|</span>

                 <a href="">联系我们</a><span>|</span>

                 <a href="">人才招聘</a><span>|</span>

                 <a href="">商家入驻</a><span>|</span>

                 <a href="">广告服务</a><span>|</span>

                 <a href="">友情链接</a><span>|</span>

                 <a href="">销售联盟</a><span>|</span>

                 <a href="">京东社区</a><span>|</span>

                 <a href="">京东公益</a><span>|</span>

                 <a href="">English Site</a>

                 </div>

                 <div class="dianhua">

                     Copyright © 2004-2017  京东JD.com 版权所有

                 </div>

             </div>

         </footer>

         <!--尾部结束-->

         <script>

             var zhanghuTab = document.getElementById("zhanghuTab");

             var saomiaoTab = document.getElementById("saomaTab");

             var zhanghuContent = document.getElementById("zhanghu-content");

             var saomiaoContent = document.getElementById("saomiao-content");

             var erweima = document.getElementById("erweima");

             var phone = document.getElementById("phone");

             zhanghuTab.onclick = function(){

                 saomiaoContent.style.display= "none";

                 zhanghuContent.style.display="block";

             };

             saomiaoTab.onclick=function(){

                 zhanghuContent.style.display="none";

                 saomiaoContent.style.display="block";

             };

             erweima.onmouseover = function(){

                 erweima.style.marginLeft = "0px";

                 phone.style.display = "block";

             }

             phone.onmouseover = function(){

                 erweima.style.marginLeft = "0px";

                 phone.style.display = "block";

             }

             erweima.onmouseout= function(){

                 erweima.style.marginLeft = "75px";

                 phone.style.display="none";

             }

             phone.onmouseout= function(){

                 erweima.style.marginLeft = "75px";

                 phone.style.display="none";

             }

         </script>

     </body>

 </html>

/*css初始化*/

*{

    margin:;

    padding:;

}

a{

    /*text-decoration: none;*/

}

ul{

    list-style: none;

}

/*公用样式*/

.wrapper{

    width:990px;

    margin:0 auto;

}

.left{

    float:left;

}

.right{

    float: right;

}

.clearfix{

    clear: both;

}

a{

    color: #666666;

}

a:hover{

    color: red;

    cursor: pointer;

}

/*头部*/

.header-left{

    width: 300px;

    height: 60px;

    margin: 10px 0px;

}

/*图片和文字都写上vertical-align:middle即可实现在一个水平线上*/

.header-left img{

    vertical-align: middle;

}

.header-left a{

    vertical-align: middle;

    font-size: 23px;

    margin-left: 20px;

}

.header-left>a:hover{

    color: #666666;

}

.header-right{

    margin-top: 50px;

}

.header-right img{

    vertical-align: middle;

}

.header-right a{

    vertical-align: middle;

    font-size: 12px;

}

/*.header-right a:hover{

    color: red;

}*/

/*中间内容*/

.content{

    clear: both;

    height: 475px;

    width: 100%;

    background-color: #DCDCDC;

}

.content>.beijing{

    height: 470px;

    background: url(../img/beijing.jpg);

}

.content>.wrapper>.login-form{

    background: white;

    height: 370px;

    width: 351px;

    margin: 40px auto;

}

/*表单下面的登录*/

.login-tab{

    height: 54px;

    line-height: 54px;

    font-size: 18px;

    text-align: center;

    display: block;

    border-bottom: 1px solid #f4f4f4;

}

.login-tab-left{

    width:175px;

}

.login-tab-left>span{

    color: #f4f4f4;

}

.login-tab-right{

    width: 175px;

}

/*账户登录的内容*/

.zhanghu-login{

    margin: 80px auto;

    width: 306px;

    height: 222px;

    display: none;

    /*border: 1px solid red;*/

}

#zhanghu{

    border: 1px solid #bdbdbd;

    height: 38px;

    width: 300px;

}

.login-label{

    display: inline-block;

    vertical-align: middle;

    height: 38px;

    width: 38px;

    border-right: 1px solid #bdbdbd;

    background: url(../img/pwd-icons-new.png) no-repeat;

}

.login-rentou{

    background-position: 0px 0px;

}

.name{

    vertical-align: middle;

    width: 234px;

    /*height: 18px;*/

    /*line-height: 18px;*/

    padding: 10px 0px 10px 16px;

    overflow: hidden;

    font-size: 14px;

    border: none;

}

#mima{

    border: 1px solid #bdbdbd;

    height: 38px;

    width: 300px;

    margin-top: 18px;

}

.login-mima{

    background-position: -48px -48px;

}

.forget{

    margin-top: 20px;

    font-size: 14px;

    margin-right: 2px;

}

.denglu{

    margin-top: 22px;

    width: 306px;

    height: 32px;

    line-height: 32px;

    border: none;

    background: #e4393c;

    border: 1px solid red;

    color: white;

    font-size: 20px;

}

.denglu:hover{

    cursor: pointer;

}

/*密码登陆的内容页*/

.saoma-login{

    position: relative;

    margin: 80px auto;

    width: 306px;

    height: 222px;

    display: block;

}

.saoma-login>.saoma-login-top>.erweima{

    /*position: absolute;*/

    /*left: 20%;*/

    background: white;

    border: 5px solid white;

    margin-left: 75px;

    transition: margin-left 0.5s ease;

}

.saoma-login>.saoma-login-top>.phone{

    display: none;

    margin-top: -5px;

    margin-left: 158px;

    position: absolute;

}

.saoma-login>.saoma-login-bottom{

    position: absolute;

    bottom: -10px;

    left: 25%;

}

.saoma-login>.saoma-login-bottom>span{

    color: #BDBDBD;

    font-size: 12px;

}

.saoma-login>.saoma-login-bottom>span>a{

    color: red!important;

}

.saomiaodibu{

    margin: 10px 0px 5px -35px;

}

.saomiaodibu li span{

    margin-left: 5px;

}

.saoma-span{

    vertical-align: middle;

    display: inline-block;

    background: url(../img/qr-coagent.png) no-repeat;

    width: 25px;

    height: 25px;

}

.ziti{

    vertical-align: middle;

    color: #BDBDBD;

    font-size: 12px;

}

.shuru{

    background-position: 0 0 ;

}

.gengkuai{

    background-position: -27px 0px;

}

.anquan{

    background-position: -54px 0px;

}

/*登录表单的底部qq微信*/

.dibu{

    margin-top: -65px;

    border-top: 1px solid #bdbdbd;

    background: #fcfcfc;

    line-height: 50px;

    padding-left:20px;

    padding-right: 20px;

}

.qq{

    display: inline-block;

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

    vertical-align: middle;

    height: 20px;

    width: 20px;

}

.dibu a{

    font-size: 12px;

    vertical-align: middle;

}

.dibu span{

    margin-left: 5px;

    margin-right: 5px;

    color: #DCDCDC;

}

.weixin{

    display: inline-block;

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

    vertical-align: middle;

    height: 20px;

    width: 20px;

}

.liji{

    display: inline-block;

    background: url(../img/pwd-icons-new.png) no-repeat -100px -71px;

    vertical-align: middle;

    height: 20px;

    width: 20px;

}

.liji a{

    color: red!important;

    vertical-align: middle;

}

.liji a:hover{

    text-decoration: underline;

}

/*底部的内容*/

.dibudaohang{

    margin-top: 30px;

    text-align: center;

    font-size: 12px;

    color: #DCDCDC;

}

.dibudaohang a,.dibudaohang span{

    padding-left: 10px;

}

.dianhua{

    margin-top:10px;

    margin-bottom: 30px;

    text-align: center;

    font-size: 12px;

    color: #666666;

}

微信小程序相关一、模仿京东静态登录页面的更多相关文章

微信小程序中h5跳转到登录页面，登陆成功返回携带参数，h5刷新
公司的一个小程序,要做一个活动,需要判断登录状态. 思路:h5跳转到登录页面,登陆成功携带token自动返回. 本来以为是个非常简单的功能,没想到..... 发帖记录一下 1.登录页面用getCur ...
微信小程序相关资料整理
微信小程序官方介绍https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=201818 微信小程序开发资源https://jue ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml
微信小程序--相关资料
微信小程序Demo https://github.com/zce/weapp-demojustjavac/awesomewechatweapp: 微信小程序开发资源汇总 https://gith ...
微信小程序相关操作
显示用户基本信息在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...
《微信小程序七日谈》- 第四天：页面路径最多五层？导航可以这么玩
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩微信小 ...
微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）
(一) 准备工作 (1) 登录注册注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了 https://mp.weixin.qq.com/wxopen/waregi ...
微信小程序相关二、css介绍，菜单制作，表单相关，京东注册页面
一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明 ...
微信小程序相关三、css写小黄人
小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基 ...

随机推荐

Java Garbage Collection
在C/C++中,需要自己负责object的creation 和 destruction. 如果忘记了destruction, 就容易出现OutOfMemoryErrors. Java中会有GC直接处理 ...
mui.fire 目标页无法监听到触发事件
//获得详情页面 if(!detailPage){ detailPage = plus.webview.getWebviewById('detail.html'); } //触发详情页面的newsId ...
系列文章--Enterprise Library文章总结
自Enterprise Library 1.1 推出以来,Terry写了一系列的关于Enterprise Library的文章,其中得到了很多朋友的支持,在这里一并表示感谢.为了方便大家的阅读,这里我 ...
SSH远程登录CentOS服务器
1.把ssh默认远程连接端口修改为2200编辑防火墙配置:vi /etc/sysconfig/iptables防火墙增加新端口2222 -A INPUT -m state --state NEW -m ...
App测试工具
1.App性能测试与安全测试工具性能测试工具:Itest(众测平台) 安全测试:Utest
JDBC查询实例
作为Java与数据库交互最古老的.最基础的规范,JDBC提供了访问底层数据库的接口,其他ORM框架都是在JDBC这块基石上构建的.下面我们看一个基本的JDBC查询例子: package com.ins ...
Go - coding之前的准备
Go tool 的使用 Go的tool要求我们对于code有一定的结构化组织和管理,下面我们就来一介绍他们: --GoPath environment variable: 顾名思义,环境变量,指定了 ...
条件随机场（CRF）-基础
条件随机场(conditional random fields,简称 CRF,或CRFs)下文简称CRF,是一种典型的判别模型,相比隐马尔可夫模型可以没有很强的假设存在,在分词.词性标注.命名实体识别 ...
node的模块管理
/* *一:从node_modules目录中加载模块; * 向这样的写法: * require("aa.js") * 则node将aa.js文件视为node_modules目录下的 ...
Nginx压力测试工具之WebBench
Nginx压力测试工具之WebBench 在Apache中有自带的ab命令可以测试服务的压力,而nginx没有自带的命令,必须要采用第三方软件来测试,今天就简单介绍一下webbench对nginx ...

微信小程序相关一、模仿京东静态登录页面

微信小程序相关一、模仿京东静态登录页面的更多相关文章

随机推荐

热门专题