jQuery+CSS网站登录模板
本模板带验证码

在线体验：http://hovertree.com/texiao/jquery/13.htm

Demo 2：http://hovertree.com/hvtart/bjae/vgte3y3a.htm

Demo 3：http://hovertree.com/hvtart/bjae/dw0f8ytk.htm

以下是HTML文件代码：

<!DOCTYPE html>

<!-- saved from url=(0060)http://hovertree.com/login.php?gotopage=index.php -->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>网站登录模板 - 何问起</title>

<link type="text/css" rel="stylesheet" href="http://hovertree.com/texiao/jquery/13/login.css">

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="http://hovertree.com/texiao/jquery/13/login.js"></script>

</head>

<body style="overflow:hidden">

<div class="pagewrap">

<div class="main">

<div class="header">

<div style="width:768px;margin:0px auto;">

<a href="http://hovertree.com/hvtart/bjae/jftxwtko.htm">原文</a>

<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/menu/jquery/">jQuery</a> <a href="http://hovertree.com/hvtart/bjae/vgte3y3a.htm">Demo 2</a> <a href="http://hovertree.com/hvtart/bjae/dw0f8ytk.htm">Demo 3</a>

<br />

</div>

</div>

<div class="content">

<div class="con_left"></div>

<div class="con_right">

<div class="con_r_top"><a href="javascript:;" class="left" style="color: rgb(153, 153, 153); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(222, 222, 222);">扫码直达</a> <a href="javascript:;" class="right" style="color: rgb(51, 51, 51); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(46, 85, 142);">登录管理</a></div>

<ul>

<li class="con_r_left" style="display: none;">

<div class="erweima">

<div class="qrcode">

<div id="output" style="width: 100%; position: relative">

<img src="http://hovertree.com/texiao/jquery/13/2weima.png" style="width: 174px; height: 174px">

</div>

</div>

</div>

<div style="height: 70px">

<p>扫码上网 安全便捷</p>

</div>

</li>

<li class="con_r_right" style="display: block;">

<form name="form1" method="post" action="http://tool.hovertree.com/info/ip/" autocomplete="off">

<div class="user">

<div>

<span class="user-icon"></span>

<input type="text" id="userid" name="userid" placeholder="　输入账号" value="">

</div>

<div>

<span class="mima-icon"></span>

<input type="password" id="pwd" name="pwd" placeholder="　输入密码" value="">

</div>

<div>

<span class="yzmz-icon"></span>

<input id="vdcode" type="text" name="validate" placeholder="　验证码" value="" style=" width:150px;">

<!-- 这里是验证码的相关路径，各位站长自行更换 -->

<img style="cursor: pointer; margin-top:8px;" id="imgHoverTreeCode" alt="看不清？点击更换" title="看不清？点击更换" src="http://hovertree.com/texiao/jquery/13/hovertreecheckcode.gif">

</div>

</div><br>

<button id="btn_Login" type="submit">登 录</button>

</form>

</li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

更多： http://www.cnblogs.com/roucheng/p/texiao.html

jQuery简洁大方的登录页面模板的更多相关文章

  1. 原生js验证简洁美观注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...

  2. 用户管理的设计--4.jquery的ajax实现登录名的校验

    页面效果 鼠标失去焦点时,不需要刷新页面进行校验,判断登录名是否重复. 实现步骤 1.引入struts2-json-plugin-2.5.10.1插件包 2.页面使用jquery的ajax实现后台校验 ...

  3. 简洁大方的wordpress主题，不容错过的主题，附带主题源码下载

    cu主题是由疯狂的大叔设计,界面简洁大方是它最大的特点之一. 手残君也比较喜爱这款主题,在使用的过程中,根据手残君的个人习惯,对其进行了优化. 标题优化 标题居中显示 增加标题div背景色 标题div ...

  4. jQuery实现回车触发登录按钮的功能

    jQuery实现回车触发登录按钮的功能,代码如下: $('body').keyup(function(e){ if(e.keyCode===13){ $('.login').click() } }) ...

  5. jquery 回到顶部，简洁大方

    效果

  6. Jquery 实现 “下次自动登录” 记住用户名密码功能

    转载自:http://blog.csdn.net/aspnet_lyc/article/details/12030039?utm_source=tuicool&utm_medium=refer ...

  7. PHP+jQuery+Ajax实现用户登录与退…

    用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 查看演示DEM ...

  8. [jQuery] 按回车键实现登录

    Jquery按回车键提交实现登录的方式分为两种: 1.按钮提交 2.表单提交 1.按钮提交 $("#LoginIn").off('click').on('click', funct ...

  9. 【jQuery实例】Ajax登录页面

    登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口.接下来,我来带领大家打造一个漂亮.安全的登录界面,使用的技术是ASP.NET+jQuery 先来看看预览效果   Ajax登录重点在 ...

随机推荐

  1. 【译】PHP的变量实现（给PHP开发者的PHP源码-第三部分）

    文章来自:http://www.aintnot.com/2016/02/12/phps-source-code-for-php-developers-part3-variables-ch 原文:htt ...

  2. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  3. 小学徒成长系列—StringBuilder & StringBuffer关键源码解析

    在前面的博文<小学徒成长系列—String关键源码解析>和<小学徒进阶系列—JVM对String的处理>中,我们讲到了关于String的常用方法以及JVM对字符串常量Strin ...

  4. 《Entity Framework 6 Recipes》中文翻译系列 (13) -----第三章 查询之使用Entity SQL

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-4使用实体SQL查询模型 问题 你想通过执行Entity SQL语句来查询你的实 ...

  5. C# Azure 存储-队列

    1.前言 本篇文章是根据Azure的官网document总结,如果想直接跳过本文章,可以点击下面的链接进入. https://www.azure.cn/zh-cn/documentation/arti ...

  6. Thrift架构~目录

    回到占占推荐博客索引 概念相关 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ru ...

  7. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  8. Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx

    Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx 1.1. 数据库的类型,网状,层次,树形数据库,kv数据库.oodb2 1.2. Er模型2 1.3. Sql2 ...

  9. .Net批量插入数据到SQLServer数据库,System.Data.SqlClient.SqlBulkCopy类批量插入大数据到数据库

    批量的的数据导入数据库中,尽量少的访问数据库,高性能的对数据库进行存储. 采用SqlBulkCopy来处理存储数据.SqlBulkCopy存储大批量的数据非常的高效,将内存中的数据表直接的一次性的存储 ...

  10. python发送邮件及附件

    今天给大伙说说python发送邮件,官方的多余的话自己去百度好了,还有一大堆文档说实话不到万不得已的时候一般人都不会去看,回归主题: 本人是mac如果没有按照依赖模块的请按照下面的截图安装 导入模块如 ...