css ul dl dt 表格分页 文本框样式
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%@include file="/taglib/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>船舶GPS绑定</title> <script type="text/javascript" src="js/common/jquery-1.9.1.min.js"></script> <link href="js/common/jPaginate/css/style.css" rel="stylesheet" type="text/css" /> <script src="js/common/jPaginate/jquery.paginate.js" type="text/javascript"></script> <script src="js/source/shipmngbk.js" type="text/javascript"></script> <script type="text/javascript"> $(function($) { /* $(".infoForm").Validform({ tiptype : function(msg, o, cssctl) { if (!o.obj.is("form")) { var objtip = o.obj.siblings(".Validform_checktip"); cssctl(objtip, o.type); objtip.text(msg); } else { var objtip = o.obj.find("#msgdemo"); cssctl(objtip, o.type); objtip.text(msg); } }, beforeSubmit : function(curform) { }, showAllError : true });*/ $("#tablePage").paginate({ count : "${pageInfo.pageMax}", start : "${pageInfo.currentPage}", display : 10, border : false, text_color : '#79B5E3', background_color : 'none', text_hover_color : '#2573AF', background_hover_color : 'none', images : false, mouse : 'press', onChange : function(page) { $('#currentPage').val(page); $('.infoForm').submit(); } }); }); </script> <style type="text/css"> table { border-collapse: separate; border-spacing:0; } body{ font-family:Tahoma,Arial,Helvetica,"宋体"; font-size:12px; background:#FFF; color:#212121; } #shipmngbktable { margin:0 auto; width:99%; background-color:#FFF; } #shipmngbktable td{ border:1px solid #CCC; border-collapse:collapse; line-height: 30px;} #shipmngbktable th{ border:1px solid #549db9; border-collapse:collapse; } #shipmngbktable td,#shipmngbktable th{padding:5px 0; word-break:break-all;} /* 行距缩小，增加上下边距 */ #shipmngbktable thead th {background: #dcecf2 url(img/tabletitlebj.png) bottom repeat-x;text-align: center;color: #333;} #shipmngbktable tbody td{ padding:0 5px; } #shipmngbktable tfoot td{ background-color:#eee; } .select_tr{ background: #00CCFF; } #bindShipmmsiDiv,#bindPhondDiv{ border:3px solid #CCC; border-radius: 10px; color:#666; background-color:#f7f7f7; position:absolute; z-index: 20; margin:0 auto; width: 660px; height: 350px; } #addDiv{ border:3px solid #CCC; border-radius: 10px; color:#666; background-color:#f7f7f7; position:absolute; z-index: 8; margin:0 auto; width: 660px; height: 200px; } #bindPhondDiv table th,#bindShipmmsiDiv table th{ line-height:24px; border:1px solid #549db9; border-collapse:collapse; background: #dcecf2 url(img/tabletitlebj.png) bottom repeat-x; text-align: center; color: #333; height: 24px; } #bindPhondDiv table tbody tr td,#bindShipmmsiDiv table tbody tr td{ border:1px solid #549db9; height: 19px; } #submitship,.button{ background:url(img/input1.png) no-repeat; height:26px; line-height:26px; width:76px; color:#fff; margin:8px; border:none; } </style> </head> <body> <div style="margin:0 auto; width:780px;" id="selectInfoDiv"> <s:form cssClass="infoForm" action="shipbk/findShipList.do" method="post"> <s:hidden id="currentPage" name="page" value="1" /> <table style="width: 780px;"> <tr><td align="right">船舶编号：</td><td><input type="text" name="shipmmsi" value="${shipmmsi }" ></td> <td align="right">终端编号：</td><td><input type="text" name="gpsid" value="${gpsid }" ></td> <td colspan="2" rowspan="2" align="left" width="80" style="margin-left: -50px;"> <s:submit value="筛选" id="submitship" ></s:submit></td></tr> <tr><td align="right">手机号：</td><td><input type="text" name="cmsid" value="${cmsid }" ></td> <td align="right">船舶名称：</td><td><input type="text" name="shipname" value="${shipname }" ></td></tr> </table> <div align="left" style="width: 780px;"> <input type="button" value="添加" id="add" class="button"/> <input type="button" value="编辑" id="edit" class="button" /> <input type="button" value="删除" id="delete" class="button"/> </div> <table id="shipmngbktable" style="width: 99%;"> <thead><th>船舶名称</th><th>船舶编号</th><th>终端编号</th><th>手机号</th></thead> <tbody> <c:forEach items="${pageInfo.list }" var="bk"> <tr alt='${bk.id}'><td>${bk.shipName}</td><td>${bk.shipMMSI}</td><td>${bk.gpsId}</td><td>${bk.csmId}</td></tr> </c:forEach> </tbody> <tfoot> <tr> <td colspan="4"> <div id="tablePage" class="jPaginate"> <%@include file="/taglib/PageInfo.jsp"%> </div> </td> </tr> </tfoot> </table> </s:form> </div> <!-- 添加编辑 --> <div align="center" > <div id="addDiv" style="display: none;"> <table width="97%" style="margin-top: 35px;"> <tr> <td>终端编号：</td><td><input type="text" name="gpsid" disabled="disabled"></td> <td>手机号：</td><td><input type="text" name="cmsid" disabled="disabled"></td> <td><input type="button" value="绑定" id="gpsphone" class="button"/></td> </tr> <tr> <td>船舶编号：</td><td><input type="text" name="shipmmsi" disabled="disabled" ></td> <td>船舶名称：</td><td><input type="text" name="shipname" disabled="disabled"></td> <td><input type="button" value="绑定" id="mmsiship" class="button"/></td> </tr> <tr> <td colspan="5" align="right"> <input type="button" value="绑定" id="bindship" class="button"/> <input type="button" value="取消" id="unbindship" class="button" style="margin-right: 28px;"/> </td> </tr> </table> </div> </div> <!-- 查找终端编号 和手机号--> <div align="center" > <div id="bindPhondDiv" style="display: none;"> <div> 终端编号: <input type="text" name="gpsid" /> 手机号: <input type="text" name="cmsid" /> <input type="button" value="查询" id="queryBindPhone" class="button"/> </div> <div style="overflow:auto;height: 320px;"> <table width="98%"> <thead><th align="left">终端编号</th> <th align="left">手机号</th></thead> <tbody> </tbody> <tfoot> <tr> <td align="left"><input type="button" value="添加" class="button" id="queryBindPhoneAdd"/></td> <td align="right"><input type="button" value="取消" class="button" id="queryBindPhoneCancel"/></td> </tr> </tfoot> </table> </div> </div> </div> <!-- 查找船舶编号 和船舶名称--> <div align="center" > <div id="bindShipmmsiDiv" style="display: none;"> <div> 船舶编号: <input type="text" name="shipmmsi" /> 船舶名称: <input type="text" name="shipname" /> <input type="button" value="查询" id="queryBindShipmmsi" class="button"/> </div> <div style="overflow:auto;height: 320px;"> <table width="98%"> <thead><th align="left">船舶编号</th><th align="left">船舶名称</th></thead> <tbody> </tbody> <tfoot> <tr> <td align="left"><input type="button" value="添加" class="button" id="queryBindShipmmsiAdd"/></td> <td align="right"><input type="button" value="取消" class="button" id="queryBindShipmmsiCancel"/></td> </tr> </tfoot> </table> </div> </div> </div> </body> </html>
var select_li=-1; $(function(){ $("#configTypeDiv ul li").click(function(){ $(this).css({"background-color":"#00CCFF"}).siblings().css({"background-color":"#0099FF"}); select_li = $(this).index(); }); $("#btnTest").click(function(){ testConnection("shipbk/testConn.do?t=1",true); }); $("#btnSave").click(function(){ testConnection("shipbk/testConn.do?t=2",false); }); }); function testConnection(url,sel){ if(select_li==-1){ alert("请选择要连接的数据库"); return false; } validateForm(); $("#projectType").val(select_li); $.ajax({ url : url, async : true, data:$("#configForm").serialize(), type : "POST", success : function(data) { var res = eval('(' + data + ')'); if(res && res.success==true){ if(sel){ alert("测试成功"); }else{ alert("保存成功"); } }else{ if(sel){ alert("测试失败"); }else{ alert("保存失败"); } } } }); } function validateForm(){ var jsons=["IP不能为空","用户名不能为空","密码不能为空","数据库名称不能为空"]; $("#configInfoDiv input[type=text]").each(function(i){ if($(this).val()==""){ alert(jsons[i]); return false; } }); };
css基本知识:
@charset "utf-8"; /* CSS Document */ .marleft30{ margin-left:30px;} .padleft{ padding-left:30px;} .minheight{ height:100%;} .mainleft{ background:url(../img/leftbj.gif) repeat-y; width:100%; float:left;} .mainleft .logo{ margin:20px 20px; height:27px;} .mainleft .line{ background:url(../img/navbj.png) repeat-x; display:block; height:2px; width:207px;} .mainleft nav{ margin:10px 0;} /* 第一级nav */ .mainleft nav ul li{ background: url(../img/navbj01.jpg) no-repeat;} .mainleft nav ul li a{ color:#e1f2ff; padding-left:50px; line-height:35px; height:35px; line-height:35px; width:157px; display:block;} .mainleft nav ul li span{ display:block; width:19px; height:20px; float:left; margin:7px 0 0 20px;} .mainleft nav ul li .nav-xt{ background:url(../img/navinco.png) 0 0;} .mainleft nav ul li .nav-cb{ background:url(../img/navinco.png) 0 -29px;} .mainleft nav ul li .nav-hy{ background:url(../img/navinco.png) 0 -49px;} /* 第二级nav */ .mainleft nav ul li ul li{ background: url(../img/navbj02.jpg) no-repeat;} .mainleft nav ul li ul li a{ color:#e1f2ff; padding-left:55px; line-height:33px; height:33px; line-height:33px; width:157px;} .mainleft nav ul li ul li .on{ color:#ffc600;} .mainleft nav ul li ul li span{ display:block; width:9px; height:9px; background:url(../img/navinco.png) 0 -20px; float:left; margin:13px 0 0 30px;} /* 第三级nav */ .mainleft nav ul li ul li ul li{ background-image:none; background-color:#336f9c; width:207px; border-bottom:1PX solid #4183b4;} .mainleft nav ul li ul li ul li a{ color:#e1f2ff; padding-left:20px; height:27px; line-height:27px; width:187px; background:url(../img/navinco.png) 0 -69px no-repeat; margin-left:50px;} .mainleft nav ul li ul li ul li .on{ background:url(../img/navinco.png) 0 -96px no-repeat; color:#ffc600;} /* nav end */ /* 右上 */ .mainright .header{ height:40px; line-height:40px; background-color:#898989; color:#FFF;} .mainright .header span{ padding-left:20px;} .mainright .header span b{ padding:0 15px 0 0; color:#ffd800;} .mainright .header .setting{ padding:0 15px 0 0; color:#FFF; text-decoration:underline; } .mainright .header .quit{ padding:0 20px 0 23px; color:#FFF; text-decoration:underline; background:url(../img/maininco.png) 0 -29px no-repeat; } /* 右上 end */ .mainright .welcome{ font:16px/29px "微软雅黑"; background:url(../img/maininco.png) 0 0 no-repeat; padding-left:40px; width:240px; margin:200px auto;} /* userenquiry_system 系统管理-用户查询 */ .mainright{ margin-left:207px; background-color:#ededed;} .mainright .content{ color:#666; padding:15px;} .mainright .title{ line-height:40px; background:url(../img/logomini.png) no-repeat left; padding-left:25px;} .mainright .title a{ color:#666;} .mainright .title span{ color:#c66653;} .mainright .content .line{ background:url(../img/navbj.png) 0 -2px repeat-x; display:block; height:2px;} .mainright .content .mainform{ margin:15px 0; line-height:23px;} .mainright .content .mainform span,.mainright .content .mainform select,.mainright .content .mainform input{ float:left;} .mainright .content .mainform .text{ border:1px solid #CCC; margin:0 15px 0 5px; padding:5px; width:160px;} .mainright .content .mainform .text1{ width:80px;} .mainright .content .mainform .datetext{ border:1px solid #CCC; margin:0 5px 0 5px; padding:5px; width:80px; float:left;} .mainright .content .mainform .number{ border:1px solid #CCC; margin:0 15px 0 5px; padding:5px; width:100px;} .mainright .content .mainform .date{ background:url(../img/date.jpg) no-repeat; width:15px; height:23px; display:block; float:left; margin-right:10px;} .mainright .content .mainform .button{ background:url(../img/querybj.png) no-repeat; width:58px; height:23px;} .mainright .content .mainform select{ border:1px solid #CCC; width:120px; height:25px; margin:0 10px 0 0;} .mainright .content table{ width:100%; border:1px solid #dddddd; line-height:27px; border-radius: 10px; background-color:#fff; margin-top:15px;} .mainright .content table th,.mainright .content table td{ border-bottom:1px solid #ddd;} .mainright .content table th{ text-align:center; color:#53a4c6;} .mainright .content table td{ text-align:center;} .datalist tr.altrow{background-color:#f6f6f6; }/*隔行变色*/ .mainright .content table tfoot{ line-height:40px;} .mainright .content table .on{ background-color:#e5f4ff; cursor: pointer;} .page{ margin-right:30px;} .page a{ display:block; float:left; width:20px;} .page a.onpage{ font-weight:bold; color:#ff6900;} .page .first,.page .last,.page .lastpage,.page .nextpage{ margin:12px 6px 0 6px; height:19px;} .page .first{ background:url(../img/pageinco.png) 0 0 no-repeat;} .page .last{ background:url(../img/pageinco.png) -60px 0 no-repeat;} .page .lastpage{ background:url(../img/pageinco.png) -20px 0 no-repeat; margin-right:10px;} .page .nextpage{ background:url(../img/pageinco.png) -40px 0 no-repeat;} /* role_system 系统管理-角色管理 */ .role-nav a{ margin:15px 15px 0px 0; width:82px; height:22px; display:block; float:left;} .role-nav .xinjian-role{ background:url(../img/rolebuttonbj.png) 0 0 no-repeat;} .role-nav .shouquan-role{ background:url(../img/rolebuttonbj.png) 0 -22px no-repeat;} .role-nav .bianji-role,.role-nav .bianji-user,.role-nav .luru_directory,.role-nav .daoru_directory{ background:url(../img/rolebuttonbj.png) 0 -44px no-repeat; width:64px;} .role-nav .xinjian-module{ background:url(../img/rolebuttonbj.png) 0 -66px no-repeat;} .role-nav .bianji-module{ background:url(../img/rolebuttonbj.png) 0 -88px no-repeat;} .role-nav .dingyi-module{ background:url(../img/rolebuttonbj.png) 0 -198px no-repeat;} .role-nav .chuangjian-user{background:url(../img/rolebuttonbj.png) 0 -110px no-repeat;} .role-nav .chuangjian-subsystem{background:url(../img/rolebuttonbj.png) 0 -132px no-repeat; width:100px;} .role-nav .bianji-subsystem{background:url(../img/rolebuttonbj.png) 0 -154px no-repeat; width:100px;} .role-nav .zhiding-subsystem{background:url(../img/rolebuttonbj.png) 0 -176px no-repeat; width:132px;} /* 弹出框 */ .box-xinjian,.box-shouquan,.box-bianji,.mobox-xinjian,.mobox-bianji,.box-zhiding,.mobox-dingyi{ border:3px solid #CCC; border-radius: 10px; color:#666; background-color:#f7f7f7; position:absolute; z-index: 10; top:200px; margin:0 auto; margin-left:40%; } .box-xinjian,.box-bianji,.mobox-xinjian,.mobox-bianji{ width:400px; padding:5px;} .box-shouquan,.box-zhiding{ width:700px; padding:5px 10px;} .mobox-dingyi{ width:550px; padding:5px 10px;} .pupbox-close{ background: url(../img/boxinco.png) 0 -32px; width:19px; height:19px; display:block; float:right;} .pupbox-title{ font-size:14px; font-weight:bold; background:url(../img/boxinco.png) no-repeat 0 0; height:18px; line-height:18px; padding-left:25px; margin-left:43%;} .pupbox-subtitle{ background:url(../img/boxinco.png) no-repeat 0 -51px; margin-left:40%;} .pupbox-motitle{ background:url(../img/boxinco.png) no-repeat 0 -69px; margin-left:43%;} .pupbox-form{ line-height:35px; margin:15px auto 0 auto;} .pupbox-form input{ border:1px solid #c4c4c4; box-shadow:0px 1px 1px 0px #dad9d9 inset; padding:5px; width:250px; color:#666;} .pupbox-form select{ width:262px; height:28px; margin-top:5px;} .pupbox-form .pinvocation{ width:30px;} .pupbox-form p span{ width:90px; text-align:right; margin-right:10px; display:inline-block;} .pupbox-form .belong{ padding-left:100px;} /* 按纽 */ .popboxyes,.popboxsave,.popboxcancel,.checkyes,.checkyes1{ width:60px; line-height:26px; text-align:center; margin:15px 0 15px 0; color:#fff; height:26px;} .popboxyes{ background:url(../img/boxbut.png);} .popboxcancel{ background:url(../img/boxbut.png) -60px 0;} .checkyes{ background:url(../img/boxbut.png) 0 -55px; width:80px;} .checkyes1{ background:url(../img/boxbut.png) 0 -83px; width:150px;} .box-xinjian .popboxyes,.box-bianji .popboxyes,.mobox-xinjian .popboxyes,.mobox-bianji .popboxyes{ margin:0 40px 0 125px;} .box-shouquan .popboxyes{ margin:0 40px 0 190px;} .popboxsave{ background:url(../img/boxbut.png) 0 -28px; width:120px; margin:0 40px 0 0;} .powermain .but .popboxcancel{ margin-left:40px;} /* 按纽 end */ .box-shouquan .thead{ height:35px; line-height:35px; background-color:#2576b3; color:#FFF; border-top-left-radius:5px; border-top-right-radius:5px; margin:15px 0 0 0;} .box-shouquan .thead .left{ margin-left:60px;} .box-shouquan .thead .right{ margin-left:300px;} .box-shouquan .table,.box-zhiding .table{ background-color: #dedede; height:350px; line-height:27px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;} .box-shouquan .squl1{ width:180px; padding:1px; border-right:1px solid #f4f4f4; } .box-shouquan ul li{ border-bottom:1px solid #CCC;} .box-shouquan ul li a{ background:url(../img/boxinco.png) 0 -18px no-repeat; padding-left:25px; margin-left:15px;} .box-shouquan ul li ul li{} .box-shouquan ul li ul li a{ background-color:#e8e8e8; background-image:none; display:block; padding-left:50px; margin:0; color:#666} .box-shouquan ul li ul li a:hover,.box-shouquan ul li ul li .on{ color:#2576b3; background-color:#ddf1ff; } .box-shouquan ul li ul li ul li a{ background-color:#e8e8e8; background-image:none; display:block; padding-left:70px; margin:0; color:#666} .box-shouquan .choose{ margin-left:184px; padding:1px;} .box-shouquan .choose p{ padding-left:20px; border-bottom:1px solid #CCC;} .box-shouquan .choose .check{ background-color:#f0f0f0; color:#2576b3;} .box-shouquan .choose .check input{ margin:0 5px 0 20px;} /* 弹出框 end */ /* 权限管理系统 */ .powermain{ text-align:center; margin:10px auto; width:660px;} .powermain .left .uu,.powermain .right .uu{ text-align:left; line-height:27px; background-color:#f6f6f6; height:400px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border:1px solid #CCC;} .powermain p{ height:35px; line-height:35px; background-color:#2576b3; color:#FFF; border-top-left-radius:5px; border-top-right-radius:5px; margin:15px 0 0 0;} .powermain p select{ margin:0 0 0 10px;} .powermain .left,.powermain .right{ width:235px;} .powermain .center{ width:90px; margin:150px 50px 0 50px;} .powermain .subcenter{ width:99px; margin:150px 45px 0 45px;} .powermain .left ul li a{ padding-left:40px; background-color:#e2e2e2; display:block;} .powermain .left ul li ul li,.powermain .right ul li{ border-bottom:1px solid #CCC; padding-left:60px;} .powermain .center button{ width:90px; height:26px;} .powermain .center .add{ background:url(../img/powerbutton.jpg) 0 0; margin-bottom:20px;} .powermain .center .delete{ background:url(../img/powerbutton.jpg) 0 -26px;} .powermain .subcenter button{ width:99px; height:26px;} .powermain .subcenter .add{ background:url(../img/powerbutton.jpg) 0 -52px; margin-bottom:20px;} .powermain .subcenter .delete{ background:url(../img/powerbutton.jpg) 0 -78px;} /* 权限管理系统 end */ /* 设置 */ .setupform{ margin:10px 0;} .setupform span{ line-height:35px;} .setupform a{ color:#2576b3; text-decoration:underline; cursor:pointer;} .setupform .left{ width:80px; text-align:right; margin-right:10px; display:inline-block;} .setupform input{ border:1px solid #CCC; padding:5px; width:200px;} /* 设置 end */ /* 登录 */ .loginbj{ background:url(../img/loginbj.gif) repeat; width:100%; height:100%; text-align:center; padding:200px 0 0 0;} .loginmain{ background:#eaeaea url(../img/loginbj2.gif) repeat-x; width:480px; border-radius: 10px; margin:0 auto; padding:10px;} .loginmain .title{ margin:25px 0; font-size:16px; font-family:"微软雅黑"; line-height:18px;} .loginmain .title span{ background:url(../img/boxinco.png) 0 0 no-repeat; display:inline-block; width:14px; height:18px; margin:0 10px 0 0;} .loginmain form{ text-align:left;} .loginmain form span{ display:inline-block; width:120px; text-align:right; margin-right:10px; font:14px/45px Verdana; color:#333;} .loginmain form input{ border:1px solid #c7c7c7; padding:8px; width:260px; border-radius: 5px;} .loginmain form .code{ width:120px; } .loginmain form a{ color:#2576b3; text-decoration:underline;} .loginmain form img{ margin:0 5px 0 10px;} .loginmain form button{ background:url(../img/login.jpg) no-repeat; width:165px; height:36px; margin:30px 160px;} .logintfoot:link{ color:#d6eeff; line-height:30px;} .logintfoot:hover{ color:#FFF; text-decoration:none;} /* 登录 end */ /* 模块管理定义模块 */ .mobjmain{ margin:10px;} .mochoose p{ line-height:32px;} .mochoose select{ width:160px; margin-left:10px; height:26px; } .mobjmain table{ border-collapse:collapse; width:100%; text-align:center; border-radius: 10px; margin:10px 0;} .mobjmain table td,.mobjmain table th{ border:1px solid #CCC; line-height:25px; height:25px;} .mobjmain table th{ color:#53A4C6; background-color:#ededed;} .mobjmain form input{ border:1px solid #CCC; padding:4px; color:#999; margin-right:8px;} .mobjmain form button{ background:url(../img/querybj.png) no-repeat; width:58px; height:23px;} /* 网站管理子系统 130413 */ .marginlr10{ margin:0 10px;} .marginr10{ margin-right:10px;} .marginl10{ margin-left:10px;} .margint10{ margin-top:10px;} .role-nav .chuangjian_article{background:url(../img/rolebuttonbj.png) 0 -220px no-repeat;} .role-nav .fenlei_article{background:url(../img/rolebuttonbj.png) 0 -242px no-repeat;} .role-nav .xzfl-article{background:url(../img/rolebuttonbj.png) 0 -264px no-repeat;} .role-nav .bjfl-article{background:url(../img/rolebuttonbj.png) 0 -286px no-repeat;} .role-nav .luru_directory{background:url(../img/rolebuttonbj.png) 0 -308px no-repeat;} .role-nav .daoru_directory{background:url(../img/rolebuttonbj.png) 0 -330px no-repeat;} .role-nav .swtj_directory{background:url(../img/rolebuttonbj.png) 0 -352px no-repeat;} .role-nav .tjqygl_directory{background:url(../img/rolebuttonbj.png) 0 -374px no-repeat; width:105px;} .role-nav .sc_directory{background:url(../img/rolebuttonbj.png) 0 -396px no-repeat; width:63px;} .role-nav .bcpx_directory{background:url(../img/rolebuttonbj.png) 0 -418px no-repeat;} .datalist { padding:0 20px;} .articletitle{ width:400px; padding:0 20px;} .companyname { width:280px; padding:0 20px;} .articleform{ line-height:32px; margin:10px;} .articleform .left{ display:inline-block; width:70px;} .articleform b{ color:#F00;} .articleform .input{ border:1px solid #CCC; padding:3px; width:240px; margin:0 10px; color:#666;} .articleform .input1{ width:360px;} .articleform .input2{ width:120px;} .articleform .date{ background:url(../img/date.jpg) no-repeat; width:15px; height:23px; display:block; float:left; margin:8px 0 0 0;} .articleform .warn{ color:#53a4c6} .articleform .choose{ margin:0 20px 0 5px;} .directoryform{ line-height:32px; margin:15px;} .directoryform select,.directoryform .input{ margin:0 10px 0 0; border:1px solid #CCC; padding:3px; color:#666;} .directoryform .input{ width:180px;} .directoryform .button{ background:url(../img/querybj.png) no-repeat; width:58px; height:23px;} .pupbox-success{ font-size:14px; font-weight:bold; font-family:"微软雅黑"; color:#2576b3; background: url(../img/success.jpg) no-repeat 0 0; height:32px; line-height:32px; padding-left:45px; margin-left:38%;} .but_tjsh{ background:url(../img/boxbut.png); width:60px; line-height:26px; text-align:center; margin:15px 0 0 0; color:#fff; height:26px;} .membershipdetails{ line-height:32px;} .membershipdetails .title{ font:20px/32px Verdana, "微软雅黑"; margin-top:10px; color:#53a4c6} .membershipdetails .title a{ float:right; font:12px/32px Verdana, "宋体"; color:#c66653;} .membershipdetails p span{ display:inline-block; width:80px;} .checkbut span{ float:right;} .checkbut span a{display:block; float:left; margin:20px 10px 0 10px; background-color:#999; border:1px solid #838383; padding:1px 12px; color:#FFF;} .checkbut span a:hover{ color:#ffd800; text-decoration:none} .checkcontent{ line-height:32px;} .checkcontent p span{ display:inline-block; width:80px; font-weight:bold;} .checkcontent .title{ background-color:#e0e0e0; font:18px/32px Verdana, "微软雅黑"; margin:10px 0; padding:3px 10px;} .checkcontent .companylogo{ float:left; border:1px solid #c2c2c2; padding:5px; margin:50px 30px;} .checkmain{ line-height:24px;} .checkmain .name{ font:18px/32px Verdana, "微软雅黑"; color:#53a4c6; font-weight:bold;} .checkmain p{ margin-top:10px;} .companyimg{ border:1px solid #c2c2c2; margin:10px 0;}