2018--12-12 喜迎双十二，咳咳，，，，我不是打广告哈，购物的节日也不要忘记学习。

　　大家好，我又来了。

　　今天抽出来空把自己的学习心得给大家分享，这是一个可开发可扩展的用户登录界面，用于开发学习当然是适合入门级别的，

把代码都研究一下，学习速度远比你自己从最基本的html是什么、html的基本标签学习、用法。。。。一点点真的是一点点的从头

学习这样虽说基础打得更牢，但效率太低，你不投入到实际应用中去，很快你就会忘却那些知识点，所以理论和实干的结合，

"传说中“的事半功倍，即使如此。

　　但一开始还是从基础的案例开始学习，用到什么学什么，现学现用记忆更久更牢固，比如：

首先将文档的结构清晰的构建出来，什么东西就放什么里，合理分类避免文件繁杂紊乱。

准备：

1.下载：jquery.min.js

　　(min是压缩版，去除了注释和空格，主要是生产环境中使用，不带min是带有注释和空格的，方便阅读源码）

2.style.css——编纂css文件

　　需要的朋友私信我或留言吧，这里不能上传文件，无法....

3.image——网页的背景和那个锁都是可以更换的

　　我也可以提供，方法同上。

代码分析：

<!DOCTYPE HTML><!--html5声明-->

<html>

<head>

<title>Welcome | Home&济大泉院</title>

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--元(meta)数据-->

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- -->

<script>var __links = document.querySelectorAll('a');

        function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;

        for (var i = 0, l = __links.length; i < l; i++)

            {if ( __links[i].getAttribute('data-t') == '_blank' )

                 { __links[i].addEventListener('click', __linkClick, false);}

            }

        </script>

<!--(document).ready里的代码是在页面内容都加载完才执行的

<*>这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

    fadeOut 淡出，改变不透明度

    click 按键触发

-->

<script src="js/jquery.min.js"></script>

<script>$(document).ready(function(c) {

    $('.alert-close').on('click', function(c){//点击事件

        $('.message').fadeOut('slow', function(c){

              $('.message').remove();

/*  $(".message")on('click',function(c){

        $('.message').remove();

    })

    as same as :

    $(".message")click(function(){

        $(".message").remove();

    })

*/

        });

    });

});

</script>

</head>

<body>

<!-- contact-form -->

<div class="message warning">

    <div class="inset">

    <div class="login-head">

        <h1>Login Form</h1>

         <div class="alert-close"> </div>

    </div>

        <form  action="" method="get">

            <li>

                <input type="text" class="text=" value"Username"

                    onfocus="if(this.value == 'Username')this.value = '';"

                    onblur="if (this.value == '') {this.value = 'Username';}">

                <a href="#" class=" icon user"></a><!--remember user-->

            </li>

                <div class="clear"> </div>

            <li>

                <input type="password" value="Password"

                    onfocus="if(this.value == 'Password')this.value = '';"

                    onblur="if (this.value == '') {this.value = 'Password';}">

                 <a href="#" class="icon lock"></a><!--remember password-->

            </li>

<!--Verification code

            <li>

                <input type="text" class="yanZheng" value="请输入验证码"

                    onfocus = "if(this.value == '请输入验证码')this.value = '';"

                    onblur = "if(this.value == '')this.value = '请输入验证码';">

            </li>

                    -->

                <div style = "text-align:left">

                    <label><br><input name="password" type="radio" value="">Remember</br></label><!--remeber password-->

                </div>

            <div class="clear"> </div>

            <div class="submit">

                <input type="submit" onclick="myFunction()" value="Sign in" >

                <h4><a href="#">Lost your Password ?</a></h4><!--forgot password confirm herf-->

                <div class="clear">  </div>

            </div>

        </form>

    </div>

</div>

    <div class="clear"> </div>

<!--- footer --->

<div class="footer">

    <p>Copyright &copy; 2018.</p>

</div>

</body>

</html>

我注释掉了一段验证码的代码，其实也就只是一个非常初级界面，后面的文章在写吧这里就不赘述了。当然可以自己在添加其他的功能，哎呀，思维发散开啊。

总结：

　　就是这样一个用户登录界面的实现制作涵盖html5，css，jquary从中一下接触到了三个技术，试想你自己要是用一点点看的那个方法，是不是看完了一门再看下一门，，，，

Please tell me how much precious time you will spend. yeah,so long.

　　所以是不是应该改变一下自己的学习方法；

 ——————————学无止境——————————   　　　　　　　　　

html简约风用户登录界面网页制作html5-css-jquary-学习模版的更多相关文章

  1. jQuery和CSS3炫酷GOOGLE样式的用户登录界面

    这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作.username和password输入框採用浮动标签特效. ...

  2. 很漂亮的用户登录界面HTML模板

    效果预览:http://keleyi.com/keleyi/phtml/divcss/21.htm HoverTree开源项目实现了分层后,准备实现管理员后台登录,这里先把登录界面的HTML模板整理好 ...

  3. 美化VC界面(用户登录界面)

    源代码:下载 VC开发程序单调的界面相信大家都是深有感触,提到界面美化编程,人们都会说做界面不要用VC写,太难了.一句俗语:难者不会,会者不难.VC的美化界面编程并没有人们想像的那么难.这篇文章是我写 ...

  4. Android studio 开发一个用户登录界面

    Android studio 开发一个用户登录界面 activity_main.xml <?xml version="1.0" encoding="utf-8&qu ...

  5. 编写Java程序，使用Swing布局管理器与常用控件，实现用户登录界面

    返回本章节 返回作业目录 需求说明: 使用Swing布局管理器与常用控件,实现用户登录界面 实现思路: 创建用户登录界面的类LoginFrame,在该类中创建无参数的构造方法,在构造方法中,设置窗体大 ...

  6. Html JavaScript网页制作与开发完全学习手册

    Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...

  7. 用jsp实现网站登录界面的制作，并连接数据库

    课堂测试 任务需求: 撰写一篇博客 需要网站系统开发需要掌握的技术: 本次课堂测试的源程序代码: 运行结果截图: 说明课堂测试未按时完成的原因. 列出你对这门课的希望和自己的目标,并具体列出你计划每周 ...

  8. Google用户登录界面 Android实现

    实验效果: 项目目录: Java代码(放在Src文件下) package com.bn.chap9.login; import java.io.BufferedReader; import java. ...

  9. java web用户登录界面

    做这次实验,主要用到了mysql  java web 的 内容 实验代码: IUserDao.java package com.jaovo.msg.dao; import java.util.List ...

随机推荐

  1. 实例：接口并发限流RateLimiter

    需求:接口每秒最多只能相应1个请求 1.创建 全局类对象 import com.google.common.util.concurrent.RateLimiter; import org.spring ...

  2. C# 委托系列（一）将方法作为方法的参数

    委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去的人每 ...

  3. TCP Three-way Handshake

    TCP Connection Management Out-of-Order and Duplication(复制) Problem Old segment from previous connect ...

  4. jdk8新特性之双冒号 :: 用法及详解

    jdk8的新特性有很多,最亮眼的当属函数式编程的语法糖,本文主要讲解下双冒号::的用法. 概念 类名::方法名,相当于对这个方法闭包的引用,类似js中的一个function.比如: Function& ...

  5. SQL 存储过程生成

    use workflow; GO /****** 对象: StoredProcedure [dbo].[pro_GenerateProGet] 脚本日期: 08/03/2012 11:26:43 ** ...

  6. JavaScript document对象

    1.document对象是window对象的子对象,可直接使用,多用于获取HTML页面元素 2.document对象属性 a) alinkColor活动链接颜色 b) linkColor文本链接颜色 ...

  7. 大专生自学web前端到找到工作的前前后后

    先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...

  8. C++ & java小结

    JAVA类: 每个类都属于一个包,private成员:只有该类可以访问,子类不能访问 Public:其他类可以访问 Protected: 只有本包内的类可以访问 如果在声明class时不加public ...

  9. ACM1004：Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  10. F. Make It Connected

    题目链接:http://codeforces.com/contest/1095/problem/F 题意:给你n个点,每个点有个权值,如果在两点之间添一条边,代价为两点权值之和.现在给出m个边可以选择 ...