个人觉得在前台比较通用的校验的提示方法
2013-06-09 11:40
211 查看
1：js文件
HTML文件:
效果:
引用的css文件：
需要的图片文件:
var oldflag = "0" , newflag = "0" , rnewflag = "0" ;
$().ready(function() {
$("input[name='oldPwd']").focus(function(){
settip(3,'o');
}).blur(function(){
cherkname();
});
$("input[name='passWord']").focus(function(){
settip(3,'p');
}).blur(function(){
cherkphone();
});
$("input[name='confirm_password']").focus(function(){
settip(3,'q');
}).blur(function(){
cherkbank();
});
//验证当前密码
var cherkname = function(name){
var name = $("input[name='oldPwd']").val();
var tmp = /^[a-zA-Z0-9_*&#$%@~!]{6,15}$/;
var flag=tmp.test(name);
if(flag){
settip(1,'o');
oldflag = "1";
}else{
settip(2,'o');
oldflag = "0";
}
}
//验证新设密码
var cherkphone = function(){
var name = $("input[name='passWord']").val();
var tmp = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
var flag=tmp.test(name);
var stlength = name.length;
//长度是否小于6
var s = stlength > 5;
if(flag && s){
settip(1,'p');
newflag = "1";
}else{
settip(2,'p');
newflag = "0";
}
}
//验证确认密码
var cherkbank = function(){
var name = $("input[name='confirm_password']").val();
var tmp = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
var stlength = name.length;
var flag=tmp.test(name);
var cname = $("input[name='passWord']").val();
var stlength = name.length;
//长度是否小于6
var s = stlength >5;
if((name == cname)&&flag && s){
settip(1,'q');
rnewflag = "1";
}else{
settip(2,'q');
rnewflag = "0";
}
}
//提示
var settip = function(status,name){
$("#"+name+"tip").hide();
$("#"+name+"error").hide();
$("#"+name+"right").hide();
if(status == 1){
$("#"+name+"right").show();
}else if(status == 2){
$("#"+name+"error").show();
}else if(status == 3){
$("#"+name+"tip").show();
}
}
$("#banksubmit").click(function(){
cherkname();
cherkphone();
cherkbank();
if(oldflag == "1"&& rnewflag == "1" && newflag =="1"){
$("#infoForm").submit();
}else
return false;
});
});HTML文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<#include "./common/_public.html"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${title}</title>
<link rel="stylesheet" href="${ctx}/html/images/hua.css" type="text/css"/>
<link rel="stylesheet" href="${ctx}/js/jquery/artDialog/skins/default.css" rel="stylesheet" />
<script type="text/javascript" src="${ctx}/js/jquery/artDialog/basic/artDialog.basic.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery/validate/lib/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/manage/userpswd.js"></script>
</head>
<body>
<#assign mid="channel"/>
<#include "./common/_webTop.html"/>
<#include "./common/_webMenu.html"/>
<div id="main">
<#include "./common/_webSidebar.html"/>
<div id="right">
<div id="reco">
<#include "./common/_webMyChannel.html"/>
</div>
<div id="cont">
<div class="con_top">
<div class="con_left">
<div class="con_right">
<div class="con_bottom">
<span class="to_le">密码修改</span>
<span class="to_ri"></span>
<div class="busins">
<div class="news" style="height:auto;">
<div class="newsd">
<div style="width:600px;font:bold 14px/20px arial,sans-serif;">
请您确定不要使用公开信息作为密码，如生日、电话，密码过于简单有被盗的风险，一旦密码被盗您的个人信息有泄漏的危险，同时您和您好友的利益也会造成损害。<span style="color:#6495ED">修改密码完毕后请重新登录。</span><br/>
<hr style="height: 1px; border:none; border-top:1px dashed #CCCCCC;" /></div>
<form action="${ctx}/web/user!modifyPwd.do" method="post" name="infoForm" id="infoForm">
<input type="hidden" name="id" value="${loginer.userId?default('')}" />
<input type="hidden" name="page" value="modifypswd"/>
<div class="uidiv">
<ul class="uititle" > 登录账号：</ul>
<ul class="uivalue"><input readonly="true" type="text" class="textfile" value="${loginer.userName?default('')}"/></ul>
</div>
<div class="uidiv" style="width:640px;">
<ul class="uititle"> 当前密码：</ul>
<ul class="uivalue"><input name="oldPwd" type="password" class="textfile"/></ul>
<ul class='uitip' id="otip" >请设置新的密码,必须包含数字和字母不少于6位数</ul>
<ul class='uierror' id="oerror" >请正确填入您的密码,必须包含数字和字母不少于6位数</ul>
<ul class='uiright' id="oright"></ul>
</div>
<div class="uidiv" style="width:640px;">
<ul class="uititle" > 新设密码：</ul>
<ul class="uivalue" ><input name="passWord" type="password" class="textfile" /></ul>
<ul class='uitip' id="ptip" >请设置新的密码,必须包含数字和字母不少于6位数</ul>
<ul class='uierror' id="perror" >请正确填入您的密码,必须包含数字和字母不少于6位数</ul>
<ul class='uiright' id="pright" ></ul>
</div>
<div class="uidiv" style="width:640px;">
<ul class="uititle" > 确认密码：</ul>
<ul class="uivalue" ><input name="confirm_password" type="password" class="textfile" /></ul>
<ul class='uitip' id="qtip">请确定设置的新密码,必须包含数字和字母不少于6位数</ul>
<ul class='uierror' id="qerror">两次输入的密码不一致,请再次输入</ul>
<ul class='uiright' id="qright"></ul>
</div>
<div class="uidiv"> <!--img id="banksubmit" src="../html/images/mini_07.gif" style="width:15%;cursor:pointer;"/-->
<a href="#" id="banksubmit" class="button5"></a>
</div>
</form>
</div>
</div>
<span class="bo_le"></span>
<span class="bo_ri"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<#include "./common/_webFooter.html"/>
</body>
<#if actionMessages?exists>
<#if actionMessages.size() gt 0 >
<script type="text/javascript">
art.dialog({
id: '提示',
content: '修改失败，您填写的当前密码错误',
button: [
{
name: '关闭'
}
]
});
</script>
</#if>
</#if>
<#if result?exists>
<#if result.success>
<script type="text/javascript">
art.dialog({
id: '提示',
content: '修改成功，返回到系统首页',
button: [
{
name: '确定',
callback: function () {
window.location.href="index.do";
},
focus: true
}
]
});
</script>
</#if>
</#if>
</html>效果:
引用的css文件：
body {margin: 0px;padding: 0px;background-color: #F2F2F2;font-size: 12px;font-family: "锟斤拷锟斤拷"; color:#333333;}
p,ul,li,h1,h2,h3{margin: 0px;padding: 0px;}
a:link,a:visited {text-decoration: none; color:#333;}
a:hover,a:active{color:#666;text-decoration:underline;}
#top { width:100%; background-color:#FFFFFF;overflow:hidden;}
#top1 { width:920px; margin: 0 auto; height:76px;padding-left:30px;}
/**#logo_1 { background:url(hua_08.gif) no-repeat 0 0; width:102px; height:57px; float:left; display:block; text-indent:-9999px; margin-top:10px;}**/
#logo_1 {width:353px; height:57px; float:left; display:block; text-indent:-9999px; margin-top:10px;}
#logo_2 { background:url(hua_13.gif) no-repeat 0 0; width:251px; height:22px; float:left; display:block; text-indent:-9999px; margin-top: 43px }
#top_ri { background:url(hua_05.gif) #F2F2F2 no-repeat right 0; height:23px; float:right; line-height:23px; margin-top: 8px; display:block; text-align:right; padding-right:10px;}
.top_lr { float:left; background:url(hua_03.gif) no-repeat left 0;text-indent:15px; }
#nav_bg { background:url(hua_18.gif) repeat-x 0 0; width:100%; height:41px; font-size:14px; font-weight:bolder; overflow:hidden;}
#nav { width:950px; margin:0 auto;}
#nav li {float:left;list-style-type: none; background:url(hua_24.gif) no-repeat right center; width:148px;}
#nav li .at:link,#nav li .at:visited{ color:#FFFFFF; background:url(hua_19.gif) no-repeat center 0; width: 124px; height:41px; line-height:45px; display:block; text-align:center; margin:0 auto;}
#nav li .at:hover,#nav li .at1 { background:url(hua_21.gif) no-repeat center 0; color:#CC0000;width: 124px; height:41px; line-height:45px; display:block; text-align:center; margin:0 auto;text-decoration: none;}
.red { color:#CC0000; font-weight:bolder;}
/*login*/
.loginBtn{background:url(lonin_03.gif) no-repeat 0 0; width:93px; height:35px}
.error { order-top: 1px dotted #CCCCCC;clear: both;color: #CC0000;font-size:13px;font-variant: small-caps;padding: 0px 0 0 15px;}
.errorhide{display:none;}
.errortip{font:10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: red;letter-spacing: 2px;text-transform: uppercase; text-align: left; padding: 0px 6px 0px 45px;margin:2px;width:265px;}
.usertext{font-family: "Trebuchet MS",Trebuchet,Verdana,Helvetica,Arial,sans-serif;border: 1px solid #CCCCCC;font-size: 14px;margin-left: 3px;padding: 2px;width: 160px;color:#666;}
#main{ width:950px; margin:10px auto; overflow:hidden;}
#left{ width: 230px; float:left; background:url(hua_88.gif) no-repeat center bottom; padding-bottom:11px;}
.info { background:url(hua_40.gif) repeat-y center 0;overflow:hidden;}
.info_tit {background:url(hua_30.gif) no-repeat center 0; text-align:center; color:#FFFFFF; font-size:14px; font-weight:bolder; display:block; height:39px; line-height:39px;}
.info ul { width:185px; margin:8px auto; overflow:hidden;}
.info li { float:left; width:49.5%; list-style-type:none; line-height:18px;}
.info_na { text-align:right; font-weight:bolder;}
.info_sep { background:url(hua_94.gif) repeat-x 0 0; width:80%; height:4px; margin:0 auto; overflow:hidden;}
.info_ce { text-align:center;}
.gen { background:url(hua_40.gif) repeat-y center 0; padding-bottom:10px;}
.gen_tit { background:url(hua_66.gif) no-repeat center 0; color:#FFFFFF; font-size:14px; font-weight:bolder; display:block; height: 33px; padding-top:16px; text-indent:32px;}
.gen ul{ width:201px; margin:0px auto; overflow:hidden; }
.gen li {list-style-type:none; line-height:26px;}
.gen .bto {border-bottom:1px #CCCCCC dashed;line-height:26px; height:26px; overflow:hidden; clear:left;}
#right { width:710px; float:right;}
#reco_bg { width:100%; background:url(hua_35.gif) repeat-x 0 0; height:39px; line-height:39px; float:right;}
.reco_tit { background:url(hua_32.gif) no-repeat 0 0; width:163px; height:39px; float:left; text-align:center; font-weight:bolder; color:#FFFFFF; font-size:14px;}
#reco_bg p { background:url(hua_36.gif) no-repeat right 0; float:right; padding-right:30px;}
/*#reco { width:700px; background:url(hua_46.gif) repeat-x 0 0; height:169px; float:right; margin-top:12px; margin-bottom:15px;}*/
#reco { width:700px;background:url(hua_46.gif) repeat-x 0 0; height:169px;float:right; margin-top:12px; margin-bottom:15px;}
.reco_le {background:url(hua_43.gif) no-repeat 0 0; float:left; height:169px; overflow:hidden; clear:both; display:block; _padding-left:10px;}
.reco_le .condition_title { color: #CC0033;left: 15px;font-weight:bold;font-size:14px;line-height: 150%;padding:0px 15px 0 25px;width: 150px;}/*padding: 10px 15px 0 25px;*/
.reco_le .containerprice {
margin-left: 55px;
}
.containerprice a{
padding-left:5px;
line-height:25px;
}
.containerprice a:link,.containerprice a:visited{
color:#000;text-decoration: none;
}
.containerprice a:hover,.containerprice a:active{ color:red;}
.containerprice strong{
color:red;
}
.containerprice_div{ padding-right:20px;}
.keywordform {
float: left;
margin-top: 6px;
padding-left: 20px;
}
.keywordform .search{
background: url(sho_03.gif)
}
#reco ul { background:url(hua_47.gif) no-repeat right 0; width:700px; height:169px; overflow:hidden; padding-top:12px;} /*tianjia : height:169px; padding-top:12px;*/
.reco_img { border:1px solid #ccc; padding:1px; }
#reco li { width:130px; list-style-type:none; text-align:center; float:left;}
/*###*/
/*.oran { width:100px!important;width:80px; height:18px; text-align:center; margin:5px auto!important;margin:5; font-size:11px;overflow:hidden;}
.oran a:link, .oran a:visited{color:#FF6600}
.oran a:hover {color:#CC0033;}
.oran_sc { width:100px!important;width:100px; height:29px; text-align:center; margin:5px auto!important;margin:5; font-size:11px;line-height:16px;overflow:hidden;}
.oran_sc a:link, .oran_sc a:visited{color:#FF6600}
.oran_sc a:hover {color:#CC0033;}
.reco_price { background:url(hua_53.gif) no-repeat 0 0; width:97px; height:31px; line-height:31px; margin:7px 12px 0 0;}
.reco_price span { margin:7px 7px 0 0; }
.reco_price a:link, .reco_price a:visited{ color:#FFFFFF; font-weight:normal;display:block; width:36px; float:right; margin:7px 7px 0 0;}
.reco_price a:hover { color:#990033;}
.reco_price span {font-weight:bolder;color:#666666; float:left; width:52px; text-align:center; margin-top:10px;}*/
/*###*/
.ri_br { border-right:1px ;}
#cont{ float: right;width:100%; background-color:#EEEEEE; margin-bottom:15px; overflow:hidden;}
/*.con_top { background:url(hua_70.gif) repeat-x 0 top; overflow:hidden; margin-bottom:15px;}*/
.con_top { background:url(cont_top_bg.jpg) repeat-x right top;overflow:hidden; }
.con_left { background:url(hua_79.gif) repeat-y left top; overflow:hidden; }
.con_right { background:url(hua_82.gif) repeat-y right 0; overflow:hidden;}
/*.con_bottom {background:url(hua_84.gif) repeat-x 0 bottom; overflow:hidden;}*/
.con_bottom {background:url(bottom_bg.jpg) repeat-x center bottom; overflow:hidden; }
.to_le {background:url(hua_68.gif) no-repeat 0 0;width:163px;height:42px;display:block;float:left; font-size:14px; font-weight:bolder; text-align:center; color:#FFFFFF; line-height:50px;}
.to_ri {background:url(hua_71.gif) no-repeat 0 0;width:13px;height:12px;display:block;float:right;}
.con_tit { background: url(hua_73.gif) repeat-x 0 bottom; width:72%; display:block; float: left; height:27px; padding-top:12px; margin-left:17px; font-size:14px; color:#FF6600; font-weight:bolder; text-align:right;}
/*.bo_le {background:url(hua_83.gif) no-repeat 0 0;width:16px;height:13px;display:block;float:left; _margin-bottom:-1px;}
.bo_ri {background:url(hua_86.gif) no-repeat 0 0;width:13px;height:13px;display:block;float:right;_margin-bottom:-1px;}
*/
/*.con_con ul a strong { font-family:"寰蒋闆呴粦"; font-weight:normal;}*/
a.con_sub,a.con_sub:visited { color:#333; margin-left:35px;font-size:14px; font-family: "寰蒋闆呴粦"; }
a.con_sub:hover,a.con_sub:active { color:#ff6600; }
.con_con { width:100%;overflow:hidden;*overflow:visible; clear:both; padding-bottom:12px;} /* qudiao *margin-bottom:20px; */
.con_con ul {/*margin:10px 0 0 12px;*/list-style:none; padding-left:10px; }
.con_con li { width:120px; display:block;text-align:center; float:left; margin:10px 8px 18px 10px; _margin:10px 6px 18px 10px; overflow:hidden;}
.con_con li img { border:none;}
.con_con li a.con_hover, .con_con li a.con_hover:visited{ border:#eeeded solid 1px; float:left; display: block; width:108px; height:169px; padding:4px 5px;}
.con_con li a.con_hover:active,.con_con li a.con_hover:hover { border:#f7a976 solid 1px; background:#f3d2bc; color:#fff; display: block; width:108px; height:169px; overflow:hidden; text-decoration:none; }
.con_con li a dl { margin:0px; padding:0px;}
.con_con li a dl dt { margin-bottom:5px;}
.con_con li a dl dd {text-align: center; width:100%; float:left; margin:0px;}
.con_con li a dl .con_dd1 { color:#666; height:32px; line-height:18px; overflow:hidden;}
.con_con li a dl .con_dd2 {background:url(hua_53.png) no-repeat center 0; height:31px; line-height:31px; margin-top:10px;}
.con_con li a dl .con_dd2 span { float:left; width:48px;_width:28px; _margin-left:8px; text-align:center; color:#666666; margin-top:3px;}
#page{ margin-top:10px; padding-top:20px; text-align:center}
#foot { clear:both; background:url(hua_94.gif) repeat-x 0 0; width:100%; height:63px; overflow:hidden; text-align:center; padding-top:15px; line-height:25px;}
.gen span {text-align:center; display:block; float:left; padding:0 1px;}
.tr_d1{ width:39px;}
.tr_d2{ width:28px;}
.tr_d3{ width:70px;}
.tr_d4 { width:104px;}
.busin { width:100%; overflow:hidden; padding-bottom:15px;}
/*.busin ul { width: 650px; margin:8px auto 0px; overflow:hidden;height:565px;_height:558px; }*/
.busin ul { width: 650px; margin:8px auto 0px; overflow:hidden;}
.busin li { list-style-type:none; clear: left; overflow:hidden;}
.busin_tibg { background:url(hua_94.gif) repeat-x 0 bottom; padding:5px;}
.ti_01 { background:url(huas_07.gif) no-repeat 0 0; width: 68px; height:15px; display:block; margin-left:8px; text-indent:-9999px; }
.ti_02 { background:url(huas_10.gif) no-repeat 0 0; width: 68px; height:15px; display:block; margin-left:8px; text-indent:-9999px; }
.ti_03 { background:url(huas_12.gif) no-repeat 0 0; width: 68px; height:15px; display:block; margin-left:8px; text-indent:-9999px;}
.ti_04 { background:url(huas_14.gif) no-repeat 0 0; width: 96px; height:15px; display:block; margin-left:8px; text-indent:-9999px; }
.ti_05 { margin: 15px; font-size:14px; line-height:32px;}
.busin_img { border:1px solid #ccc; padding:1px; display:block; float: left; margin:20px;}
.busin_p { float:left; width:320px; margin-top:30px; line-height:30px; font-size:14px; margin-right:5px;}
.busin_ka1 { background:url(huas_0303.gif) no-repeat 0 0; width:158px; height:45px; display:block; float:left; text-indent:-9999px; margin-top:40px;}
.busin_ka { background:url(huas_03.gif) no-repeat 0 0; width:158px; height:45px; display:block; float:left; text-indent:-9999px; margin-top:40px;}
.box { border:1px solid #ccc; padding:2px; font-size:14px; width:150px;}
.news { width: 650px; margin:8px auto 0px; overflow:hidden;height:565px;_height:558px;}
.news_tit { text-align:center; font-size:16px; font-weight:bolder; color:#333333; margin:15px auto;}
.news_time { text-align:center; color:#666666; background: url(hua_94.gif) repeat-x scroll 0 bottom; padding-bottom:15px;}
.news_con { margin:15px; line-height: 24px; color:#666666;}
.news_answer_detail {padding-left:30px; background:url(001_50.gif ) no-repeat; margin-left:40px; line-height: 24px; color:#666666;border-bottom: 1px dashed #CCCCCC;}
.news_answer_detail {}
#login_new{ position:absolute; top:50%; left:50%;height:504px; margin-top:-252px; margin-left:-423px;background:url(login_bg.jpg) no-repeat 0 0; width:847px;}
#login_new .tyno{ font-size:14px; width:180px; margin-left:3px; border: 1px solid #ccc; padding:2px;}
.mi:link, .mi:visited {color:#666;text-decoration: underline; font-size:14px;}
.mi:hover { color:#CC0000;text-decoration: none;}
.n_no{ width:80px !important;}
#error_page{ position:absolute; top:50%; left:50%;height:504px; margin-top:-202px; margin-left:-473px;background:url(errorpage.jpg) no-repeat 0 0; width:934px;}
#error_page dl{ float:right;padding-top:85px;padding-right:35px;line-height:22px;}
#error_page ul{ float:left;width:430px;letter-spacing:1px;padding-right:50px;}
#error_page dt{font-size:24px;color:red;}
#error_page_div{ font-size:14px;padding-top:8px;font-weight:bolder;width:430px;}
#error_page li{ font-size:12px;list-style-type:none; }
#error_page_bottom{position:absolute;top:68%;width:100%;}
.stati{ overflow: hidden;width: 100%;}
.stati_sys {width: 95%; margin:0px auto 0px; overflow:hidden;padding-left:5px!important;padding-left:2px; padding-bottom:12px;} /*jia padding-bottom:12px;*/
.stati_sys li{ float:left; list-style-type:none; }
.sys {border-bottom: 1px dashed #ccc; width:300px; height:30px;font-size:14px; text-indent:20px; padding-top:10px;}
.sys_ul { margin:0 auto; overflow:hidden; text-align:center;}
.inquiry { background: url(hua_03.jpg) no-repeat 0 0; width:158px; height:45px; clear:both; display:block; margin:20px auto; text-indent:-9999px;border:none; cursor:pointer; }
.inhover { border:none; cursor:pointer; background: url(g_h4.jpg) no-repeat 0 0; width:158px; height:45px; clear:both; display:block; margin:20px auto; text-indent:-9999px; }
.inactive { background: url(g4.jpg) no-repeat 0 0; width:158px; height:45px; clear:both; display:block; margin:20px auto; text-indent:-9999px; }
.table_tit{ background:url(hua_07.gif) repeat-x 0 0; text-align:center; font-weight:bolder; color:#666666;}
/*.table_tit{ background:url(hua_07.jpg) no-repeat center center; text-align:center; font-weight:bolder; color:#666666;}*/
.tr1{ text-align:center; padding:2px; height:25px; font-size:12px;}
/*.tr1 td{padding:2px 0 0 10px}*/
.tr2 {text-align:center; padding:2px; height:25px; background:#f8f8f8; font-size:12px;}
.stati2{ overflow: hidden;width: 100%;margin:0px 50px 20px 5px;}
.stati2 ul{list-style-type: none;margin:0;padding:0}
.stati2 li {float:left;width:100%;height:20px}
#mini { width:443px;margin:0 auto;background:url(mini_10.gif) #eee no-repeat 0 bottom; overflow:hidden; padding-bottom:10px; font-size:14px; }
#mini_tit { background:url(mini_03.gif) no-repeat 0 0; height:47px; width:443px; text-indent:40px; color:#FFFFFF; font-weight:bolder; line-height:47px;}
.mini_close { background:url(mini_04.gif) no-repeat 0 bottom; height:12px; width:14px; display:block; text-indent:-9999px;float:right; line-height:12px; padding: 15px 20px 0 0;}
.mini_span { float:left;}
#mini_con {height:600px; border-width: 0 1px; padding:45px 0;text-align:left;}
#mini_con p { width: 569px; margin:0 auto; line-height: 40px; height:40px;}
.mini_1{ background:url(mini_07.gif) no-repeat 0 0; width:100px; height: 28px; margin:10px auto 0; border:none; text-indent:-9999px; display:block; cursor:pointer}
.mini_2{ background:url(g_h5.jpg) no-repeat 0 0; width:100px; height: 28px; }
.mini_3{ background:url(g5.jpg) no-repeat 0 0; width:100px; height: 28px;}
.know { background: url(hus_03.gif) repeat-x 0 0; height:37px; line-height:37px; padding-left:30px; margin:20px 0;}
.kn:link, .kn:visited { background:url(hus_07.gif) no-repeat 0 0; width:118px; text-align:center; display:block; height:37px; margin-right:12px; font-size:14px;}
.kn:hover, .kn1 { background:url(hus_05.gif) no-repeat 0 0; font-weight:bolder;text-decoration: none; width:118px; text-align:center; display:block; height:37px; margin-right:12px; font-size:14px;}
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}
#container-1{ border:#ccc 1px double;position:absolute;left:345px; top:180px;width:350px;}
#container-logo {height:60px;left: 349px;position: absolute;top: 95px; width: 353px;}
#fragment-1 img{ margin:0; padding:0px; border:0px; float:left;}
.ui-tabs-panel{width:333px;overflow:hidden;}
.ui-tabs-nav, .ui-tabs-panel {
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ui-tabs-nav {
list-style: none;
background:none;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
/*min-width: 84px; be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display: block;
width:175px;
height:32px;
line-height:32px;
}
.ui-tabs-nav a {
margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
padding-left: 0;
color: #27537a;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap; /* required in IE 6 */
outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
z-index: 2;
margin-top: 0;
color: #000;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.ui-tabs-nav a{
background:#EDEDED;
}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
background:#fff;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-panel {
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.ui-tabs-loading em {
background: url(loading.gif) no-repeat 0 50%;
}
/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
display: inline-block;
}
*:first-child+html .ui-tabs-nav { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
display: inline-block;
}
/*login.html */
.tclss{
height:22px;width:50px;font-size:14px;max-height:22px;line-height:22px;
}
/*modifyuser.html */
.busins { width:100%; overflow:hidden;}
.newsd{padding:5px 0px; font:12px/20px arial,sans-serif;}
.uierror{float:left;display:none; border: 1px solid #EED1D2;color: #CC0000;height: 34px;line-height: 34px;margin-top: 4px;margin:2px;overflow: hidden;padding: 0 10px 0 30px;width:245px; background: url('wrong.png') no-repeat 6px center;BACKGROUND-COLOR:#fff;}
.uitip{float:left;height: 34px;display:none;line-height: 34px;margin-top: 4px;overflow: hidden;padding: 0 5px 0 30px;width:249px;margin:3px; background: url('delete.gif') no-repeat 6px center;BACKGROUND-COLOR:#fff;}
.uiright{float:left; line-height: 34px;height:30px;margin-top: 4px;overflow: hidden;padding: 0 5px 0 30px;margin:3px; background: url('right.png') no-repeat 6px center;}
.textfile{font-size: 13px;height:25px;padding: 1px 5px;line-height:25px;width:178px;margin:3px; border:#cccccc solid 1px;}
.uititle{float:left;width:120px;height:34px;margin-top: 4px;font-size:13px;text-align:right;padding:4px 0;}
.uivalue{float:left;width:200px;height:34px;}
.uidiv{float:left;width:620px;font-size:13px;padding:2px 5px;}
/*forum*/
.forum { width:100%; _height:50px}
.forum .forum_left{width:20%;_height:200px;float:left;text-align:center;color:#CCCCCC;border-top: 25px none;}
.forum .forum_left ul li{list-style:none;}
.forum_img{height:70px;}
.forum .forum_right{width:80%;_height:200px;float:left;margin:8px auto 0px; overflow:hidden;}
.forum_tit { text-align:center; font-size:14px; font-weight:bolder; color:#333333; margin:15px auto;}
.forum_tit2{ text-align:right; color:#666666;}
.forum_con { margin-left:20px; line-height: 18px; }
.stati_forum{width: 95%; margin:8px auto 0px; overflow:hidden;height:565px;_height:558px;}
.reply_tit {background:url(hua_68.gif) no-repeat 0 0;width:163px;height:42px;display:block;font-size:14px; font-weight:bolder; text-align:center; color:#FFFFFF; line-height:50px;}
/*recommend css modify **/
.recWay_box { border:1px solid #ccc; padding:2px; width:100px; _margin-top:8px;}
.reco_le dl dt a:link ,.reco_le dl dt a:visited { color:#000; text-decoration:none;}
.reco_le dl dt a:active,.reco_le dl dt a:hover { color:#f00; text-decoration: underline;}
.dls{
background: url("cate-line.png") no-repeat scroll right top transparent;
float:left;
line-height: 160%;
padding: 0 16px 0 0!important;
padding: 0 6px 0px 5px;
width:154px!important;
width:154px;
display: block;
margin:0px 6px 0px 3px;
_margin-right:15px;
_padding-left:0px;
}
.dls dt{
line-height:160%;
padding:0px 15px 0 10px!important;
padding:0;
width: 150px!important;
width: 138px;
}
.dls dd{
line-height:160%;
width: 150px!important;
width: 138px;
}
.dle{
float: left;
margin:0px;
/*_margin-left:16px;*/
line-height: 160%;
padding:0 5px 0 0!important;
padding-left:8px;
width: 150px!important;
width:138px;
display:inline;
}
.dle dt{
line-height: 160%;
padding: 0 5px 0 10px!important;
padding:0px;
width: 150px!important;
width: 138px;
}
.dle dd{
font-weight:bolder;
float: left;
line-height: 160%;
padding: 0 5px 0 10px!important;
padding:0px;
width: 150px!important;
width: 138px;
text-align:left;
}
/*mychannel */
.stati_sys_span span { font-size:11px;color:#666;width:130px;}
a.stati_sys_span:link,a.stati_sys_span:visited { font-size:11px;color:#666;width:130px; }
a.stati_sys_span:active, a.stati_sys_span:hover { color:#ff0; text-decoration:underline;}
.stati_sys_sub { clear:both; padding:10px 10px 10px 20px; }
.stati_sys_sub table tr td { line-height:28px;}
.stati_sys_sub table tr td span { color:#003C9B;}
.info-label {
float: left;
padding-right: 16px;
text-align: right;
width: 73px;
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: baseline;
color: #686868;
line-height: 150%;
display:inline;
}
.info-content {
display: block;
margin-left: 10px;
width: 263px;
word-wrap: break-word;
color: #003C9B;
line-height: 150%;
display:inline;
}
.mail-label {
float:left;
padding-left:20px;
display: block;
text-align: left;
width: 530px;
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
padding-top: 2px;
text-decoration: none;
vertical-align: baseline;
color: #686868;
line-height: 150%;
overflow:hidden;
display:inline;
}
.mail-date {
text-align: left;
font-size: 100%;
font-family: inherit;
font-weight: inherit;
padding-top: 2px;
margin: 0;
vertical-align: baseline;
color: #686868;
line-height:160%;
overflow:hidden;
display:inline;
/*line-height:22px;*/
}
.mail-label img{
width:18px;height:18px;vertical-align:middle;
}
div.RoundedCorner{background: #FFF;width:100%;}
b.rtop, b.rbottom{display:block;background: #F2F2F2}
b.rtop b, b.rbottom b{display:block;height:1px;overflow: hidden; background: #fff}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
.RoundedCorner p{
line-height:22px;
}
#RoundedCorner2 {margin-left: 5px; margin-top:0px; padding: 5px; width: 97%; height: 120px; }
#RoundedCorner2 p { line-height:23px;}
.product_div {
float:left;
width:690px;
}
.product_div li{
float:left;
width:130px;
padding-left:5px!important;
padding-left:3px;
/*height:160px;*/
text-align:center;
}
#login_404{ position:absolute; top:50%; left:50%;height:352px; margin-top:-176px; margin-left:-233px; width:466px;background:url(errorpage.gif) no-repeat 0 0;}
a.button1 {background:url(hua_56.gif) no-repeat 0 0; display: block; width:67px; height:25px; }
a.button1:hover { background:url(g_h1.jpg) no-repeat 0 0; display: block; width:67px; height:25px; }
a.button1:active { background:url(g1.jpg) no-repeat 0 0; display: block; width:67px; height:25px; }
a.button2 {background:url(hua_58.gif) no-repeat 0 0; display: block; width:67px; height:25px; }
a.button2:hover { background:url(g_h2.jpg) no-repeat 0 0; display: block; width:67px; height:25px; }
a.button2:active { background:url(g2.jpg) no-repeat 0 0; display: block; width:67px; height:25px; }
a.button3 {background:url(sho_03.gif) no-repeat center top; display: block; float:left; width:67px; height:25px; margin-left:5px; overflow:hidden;}
a.button3:hover { background:url(g_h3.jpg) no-repeat center top; display:block; float:left; width:67px; height:25px;margin-left:5px; overflow:hidden; }
a.button3:active { background:url(g3.jpg) no-repeat center top; display:block; float:left; width:67px; height:25px; margin-left:5px; overflow:hidden; }
a.button5 {background:url(mini_07.gif) no-repeat center top; display: block; width:100px; height:28px; margin-bottom:15px;}
a.button5:hover { background:url(g_h5.jpg) no-repeat center top; display:block; width:100px; height:28px; margin-bottom:15px; }
a.button5:active { background:url(g5.jpg) no-repeat center top; display:block; width:100px; height:28px; margin-bottom:15px; }
a.button6 {background:url(g6.jpg) no-repeat center top; display: block; width:67px; height:25px; margin-bottom:15px;}
a.button6:hover { background:url(g6.jpg) no-repeat center top; display:block; width:67px; height:25px; margin-bottom:15px; }
a.button6:active { background:url(g6.jpg) no-repeat center top; display:block;width:67px; height:25px; margin-bottom:15px; }需要的图片文件:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [转]一种通用的输入校验方法和气球泡提示的实现(键盘用户界面模块)
- （转载）javascript获取querystring值【个人觉得这种方法最好最棒最像.NET】
- ASP编程实用20例(个人觉得比较有用)
- 比较通用的文件下载方法
- 个人觉得比较经典的菜单(来源:kijiji.cn)
- iOS设备的硬件适配 (关于armv6, armv7, armv7s 个人觉得说得比较清楚)
- C# 根据前台校验的值，决定是否执行后台方法
- Linux系统中提示/usr/bin/ld: cannot find -lxxx错误的通用解决方法
- SQL语句的防溢出攻击写法（个人觉得写法比较简单又清晰）DEMO
- 在后台向前台显示提示信息的方法
- Effective Java 对于所有对象都通用的方法 12.考虑实现Comparable(可以比较)接口
- 动态网页设计学习过程中个人觉得比较重要的问题（随时更新）
- C语言面试题大汇总，个人觉得还是比较全地!!!
- Linux系统中提示/usr/bin/ld: cannot find -lxxx错误的通用解决方法
- 导入Excel数据时对数据校验提示方法
- Android下实现tab页个人比较推崇的方法
- 一个简洁的通用前端输入数据校验方法
- 网站服务器通用和专用保护方法比较分析
- 导入Excel数据时对数据校验提示方法
- 个人觉得最好的生成","分割字符串的方法