jQuery站点后台登录表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery站点后台登录表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery站点后台登录表单代码</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="css/style.css" tppabs="css/style.css" />
<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
</style>
<script src="js/jquery.js"></script>
<script src="js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
<script src="js/Particleground.js" tppabs="js/Particleground.js"></script>
<script>
$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //验证码
  createCode();
  //测试提交，对接程序删除即可
  $(".submit_btn").click(function(){
	  location.href="javascrpt:;"/*tpa=http://***index.html*/;
	  });
});
</script>
</head>
<body>
<dl class="admin_login">
 <dt>
  <strong>站点后台管理系统</strong>
  <em>Management System</em>
 </dt>
 <dd class="user_icon">
  <input type="text" placeholder="账号" class="login_txtbx"/>
 </dd>
 <dd class="pwd_icon">
  <input type="password" placeholder="密码" class="login_txtbx"/>
 </dd>
 <dd class="val_icon">
  <div class="checkcode">
    <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
    <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
  </div>
  <input type="button" value="验证码核验" class="ver_btn" onClick="validate();">
 </dd>
 <dd>
  <input type="button" value="立即登陆" class="submit_btn"/>
 </dd>
</dl>
</body>
</html>

JS代码(Particleground.js):

/** * Particleground * * @author Jonathan Nicol - @mrjnicol * @version 1.0.1 * @description Creates a canvas based particle system background * * Inspired by:* http://requestlab.fr/ * http://disruptivebydesign.com/ * * @license The MIT License (MIT) * * Copyright (c) 2014 Jonathan Nicol - @mrjnicol * * Permission is hereby granted,free of charge,to any person obtaining a copy * of this software and associated documentation files (the "Software"),to deal * in the Software without restriction,including without limitation the rights * to use,copy,modify,merge,publish,distribute,sublicense,and/or sell * copies of the Software,and to permit persons to whom the Software is * furnished to do so,subject to the following conditions:* * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR * IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER * LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */
!function(a){
	function b(b,d){
	function e(){
	if(w){
	$canvas=a('<canvas class="pg-canvas"></canvas>'),v.prepend($canvas),p=$canvas[0],q=p.getContext("2d"),f();
	for(var b=Math.round(p.width*p.height/d.density),c=0;
	b>c;
	c++){
	var e=new l;
	e.setStackPos(c),x.push(e)}
a(window).on("resize",function(){
	h()}
),a(document).on("mousemove",function(a){
	y=a.pageX,z=a.pageY}
),B&&!A&&window.addEventListener("deviceorientation",function(){
	D=Math.min(Math.max(-event.beta,-30),30),C=Math.min(Math.max(-event.gamma,-30),30)}
,!0),g(),o("onInit")}
}
function f(){
	p.width=v.width(),p.height=v.height(),q.fillStyle=d.dotColor,q.strokeStyle=d.lineColor,q.lineWidth=d.lineWidth}
function g(){
	if(w){
	s=a(window).width(),t=a(window).height(),q.clearRect(0,0,p.width,p.height);
	for(var b=0;
	b<x.length;
	b++)x[b].updatePosition();
	for(var b=0;
	b<x.length;
	b++)x[b].draw();
	E||(r=requestAnimationFrame(g))}
}
function h(){
	for(f(),i=x.length-1;
	i>=0;
	i--)(x[i].position.x>v.width()||x[i].position.y>v.height())&&x.splice(i,1);
	var a=Math.round(p.width*p.height/d.density);
	if(a>x.length)for(;
	a>x.length;
	){
	var b=new l;
	x.push(b)}
else a<x.length&&x.splice(a);
	for(i=x.length-1;
	i>=0;
	i--)x[i].setStackPos(i)}
function j(){
	E=!0}
function k(){
	E=!1,g()}
function l(){
	switch(this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={
	x:Math.ceil(Math.random()*p.width),y:Math.ceil(Math.random()*p.height)}
,this.speed={
}
,d.directionX){
	case"left":this.speed.x=+(-d.maxSpeedX+Math.random()*d.maxSpeedX-d.minSpeedX).toFixed(2);
	break;
	case"right":this.speed.x=+(Math.random()*d.maxSpeedX+d.minSpeedX).toFixed(2);
	break;
	default:this.speed.x=+(-d.maxSpeedX/2+Math.random()*d.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?d.minSpeedX:-d.minSpeedX}
switch(d.directionY){
	case"up":this.speed.y=+(-d.maxSpeedY+Math.random()*d.maxSpeedY-d.minSpeedY).toFixed(2);
	break;
	case"down":this.speed.y=+(Math.random()*d.maxSpeedY+d.minSpeedY).toFixed(2);
	break;
	default:this.speed.y=+(-d.maxSpeedY/2+Math.random()*d.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?d.minSpeedY:-d.minSpeedY}
}
function m(a,b){
	return b?void(d[a]=b):d[a]}
function n(){
	v.find(".pg-canvas").remove(),o("onDestroy"),v.removeData("plugin_"+c)}
function o(a){
	void 0!==d[a]&&d[a].call(u)}
var p,q,r,s,t,u=b,v=a(b),w=!!document.createElement("canvas").getContext,x=[],y=0,z=0,A=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),B=!!window.DeviceOrientationEvent,C=0,D=0,E=!1;
	return d=a.extend({
}
,a.fn[c].defaults,d),l.prototype.draw=function(){
	q.beginPath(),q.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,d.particleRadius/2,0,2*Math.PI,!0),q.closePath(),q.fill(),q.beginPath();
	for(var a=x.length-1;
	a>this.stackPos;
	a--){
	var b=x[a],c=this.position.x-b.position.x,e=this.position.y-b.position.y,f=Math.sqrt(c*c+e*e).toFixed(2);
	f<d.proximity&&(q.moveTo(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY),d.curvedLines?q.quadraticCurveTo(Math.max(b.position.x,b.position.x),Math.min(b.position.y,b.position.y),b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY):q.lineTo(b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY))}
q.stroke(),q.closePath()}
,l.prototype.updatePosition=function(){
	if(d.parallax){
	if(B&&!A){
	var a=(s-0)/60;
	pointerX=(C- -30)*a+0;
	var b=(t-0)/60;
	pointerY=(D- -30)*b+0}
else pointerX=y,pointerY=z;
	this.parallaxTargX=(pointerX-s/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetX+=(this.parallaxTargX-this.parallaxOffsetX)/10,this.parallaxTargY=(pointerY-t/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetY+=(this.parallaxTargY-this.parallaxOffsetY)/10}
switch(d.directionX){
	case"left":this.position.x+this.speed.x+this.parallaxOffsetX<0&&(this.position.x=v.width()-this.parallaxOffsetX);
	break;
	case"right":this.position.x+this.speed.x+this.parallaxOffsetX>v.width()&&(this.position.x=0-this.parallaxOffsetX);
	break;
	default:(this.position.x+this.speed.x+this.parallaxOffsetX>v.width()||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}
switch(d.directionY){
	case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=v.height()-this.parallaxOffsetY);
	break;
	case"down":this.position.y+this.speed.y+this.parallaxOffsetY>v.height()&&(this.position.y=0-this.parallaxOffsetY);
	break;
	default:(this.position.y+this.speed.y+this.parallaxOffsetY>v.height()||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}
this.position.x+=this.speed.x,this.position.y+=this.speed.y}
,l.prototype.setStackPos=function(a){
	this.stackPos=a}
,e(),{
	option:m,destroy:n,start:k,pause:j}
}
var c="particleground";
	a.fn[c]=function(d){
	if("string"==typeof arguments[0]){
	var e,f=arguments[0],g=Array.prototype.slice.call(arguments,1);
	return this.each(function(){
	a.data(this,"plugin_"+c)&&"function"==typeof a.data(this,"plugin_"+c)[f]&&(e=a.data(this,"plugin_"+c)[f].apply(this,g))}
),void 0!==e?e:this}
return"object"!=typeof d&&d?void 0:this.each(function(){
	a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(this,d))}
)}
,a.fn[c].defaults={
	minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,onInit:function(){
}
,onDestroy:function(){
}
}
}
(jQuery),/** * requestAnimationFrame polyfill by Erik M鏋歭ler. fixes from Paul Irish and Tino Zijdel * @see:http://paulirish.com/2011/requestanimationframe-for-smart-animating/ * @see:http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating * @license:MIT license */
function(){
	for(var a=0,b=["ms","moz","webkit","o"],c=0;
	c<b.length&&!window.requestAnimationFrame;
	++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];
	window.requestAnimationFrame||(window.requestAnimationFrame=function(b){
	var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),e=window.setTimeout(function(){
	b(c+d)}
,d);
	return a=c+d,e}
),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){
	clearTimeout(a)}
)}
();

JS代码(verificationNumbers.js):

function showCheck(a){
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	ctx.clearRect(0,0,1000,1000);
	ctx.font = "80px 'Microsoft Yahei'";
	ctx.fillText(a,0,100);
	ctx.fillStyle = "white";
}
var code;
	function createCode(){
	code = "";
	var codeLength = 4;
	var selectChar = new Array(1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','j','k','l','m','n','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
	for(var i=0;
	i<codeLength;
	i++){
	var charIndex = Math.floor(Math.random()*60);
	code +=selectChar[charIndex];
}
if(code.length != codeLength){
	createCode();
}
showCheck(code);
}
function validate (){
	var inputCode = document.getElementById("J_codetext").value.toUpperCase();
	var codeToUp=code.toUpperCase();
	if(inputCode.length <=0){
	document.getElementById("J_codetext").setAttribute("placeholder","杈撳叆楠岃瘉鐮?);
	createCode();
	return false;
}
else if(inputCode != codeToUp ){
	document.getElementById("J_codetext").value="";
	document.getElementById("J_codetext").setAttribute("placeholder","楠岃瘉鐮侀敊璇?);
	createCode();
	return false;
}
else{
	window.open(document.getElementById("J_down").getAttribute("data-link"));
	document.getElementById("J_codetext").value="";
	createCode();
	return true;
}
}

CSS代码(style.css):

@charset "UTF-8";html{overflow-y:hidden;}
body{margin:0;height:100%;}
a:active,a:hover{outline:0}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
input,select,button{outline:none;}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
img{vertical-align:middle;border:0}
@-ms-viewport{width:device-width}
html{font-size:50px;-webkit-tap-highlight-color:transparent;height:100%;min-width:320px;overflow-x:hidden}
body{font-family:"Microsoft YaHei";font-size:.28em;line-height:1;color:#333;background-color:white;}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1}
.h1,.h2,.h3,h1,h2,h3{margin-top:.28rem;margin-bottom:.14rem}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}
.h4,.h5,.h6,h4,h5,h6{margin-top:.14rem;margin-bottom:.14rem}
.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}
.h1,h1{font-size:.364rem}
.h2,h2{font-size:.2996rem}
.h3,h3{font-size:.238rem}
.h4,h4{font-size:.175rem}
.h5,h5{font-size:.14rem}
.h6,h6{font-size:.119rem}
h6{margin-top:0;margin-bottom:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
a{color:#06c1ae;text-decoration:none;outline:0}
a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
a.react,label.react{display:block;color:inherit;height:100%}
a.react.react-active,a.react:active,label.react:active{background:rgba(0,0,0,.1)}
ul{margin:0;padding:0;list-style-type:none}
hr{margin-top:.28rem;margin-bottom:.28rem;border:0;border-top:1px solid #DDD8CE}
h6,p{line-height:1.41;text-align:justify;margin:-.2em 0;word-break:break-all}
small,weak{color:#666}
::-webkit-input-placeholder{color:#999;line-height:inherit;}
:-moz-placeholder{color:#999;line-height:inherit;}
::-moz-placeholder{color:#999;line-height:inherit;}
/*other public*/
.iconfont{font-family:'adminthemesregular';}
.add_icon:before{content:"a";margin:0 5px;font-family:'adminthemesregular';}
.money_icon:before{content:"$";margin:0 5px;font-family:'adminthemesregular';font-size:20px;}
.rmb_icon{color:#19a97b;}
.rmb_icon:before{content:"锟?;margin-right:2px;}
.ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.center{text-align:center;}
.fl{float:left;}
.fr{float:right;}
.mtb{margin:5px 0;overflow:hidden;}
.mlr{margin:0 5px;overflow:hidden;}
.admin_login{width:300px;height:auto;overflow:hidden;margin:10% auto 0 auto;padding:40px;box-shadow:0 -15px 30px #0d957a;border-radius:5px;}
.admin_login dt{font-size:20px;font-weight:bold;text-align:center;color:#45bda6;text-shadow:0 0 1px #0e947a;margin-bottom:15px;}
.admin_login dt strong{display:block;}
.admin_login dt em{display:block;font-size:12px;margin-top:8px;}
.admin_login dd{margin:5px 0;height:42px;overflow:hidden;position:relative;}
.admin_login dd .login_txtbx{font-size:14px;height:26px;line-height:26px;padding:8px 5%;width:90%;text-indent:2em;border:none;background:#5cbdaa;color:white;}
.admin_login dd .login_txtbx::-webkit-input-placeholder{color:#f4f4f4;line-height:inherit;}
.admin_login dd .login_txtbx:-moz-placeholder{color:#f4f4f4;line-height:inherit;}
.admin_login dd .login_txtbx::-moz-placeholder{color:#f4f4f4;line-height:inherit;}
.admin_login dd .login_txtbx:focus{background:#55b7a4;}
.admin_login dd:before{font-family:'adminthemesregular';position:absolute;top:0;left:10px;height:42px;line-height:42px;font-size:20px;color:#0c9076;}
.admin_login dd.user_icon:before{content:"u";}
.admin_login dd.pwd_icon:before{content:"p";}
.admin_login dd.val_icon:before{content:"n";}
.admin_login dd .ver_btn{text-align:right;border:none;color:#f4f4f4;height:42px;line-height:42px;margin:0;z-index:1;position:relative;float:right;background:#48bca5;}
.admin_login dd .checkcode{float:left;width:182px;height:42px;background:#fff}
.admin_login dd .checkcode input{width:120px;height:36px;line-height:36px;padding:3px;color:white;outline:none;border:none;text-indent:2.8em;}
.admin_login dd .checkcode canvas{width:85px;height:36px;padding:3px;z-index:0;background:#5cbdaa;}
.admin_login dd .submit_btn{width:100%;height:42px;border:none;font-size:16px;background:#048f74;color:#f8f8f8;}
.admin_login dd .submit_btn:hover{background:#0c9076;color:#f4f4f4;}
.admin_login dd p{color:#53c6b0;font-size:12px;text-align:center;margin:5px 0;}
/*header*/
header{background:#19a97b;overflow:hidden;}
header h1{margin:0;float:left;margin-left:1%;}
header h1 img{width:auto;max-width:300px;height:70px;}
header .rt_nav{float:right;overflow:hidden;margin-right:3%;margin-top:12px;}
header .rt_nav li{float:left;padding:0 25px;text-align:center;border-right:1px #139667 solid;}
header .rt_nav li:last-child{border:none;}
header .rt_nav li a{color:white;font-size:12px;text-shadow:0 0 1px #20af83;display:block;}
header .rt_nav li a:hover{color:#f4f4f4;}
header .rt_nav li a:hover:before{color:#f4f4f4;}
header .rt_nav li a:before{font-family:'adminthemesregular';color:white;font-size:30px;display:block;}
header .rt_nav li .website_icon:before{content:"I";}
header .rt_nav li .admin_icon:before{content:"U";}
header .rt_nav li .clear_icon:before{content:"C";}
header .rt_nav li .set_icon:before{content:"S";}
header .rt_nav li .quit_icon:before{content:"Q";}
/*aside nav*/
.lt_aside_nav{width:210px;height:100%;position:absolute;top:70px;left:0;background:#fcfcfc;}
.lt_aside_nav h2{text-align:center;border-bottom:1px #b6b6b6 solid;margin:0;height:45px;line-height:45px;background:#efefef;}
.lt_aside_nav h2 a{display:block;color:#333333;font-size:14px;text-shadow:0 0 2px white;}
.lt_aside_nav ul{margin-bottom:75px;}
.lt_aside_nav dl{margin:0;}
.lt_aside_nav dl dt{font-weight:bold;height:45px;line-height:45px;border-bottom:1px #e9e9e9 solid;padding:0 15px;position:relative;}
.lt_aside_nav dl dt:before{position:absolute;width:5px;height:25px;background:#67c1a5;content:"";top:10px;left:0;}
.lt_aside_nav dl dd{margin:0;height:40px;line-height:40px;border-bottom:1px #e9e9e9 dotted;}
.lt_aside_nav dl dd a{display:block;color:#555555;padding:0 15px;}
.lt_aside_nav dl dd a:hover{background:#f8f8f8;text-shadow:0 1px 5px #f4f4f4;color:#19a97b;}
.lt_aside_nav dl dd .active{background:#f8f8f8;color:#19a97b;}
.lt_aside_nav dl dd .active:after{content:">";font-family:'adminthemesregular';position:absolute;right:3%;color:#19a97b;}
.lt_aside_nav .btm_infor{height:35px;line-height:35px;width:100%;background:#efefef;border-top:1px #b6b6b6 solid;text-align:center;color:#aaa;}
/*public:rtContent*/
.rt_wrap{margin-left:218px;margin-right:10px;height:100%;position:relative;}
.rt_content{margin-bottom:80px;margin-right:8px;overflow:hidden;}
.textWhite{color:white;}
.link_btn{border:1px #139667 solid;border-radius:2px;background:#19a97b;color:white;padding:8px 15px;display:inline-block;cursor:pointer;}
.link_btn:hover{background:#11a274;border:1px #0e8f61 solid;}
.link_btn:active{background:#0c9c6e;border:1px #0e8f61 solid;}
.textbox{border:1px #139667 solid;height:26px;line-height:26px;padding:5px;font-size:12px;vertical-align:middle;}
.textbox_295{width:295px;}
.textbox_225{width:225px;}
.select{padding:0 5px;height:38px;font-size:12px;border:1px #139667 solid;vertical-align:middle;appearance:button;-webkit-appearance:button;}
.group_btn{border:1px #139667 solid;background:#19a97b;color:white;padding:0 15px;height:38px;cursor:pointer;display:inline-block;vertical-align:middle;}
.group_btn:hover{background:#11a274;border:1px #0e8f61 solid;}
.group_btn:active{background:#0c9c6e;border:1px #0e8f61 solid;}
.page_title{height:40px;line-height:40px;border-bottom:1px #b6b6b6 solid;margin:10px 0;}
.page_title h2{font-size:15px;font-weight:bold;}
.page_title .top_rt_btn{display:inline-block;height:30px;line-height:30px;padding:0 15px;border:1px #d2d2d2 solid;background:#f8f8f8;color:#19a97b;vertical-align:middle;cursor:pointer;}
.table{width:100%;table-layout:fixed;margin:5px 0;}
.table th{border:1px #d2d2d2 solid;height:40px;line-height:40px;}
.table td{border:1px #d2d2d2 solid;padding:10px 8px;position:relative;}
.table td p{margin:5px 0;line-height:1.3;}
.table td mark{color:red;line-height:1.3;}
.table tr:nth-child(odd){background:#f8f8f8;}
.table tr:hover{background:#f9f9f9;}
.table td a{color:#19a97b;margin:0 5px;cursor:pointer;}
.table td .full_link_td{display:block;width:100%;height:100%;border:none;outline:none;position:absolute;top:0;left:0;text-align:center;margin:0;font-size:20px;font-weight:bold;}
.table td .full_link_td:hover{background:#f4f4f4;color:#019163;}
.table td .inner_btn{background:#F9F;color:white;padding:5px 8px;border-radius:2px;}
.table td .inner_btn:hover{background:#ffa4ff;color:#f8f8f8;}
.table td .cut_title{width:265px;}
.table td .link_icon{font-size:24px;font-family:'adminthemesregular';color:#19a97b;}
.table td .link_icon:hover{color:#019163;}
.paging{margin:8px 0;overflow:hidden;text-align:right;}
.paging a{background:#19a97b;border:1px #139667 solid;color:white;padding:5px 8px;display:inline-block;cursor:pointer;}
.paging a:hover{background:#11a274;border:1px #0e8f61 solid;}
.paging a:active{background:#17a578;border:1px #0e8f61 solid;}
.single_selection{color:#333;padding:6px 8px;display:inline-block;vertical-align:middle;}
.single_selection input{margin-right:3px;vertical-align:middle;}
.errorTips{color:red;margin:0 8px;}
.errorTips:before{content:"x";font-family:'adminthemesregular';margin-right:3px;font-size:16px;}
.textarea{display:inline-block;margin-top:5px;outline:none;resize:none;border:1px #139667 solid;padding:8px;}
.uploadImg{display:inline-block;padding:15px;background:#f8f8f8;position:relative;border:1px #139667 solid;}
.uploadImg input{display:none;}
.uploadImg span{display:block;font-size:12px;text-align:center;color:#139667;}
.uploadImg span:hover{color:#209f71;}
.uploadImg span:before{content:"#";font-family:'adminthemesregular';display:block;font-size:40px;}
.ulColumn2{overflow:hidden;}
.ulColumn2 li{margin:15px 0;}
.ulColumn2 li .item_name{text-align:right;display:inline-block;}
/*TAB*/
.admin_tab{background:#f8f8f8;overflow:hidden;border:1px #d2d2d2 solid;margin-bottom:8px;}
.admin_tab li{float:left;height:40px;line-height:40px;border-right:1px #f2f2f2 solid;}
.admin_tab li:last-child{border:none;}
.admin_tab li a{display:block;padding:0 20px;color:grey;font-size:12px;cursor:pointer;}
.admin_tab li a.active{background:white;font-weight:bold;border-top:1px #19a97b solid;color:#19a97b;}
.admin_tab_cont{display:none;margin:5px 0;overflow:hidden;}
.cont_col_lt{width:300px;overflow:hidden;float:left;}
.cont_col_rt{margin-left:315px;overflow:hidden;}
/*pop*/
.pop_bg{display:none;background:rgba(0,0,0,.35);width:100%;height:100%;position:fixed;top:0;left:0;z-index:999;}
.pop_cont{background:white;min-width:300px;height:auto;overflow:hidden;position:absolute;top:20%;left:50%;margin-left:-150px;border-radius:5px 5px 0 0;}
.pop_cont h3{height:40px;line-height:40px;background:#19a97b;color:white;font-size:14px;font-weight:bold;margin:0;padding:0 1em;}
.pop_cont h3:before{content:"*";font-family:'adminthemesregular';margin-right:2px;font-size:20px;font-weight:normal;}
.pop_cont .pop_cont_text{padding:10px;line-height:1.3;color:grey;}
.pop_cont .pop_cont_input{padding:10px;text-align:center;}
.pop_cont .pop_cont_input li{margin:5px 0;text-align:left;overflow:hidden;}
.pop_cont .pop_cont_input li .ttl{display:inline-block;}
.pop_cont .pop_cont_input li .textbox{border:1px #d2d2d2 solid;width:200px;display:inline-block;}
.pop_cont .pop_cont_input li .select{border:1px #d2d2d2 solid;}
.pop_cont .pop_cont_input li .textarea{border:1px #d2d2d2 solid;}
.pop_cont .btm_btn{padding:10px 0;text-align:center;}
.pop_cont .btm_btn .input_btn{display:inline-block;height:35px;border:none;background:none;padding:0 20px;}
.pop_cont .btm_btn .trueBtn{background:#19a97b;color:white;border:1px #19a97b solid;border-radius:2px;}
.pop_cont .btm_btn .trueBtn:hover{background:#13a174;border-radius:0;border:1px #13a174 solid;}
.pop_cont .btm_btn .falseBtn{background:#fafafa;color:grey;border:1px #d2d2d2 solid;border-radius:2px;}
.pop_cont .btm_btn .falseBtn:hover,.pop_cont .btm_btn .input_btn_02:active{background:#f0f0f0;border-radius:0;color:#818181;text-shadow:0 1px 1px white;}
/*loading*/
.loading_area{display:none;background:rgba(255,255,255,.85);position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;z-index:999;}
.loading_cont{overflow:hidden;margin-top:20%;}
@-webkit-keyframes loading_icon{0%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)}
50%{transform:scaleY(.4);-moz-transform:scaleY(.4);-webkit-transform:scaleY(.4)}
100%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)}
}
@-moz-keyframes loading_icon{0%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)}
50%{transform:scaleY(.4);-moz-transform:scaleY(.4);-webkit-transform:scaleY(.4)}
100%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)}
}
.loading_icon i{display:inline-block;width:4px;height:20px;border-radius:2px;background:#19a97b;margin:0 2px}
.loading_icon i:nth-child(1){-webkit-animation:loading_icon 1s ease-in .1s infinite;-moz-animation:loading_icon 1s ease-in .1s infinite;animation:loading_icon 1s ease-in .1s infinite}
.loading_icon i:nth-child(2){-webkit-animation:loading_icon 1s ease-in .2s infinite;-moz-animation:loading_icon 1s ease-in .2s infinite;animation:loading_icon 1s ease-in .2s infinite}
.loading_icon i:nth-child(3){-webkit-animation:loading_icon 1s ease-in .3s infinite;-moz-animation:loading_icon 1s ease-in .3s infinite;animation:loading_icon 1s ease-in .3s infinite}
.loading_icon i:nth-child(4){-webkit-animation:loading_icon 1s ease-in .4s infinite;-moz-animation:loading_icon 1s ease-in .4s infinite;animation:loading_icon 1s ease-in .4s infinite}
.loading_icon i:nth-child(5){-webkit-animation:loading_icon 1s ease-in .5s infinite;-moz-animation:loading_icon 1s ease-in .5s infinite;animation:loading_icon 1s ease-in .5s infinite}
.loading_txt mark{background:none;font-size:12px;color:red;}
/*statistic*/
.dataStatistic{width:700px;height:400px;border:1px solid #ccc;margin:0 auto;margin-top:100px;overflow:hidden}
#cylindrical{width:700px;height:400px;margin-top:-15px}
#line{width:700px;height:400px;margin-top:-15px}
#pie{width:700px;height:400px;margin-top:-15px}

附件:下载该文件资源,减少时间成本(增值服务)