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. 用python实现ping

    #!/usr/bin/env python #coding=utf-8 import os import argparse import socket import struct import sel ...

  2. windows自带的netsh 端口转发

    netsh interface portproxy show v4tov4 (3)添加“端口映射” netsh interface portproxy add v4tov4 listenaddress ...

  3. 安全过滤javascript,html，防止跨脚本攻击

    本文改自: http://blog.51yip.com/php/1031.html 用户输入的东西是不可信认的,例如,用户注册,用户评论等,这样的数据,你不光要做好防sql的注入,还要防止JS的注入, ...

  4. MyBatis之Mapper XML 文件详解(二)-sql和入参

    sql 这个元素可以被用来定义可重用的 SQL 代码段,可以包含在其他语句中.它可以被静态地(在加载参数) 参数化. 不同的属性值通过包含的实例变化. 比如: <sql id="use ...

  5. C++继承细节 -2

    继承与动态内存分配 //基类定义 class BaseClass { private: char *label; public: BaseClass() {} BaseClass(const char ...

  6. 深入理解bit_or和bit_and，bit_count

    bit_or:二进制数按位或,bit_and:二进制数按位与,bit_count:统计二进制数1个个数 下面以一个例子来说明用法:示例要实现的功能就是计算每月有几天有访问,先把示例摘录在这里.1234 ...

  7. Docker Nginx安装（centos7)

    docker search nginx docker pull nginx docker images nginx   mkdir -p /data/nginx/{conf.d,html,logs} ...

  8. ubuntu14.04安装qt-4.8.4

    题记:因为工作中用到qt的qmake工具生成x项目的Makefile文件,因为原有工程用的是4.8.4版本的,因此在此基础之上安装此版本. 用安装包工具进行安装qt不能直接安装到4.8.4版本的,因此 ...

  9. vue 新属性学习

    1, $listeners 父级元素 <base-input v-on:focus.native="onFocus"></base-input> 子级元素 ...

  10. Css Sprite(雪碧图、精灵图)<图像拼合技术>

    一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...