最新皇冠会员登入网新2哪些登入页面设置？

来源：蜘蛛抓取(WebSpider) 时间：2016-11-07 07:34 标签： www. 33sn.cc登入页面
皇冠新2网址|新2网址|皇冠代理|新2网址开户HTML5实战教程———开发一个简单漂亮的登录页面
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
最近看过几个基于开发的移动一样，已经越来越流畅了，相信随着职能手机的配置越来越高性能越来越好，HTML5技术的使用在移动端应用的会越来越普及，应用越来越广泛，因此作为移动开发者，掌握这门技术自然有着强烈的紧迫感。今天就写一个小小的登录页面的demo，巩固最近的学习，也给有兴趣的朋友学习HTML5技术做个参考。
在这里您可以下载到我最后实现的登录页面的demo源码，地址: /s/1kU1I50b 。
1.webStorm或者其他网页开发工具。因为我是用webStorm比较多，因此我只能在这里提供一下webStorm（破解版）的下载地址： 版本 ， 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&
3.完成HTML页面元素设计之后，我们就需要使用刚才创建的login.css样式文件控制页面显示样式了。不过先在页面中添加样式文件关联链接。
&link rel="stylesheet" href=“css/login.css"&
4.然后就可以打开login.css设计我们的显示样式了，这里就不一步一步带您操作了，直接贴代码，我会把每个步骤注释清楚。
/*按照样图要求，添加一个浅灰色背景*/body{ background-color: #F2F2F2;}/*设置内容模块距离顶部一个有一段距离150px*/.content { margin-top: 150}/*登录和注册按钮的整体样式*/.content button { height: 30/*登录和注册按钮的高度*/ color:/*登录和注册按钮字体颜色为白色*/ font-size: 18/*登录和注册按钮的字体大小*/ border: 0/*无边框*/ padding: 0/*无内边距*/ cursor:/*登录和注册按钮的选择时为手形状*/}/*登录面板*/.content .panel { background-color:/*登录面板背景颜色为白色*/ width: 302/*宽度为302px*/ text-align:/*子内容居中*/ margin: 0/*自身居中*/ padding-top: 20/*顶部的内边距为20px*/ padding-bottom: 20/*底部的内边距为20px*/ border: 1px solid #/*边框颜色为灰色*/ border-radius: 5/*边框边角有5px的弧度*/}/*登录和密码组*/.content .panel .group { text-align:/*子内容居中*/ width: 262/*宽度为262px*/ margin: 0px auto 20/*自身居中，并距离底部有20px的间距*/}.content .panel .group label { line-height: 30/*高度为30px*/ font-size: 18/*字体大小为18px*/}.content .panel .group input { display:/*设置为块，是为了让输入框独占一行*/ width: 250/*宽度为250px*/ height: 30/*高度为30px*/ border: 1px solid #/*输入框的边框*/ padding: 0px 0px 0px 10/*左边内边距为10px，显得美观*/ font-size: 16/*字体大小*/}.content .panel .group input:focus{ border-left: 1px solid #CC865E;/*当输入框成为焦点时，左边框颜色编程褐色*/}.content .panel .login button { background-color: #CC865E;/*按钮的背景颜色*/ width: 260/*按钮的宽度*/}.content .panel .login button:hover { background-color:/*按钮选中后背景颜色为白色*/ color: #CC865E;/*按钮选中后字体颜色为褐色*/ border: 1px solid #CC865E;/*按钮选中后边框颜色为褐色*/}/*注册按钮*/.content .register { text-align:/*子内容居中*/ margin-top: 20/*顶部的内边距为20px*/}.content .register button { background-color: #466BAF;/*按钮的背景颜色为蓝色*/ width: 180/*按钮的宽度*/}.content .register button:hover { background-color:/*按钮选中后背景颜色为白色*/ color: #466BAF;/*按钮选中后字体颜色为蓝色*/ border: 1px solid #466BAF;/*按钮选中后边框颜色为蓝色*/}
5.所用工作完成，最后运行一下看看最终效果吧。
如果您看到这里，那我想谢谢你的阅读。期待您和我一起进步成长。
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(4091)
今天的努力决定未来的成败。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net联系人：丘&经&理
地&&址：深圳市宝安区民治街道
　　　 上芬西路6号
车载录像机|车载硬盘录像机|车载SD卡录像机|3G车载监控|&车载监控|车载录像机厂家 |3G车载录像机厂家 |3G车载录像机|校车监控录像机|校车车载监控录像机厂家
版权所有：深圳市路安仕科技有限公司& Copyright(C)& &

我要回帖

更多关于 www. 33sn.cc登入页面 的文章

 

随机推荐