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. TaintDroid剖析之File & Memiry & Socket级污点传播

    TaintDroid剖析之File & Memiry & Socket级污点传播 作者:简行.走位@阿里聚安全 1.涉及到的代码文件 TaintDroid在File, Memory以及 ...

  2. .NET Core中合并Expression<Func<T,bool>>的正确姿势

    这是在昨天的 .NET Core 迁移中遇到的问题,之前在 .NET Framework 中是这样合并 Expression<Func<T,bool>> 的: public s ...

  3. RTSP协议转换RTMP直播协议

    RTSP协议转换RTMP直播协议 RTSP协议也是广泛使用的直播/点播流媒体协议,最近实现了一个RTSP协议转换RTMP直播协议的程序,为的是可以接收远端设备或服务器的多路RTSP直播数据,实时转换为 ...

  4. Linux ls

    linux.ls linux ls命令, 我觉得是所有接触linux系统, 首先学习的命令. 这个命令, 我也早就接触过了. 只是以前是学习类型的. 学了以后, 没有做到学以致用.可惜了. 现在这篇内 ...

  5. .NET基础知识点

    .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

  6. vSphere Client 编辑虚拟机属性的问题

    编辑虚拟机属性的时候, 出现: vpxclient.vmconfig.cpuid 初始值设置异常之类的,重置了, 并将注册表中的所有vmvare 相关键值删除了, 还是一样的.. 后面参照https: ...

  7. Atitit 动态调用webservice与客户端代理方式调用

    Atitit 动态调用webservice与客户端代理方式调用 方式1: 使用call.invoke  直接调用WSDL,缺点:麻烦,不推荐--特别是JAVA调用.NET的WS时,会有不少的问题需要解 ...

  8. Zabbix实现微信报警

    一.  申请企业微信账号,申请地址 https://qy.weixin.qq.com/ 二. 登陆企业微信账 图一 图二 2.添加微信账号 图一 图二 完成以上步骤后 就完成了微信账号的添加 三.新建 ...

  9. slave IO流程之一：mysql登陆过程（mysql_real_connect）

    最近看了slave IO的源码,发现slave IO的写relay log貌似是单线程单连接的,这让我有点小失望. slave IO的主函数是handle_slave_io,处理流程如下: 图1 ha ...

  10. IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法

    在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...