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. 跨平台网络抓包工具-Microsoft Message Analyzer

    Microsoft Message Analyzer (MMA 2013)是微软最受欢迎的Netmon的最新版本. 在Netmon网络跟踪和排除故障功能的基础上提供了更强大的跨平台网络分析追踪能力.园 ...

  2. NoSQL初探之人人都爱Redis：（3）使用Redis作为消息队列服务场景应用案例

    一.消息队列场景简介 “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.消息被发送到队列中,“消息队列”是在消息的传输过程中保存消息的容器 ...

  3. 使用VS+VisualGDB编译Linux版本RCF

    RPC通信框架--RCF介绍中说了,RCF本身是支持跨平台的,其代码放到Linux平台,是可以通过gcc.make等工具,编译通过的. 官方提供的源码中,只有cmake编译脚本,并没有提供Makefi ...

  4. Linux 挂载管理(mount)

    标签:mount,umount 概述 在上一章增加linux操作系统空间中已经使用过了mount命令对分区进行挂载,这一章详细介绍挂载管理,该命令涉及的知识点也挺多的而且也还比较重要,是需要掌握的一个 ...

  5. CSharpGL(3)使用CSharpGL.vsix插件

    CSharpGL(3)使用CSharpGL.vsix插件 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更 ...

  6. Azure PowerShell (8) 使用PowerShell设置Azure负载均衡器规则

    <Windows Azure Platform 系列文章目录> 注意:如果Azure面对的客户只是企业级客户,企业级客户使用NAT设备访问Internet的话,因为多个客户端使用相同的So ...

  7. <canvas>设置宽高遇到的问题

    在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...

  8. Docker实践：运行Python应用

    本文将使用fig应用编排实现一个python的计数器,并使用web展示. 阅读本文您需要具备以下知识: 1.了解Python 2.熟练Docker基础知识(包括Dockerfile语法) 3.了解Do ...

  9. Atitit常见的标准化组织与规范数量jcp ecma iso

    Atitit常见的标准化组织与规范数量jcp ecma iso 1. 常见的标准化组织1 1.1. 重要的基金会apache1 1.2. 美国国家标准学会(American NationalStand ...

  10. PHP面向对象

    面向对象 1.类由众多的对象抽象出来的    2.对象    一起皆对象    由类实例化出来的 求两个圆之间阴影的面积 $sr1=10; $sr2=5; $mj=3.14*$sr1*$sr1-3.1 ...