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

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

　　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,基 ...

随机推荐

wpf中如何在xaml中绑定cs中类的属性
cs代码:/// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWin ...
vue插件vue-infinite-loading的使用
vue-infinite-loading官网:https://peachscript.github.io/vue-infinite-loading/ 安装: npm install vue-infin ...
gradle multiproject && docker build
备注: 环境准备 : docker , gradle(使用wrapper,或者全局安装),测试环境使用mac 1. gradle 安装 brew install gradle 2. docke ...
baidu手机输入法：邂逅"吹神"的声场漫游
"十年,好久不见,兄妹,所有还好?年月如歌,你的背包.却仍然没有筛选.装满红玫瑰.人来人往,爱情搬运,纵使我成了K歌之王.也谢谢你.依然让我的全世界失眠. 孤单患者.不如不见,不要说 ...
Oracle11g的服务
成功安装Oracle 11g数据库后,你会发现自己电脑运行速度会变慢,配置较低的电脑甚至出现非常卡的状况,通过禁止非必须开启的Oracle服务可以提升电脑的运行速度.那么,具体该怎么做呢.按照win7 ...
vuejs2.0的生命周期解读
每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .下图展示的就是一个v ...
django 网站 Hello world
环境搭建 1.python2.7,python3.x均可以使用, 2.直接pip install django或者去下载whl文件安装 3.用eclipse和pycharm均可开始 1.进入一个目录 ...
JVM内存管理之GC简介
为何要了解GC策略与原理? 原因在上一章其实已经有所触及,就是因为在平时的工作和研究当中,不可避免的会遇到内存溢出与内存泄露的问题.如果对GC策略与原理不了解的情况下碰到了前面所说的问题 ...
黄聪：自定义WordPress顶部管理工具条的技巧（转）
使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php 或者插 ...
SQL 只取重复记录一条记录并且是最小值
and not exists( and a.StateValue>StateValue ) '

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

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

随机推荐

热门专题