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. MVC学习二：基础语法

    目录 一:重载方法的调用 二:数据的传递 三:生成控件 四:显示加载视图 五:强类型视图 六:@Response.Write() 和 @Html.Raw()区别 七:视图中字符串的输入 八:模板页 一 ...

  2. 《HiWind企业快速开发框架实战》（2）使用HiWind创建自己的项目

    <HiWind企业快速开发框架实战>(2)使用HiWind创建自己的项目 关于HiWind HiWind企业快速开发框架,是基于.NET+EasyUi(支持各种前端扩展,后面将扩展Boot ...

  3. 代码提交的时候可以插入表情了-GitHub表情的使用

    GitHub官方有个表情项目,旨在丰富文字信息.意味着你可以在提交代码的时候,在提交信息里面添加表情,同时也可以在项目的ReadMe.md文件里面使用表情.除此之外,当然还有项目在GitHub上的wi ...

  4. Azure PowerShell (12) 通过Azure PowerShell创建SSH登录的Linux VM

    <Windows Azure Platform 系列文章目录> 本章将介绍如何使用Azure PowerShell,创建SSH登录的Linux VM 前提要求: 1.安装Azure Pow ...

  5. storm 集群配置

    配置storm集群的过程中出现写问题,记录下来 1.storm是通过zookeeper管理的,先要安装zookeeper,从zk官网上下来,我这里下下来的的3.4.9,下载后移动到/usr/local ...

  6. Android开发-之五大布局

    在html中大家都知道布局是什么意思了,简单来说就是将页面划分模块,比如html中的div.table等.那么Android中也是这样的.Android五大布局让界面更加美化,开发起来也更加方便.当然 ...

  7. 浅析z-index（覆盖顺序）和定位

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  8. UGUI 之获取当前控件的高度

    当Canvas Scaler选择Constant Pixel Size 当前的分辨率会被被固定,可以用RectTransform类里面的.rect变量值获取 height或Width. 在次情况下获取 ...

  9. ModelDataExchange - Import

    ModelDataExchange - Import eryar@163.com Abstract. The ModelDataExchange import utility enables the ...

  10. x86汇编程序基础(AT&T语法)

    一.简单的汇编程序 以下面这段简单的汇编代码为例 .section .data .section .text .globl _start _start: movl $, %eax movl $, %e ...