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. 支持向量机通俗导论（理解SVM的三层境界）[转]

    作者:July .致谢:pluskid.白石.JerryLead.说明:本文最初写于2012年6月,而后不断反反复复修改&优化,修改次数达上百次,最后修改于2016年11月.声明:本文于201 ...

  2. js中array(数组).map

    使用前 使用后 代码:

  3. java模拟浏览器发送请求

    package test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOExcep ...

  4. HP-UNIX平台修改Oracle processes参数报错：ORA-27154、ORA-27300、ORA-27301、ORA-27302

    OS 版本     :HP-UX B.11.31Oracle版本:11.2.0.4 (RAC) (一)问题描述 最近发现无法连接上数据库,报错信息为“ORA-00020:maximum number ...

  5. UIView常用的一些方法setNeedsDisplay和setNeedsLayout

    1,UIView的setNeedsDisplay和setNeedsLayout方法 首先两个方法都是异步执行的.而setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到  UI ...

  6. Json中dumps、loads、dump、load函数实例讲解

    1.dumps() 1. json.dumps() 用于将字典(dic)类型的数据转成字符串(str),直接将dict类型的数据写入json文件中会发生报错,因此在将数据写入时需要用到该函数. imp ...

  7. 【HDOJ 1337】I Hate It（线段树维护区间最大值）

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写 ...

  8. MYSQL 8.0.11 安装过程及 Navicat 链接时遇到的问题

    参考博客:https://blog.csdn.net/WinstonLau/article/details/78666423 我的系统和软件版本是这样的: 系统环境:win7.64位 MySQL版本: ...

  9. linux系统的介绍与环境搭建准备38-40

    操作系统(OS):用于控制管理计算机,形成在用户和机器之间传递信息的系统软件 linux是什么? <--unix系统是linux的前身---> 特点: 开放的源代码,自由修改 自由传播,没 ...

  10. linux系统中用户

    一.用户身份介绍: 1.系统管理员用户,UID(User IDentification) :0, 2.系统用户,UID为1~999,默认的程序都有独立的系统用户负责,运行,进而控制被破坏的范围, 3. ...