现在的位置: 首页 > 综合 > 正文

好看的表單樣式

2012年08月15日 ⁄ 综合 ⁄ 共 8135字 ⁄ 字号 评论关闭

*{
 scrollbar-face-color:#E6F2FD;
 scrollbar-highlight-color:#ffffff;
 scrollbar-shadow-color:#D6E4EF;
 scrollbar-3dlight-color:#F1F9FF;
 scrollbar-arrow-color:#006699;
 scrollbar-track-color:#F1F9FF;
 scrollbar-darkshadow-color:#F1F9FF;
}
body{
 margin:0px;
 color:#666;
 background-color:#FFF;
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;
}
form,ul,li{
 margin:0px;
 list-style-type:none;
 padding:0px;
}
table { empty-cells: show; border-collapse: collapse; }
a{
 color:#005eac;
 text-decoration:none;
}
a:visited,a:active{ color:#005eac; }
a:hover{ color:#ff5500; }
img{ border:0px; vertical-align:middle; }

h1{ font-size:14px; }
.w250{width:250px;}
.w380{width:380px;}
.wh380{width:380px; height:50px;}
.submit{
 background:url(button_submit.gif) repeat-x #e3f1fa;
 border:1px solid #aed0ea;
 padding:0px 10px;
 height:24px;
 line-height:24px;
 color:#3d80b3;
 cursor:pointer;
}
.input{
 padding:0px 3px;
 border:1px solid #d1d1d1;
 background:url(input_bg.jpg) repeat-x;
 height:18px;
 line-height:18px;
 font-size:12px;
 color:#999;
}
.textarea{
 padding:3px;
 border:1px solid #d1d1d1;
 background:url(input_bg.jpg) repeat-x;
 font-size:12px;
 color:#999;
}
.focus{
 border:1px solid #FC0 !important;
 background:url(focus_bg.jpg) repeat-x !important;
 color:#00F !important;
}
.select{
 padding:1px;
 border: 1px solid #CDCDCD;
 background:#FDFEEF;
}
.keyword{
 border: 1px solid #CDCDCD;
 background:#FDFEEF;
 height:20px;
 line-height:20px;
 overflow:hidden;
}
.login_input{
 padding:2px 2px 2px 5px;
 color:#999;
 font-size:12px;
 width:150px;
 height:1.5em;
 line-height:1.5em;
 border:1px solid #d1d1d1;
 background:url(input_bg.jpg) repeat-x;
}
#login_body{
 position:absolute;
 margin-top:-140px;
 width:727px;
 height:230px;
 margin-left:-350px;
 top:50%;
 left:50%;
}
#login_div{
 background:url(login_bg.jpg);
 width:727px;
 height:200px;
}
.login_btn{
 width:82px;
 height:81px;
 margin:25px 0 0 20px;
 _margin-left:0px;
}
#login_form_div {
 margin-left:400px;
 line-height:26px;
 padding-top:30px;
}
#login_form_div table{
 padding:20px;
 font-size:14px;
 line-height:26px;
}
.tipbox{
 font-size:12px;
 color:#F00;
 line-height:26px;
}

.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; }
.spClear{ clear:both;height:10px; }
.mouse{ cursor:pointer; }
#login_footer { text-align:center; color:#999999; }
 
/* 顶部菜单 */
#tabs{
 float:right;
 margin-bottom:2px;
 font-family:"微软雅黑";
 font-size:14px;
 width:auto;
 line-height:normal;
}
#tabs ul{
 margin:0;
 padding:26px 10px 0 0px !important;
 *padding:27px 10px 0 0px !important;
 padding:27px 10px 0 0px;
 list-style:none;
}
#tabs ul li{
 display:inline;
 margin:0;
 padding:0;
}
#tabs ul li a{
 float:left;
 margin:0;
 padding:0 0 0 4px;
 background:url("tabsleft.gif") no-repeat left top;
 text-decoration:none;
}
#tabs ul li a span{
 float:left;
 display:block;
 color:#039;
 background:url("tabsright.gif") no-repeat right top;
 padding:6px 8px 6px 6px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs ul li a span{ float:none; }
/* End IE5-Mac hack */
#tabs ul li a:hover{ background-position:0% -42px; }
#tabs ul li a:hover span{
 color:#5A6AB1;
 background-position:100% -42px;
 color:#F5F5F5;
}
#tabs .hover a{
 background:url("tabsleft.gif") no-repeat;
 background-position:0% -42px;
}
#tabs .hover a span{
 background:url("tabsright.gif") no-repeat;
 background-position:100% -42px;
 color:#F5F5F5;
}

/* 左边导航菜单 */
.left_menu{ text-align:left; font-family:"微软雅黑"; }
.left_menu ul{ margin-top:10px;padding-left:10px;}
.left_menu ul li{padding-left:15px;background:url(left_menu_bg.gif) no-repeat;}
.left_menu ul li a{padding-left:10px;line-height:25px;background:url(ico_01.gif) 0px center no-repeat;}
/* 当前位置 */
.navigation{
 padding:6px 10px 6px 5px;
 color:#2F7EAE;
 border:1px solid #E4E1FF;
 background:url(nav_bg.gif) repeat-x;
}
.navigation b{
 padding-left:25px;
 font-weight:normal;
 background:url(home.gif) 5px center no-repeat #F8F7FF;
}
.navigation .add{
 float:right;
 padding-left:15px;
 background:url(add.gif) no-repeat 0 0;
}
.navigation .back{
 float:right;
 padding-left:15px;
 background:url(back.gif) no-repeat 0 0;
}
.warning{
 padding:8px 10px 8px 30px;
 border:1px solid #FAF4B8;
 color:#C52716;
 background:url(warning.gif) 8px center no-repeat #FEFDE9;
}
.correct{
 padding:8px 10px 8px 30px;
 border:1px solid #CCF9C1;
 color:#090;
 background:url(correct.gif) 8px center no-repeat #F1FEF2;
}
.disable{
 padding:8px 10px 8px 30px;
 border:1px solid #F9F2B7;
 color:#F00;
 background:url(disable.gif) 8px center no-repeat #FDF8E8;
}
.btn_bg a{
 padding:1px 8px;
 color:#000;
 border:1px solid #70b1cf;
 background:url(btn_bg.gif) repeat-x;
}
.btn_all{
 padding:1px 8px;
 color:#000;
 border:1px solid #70b1cf;
 background:url(btn_bg.gif) repeat-x;
 cursor:pointer;
}
.msgtable{
 border:1px solid #EDECFF;
}
.msgtable th{
 padding:0.5em;
 font-weight:700;
 /*border:1px solid #EDECFF;*/
}
.msgtable td{
 padding:0.4em;
 border-bottom:1px solid #F3F3F3;
}
.msgtable th{
 /*background:#F8F7FF;*/
 background:url(table_th_bg.gif) repeat-x bottom;
}
.tr_bg{background:#F9F9F9;}
.tr_hover_col{background:#EAEAEA;}
.navtable{padding:0.6em;border:1px solid #EDECFF;}
.navtable td{width:80px;}
.title5
{
    background: url("titlebg2.gif");
    width: 80px;
    cursor: hand;
    line-height: 120%;
    padding-top: 2px;
    text-align: center;
    height: 20px;
}
.title6
{
    font-weight: normal;
    background: url("titlebg1.gif");
    width: 80px;
    cursor: hand;
    color: #ffffff;
    padding-top: 2px;
    text-align: center;
    height: 20px;
}
/*提示文字样式*/
#HintMsg{
 width:271px;
 position:absolute;
 display:none;
}
#HintMsg .HintTop{
 height:9px;
 background:url(hintbg1.gif) no-repeat;
 overflow:hidden;
}
#HintMsg .HintInfo{
 padding:0 5px;
 border-left:1px solid #000;
 border-right:1px solid #000;
 background:#FFFFE1;
 line-height:1.5em;
}
#HintMsg .HintInfo b{
 display:block;
 margin-bottom:6px;
 padding-left:15px;
 background:url(hint.gif) left center no-repeat;
 height:13px;
 line-height:16px;
}
#HintMsg .HintInfo b span{
 display:block;
 float:right;
 text-indent:-9999px;
 background:url(close.gif) no-repeat;
 width:12px;
 height:12px;
 cursor:pointer;
}
#HintMsg .HintFooter{
 height:22px;
 background:url(hintbg2.gif) no-repeat;
}
/*设置提示样式*/

.icon-01{
 margin:0;
 padding:10px 0 0 80px;
 color:#4D4D4D;
 font-family:"微软雅黑";
 line-height:1.8em;
 min-height:60px;
 background:url(icon-01.gif) no-repeat 10px 10px;
}
.icon-02{
 margin:0;
 padding:10px 0 0 80px;
 color:#4D4D4D;
 font-family:"微软雅黑";
 line-height:1.8em;
 min-height:60px;
 background:url(icon-02.gif) no-repeat 10px 10px;
}
.icon-03{
 margin:0;
 padding:10px 0 0 80px;
 color:#4D4D4D;
 font-family:"微软雅黑";
 line-height:1.8em;
 min-height:60px;
 background:url(icon-03.gif) no-repeat 10px 10px;
}
.icon-01 b{
 display:block;
 color:#090;
 font-size:14px;
 line-height:2.0em;
}
.icon-02 b{
 display:block;
 color:#F00;
 font-size:14px;
 line-height:2.0em;
}
.icon-03 b{
 display:block;
 color:#FC0;
 font-size:14px;
 line-height:2.0em;
}

/*页面居中显示*/
.pcent{
 top:35%;
 right:35%;
 position:absolute;
 display:none;
}

/*验证表单样式*/
span.error{
 margin-left:5px;
 padding-left:25px;
 color:#F00;
 background:url(error.gif) left center no-repeat;
}
span.success{
 margin-left:5px;
 padding-left:25px;
 color:#999;
 background:url(success.gif) left center no-repeat;
}
/*其它样式*/
.hide{display:none;}
.up-01,.up-02{
 display:block;
 float:right;
 padding-left:20px;
 cursor:pointer;
 line-height:17px;
}
.up-01{
 background:url(top_ico1.gif) no-repeat 0 center;
}
.up-02{
 background:url(top_ico2.gif) no-repeat 0 center;
}
/*大图预览提示*/
#imgtip{
 position:absolute;
 border:1px solid #ccc;
 background:#fff;
 padding:2px;
 display:none;
}
.comment{
 color:#06F;
 line-height:1.0em;
}
/*产品列表显示样式*/
.pro_img_list{margin:0;padding:0;min-width:800px;position:relative;}
.pro_img_list ul{margin:0 0 0 -20px;}
.pro_img_list ul li{float:left;margin:0 0 10px 20px;padding:5px 10px;width:120px;height:168px;border:1px solid #bce5f8;background:url(pro_bg.gif) repeat-x;overflow:hidden;}
.pro_img_list ul li .nTitle{padding-bottom:5px;line-height:20px;height:20px;color:#005eac;}
.pro_img_list ul li .nImg img{width:120px;height:120px;}
.pro_img_list ul li .nBtm{padding-top:5px;height:16px;}
.pro_img_list ul li .nBtm img{vertical-align:middle;}
/*file容器样式*/
a.files {margin:0 auto;float:left; width:64px;height:18px;overflow:hidden;display:block;border:1px solid #70b1cf;background:url(upfilebg.gif) left top no-repeat;text-decoration:none;}
/*file设为透明,并覆盖整个触发面*/
a.files input {margin-left:-240px;font-size:20px;cursor:pointer;filter:alpha(opacity=0);opacity:0;}
/*取消点击时的虚线框*/
a.files, a.files input{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}
.uploading{float:left;background:url(loading.gif) no-repeat left center;padding-left:18px;display:none;line-height:20px;height:20px;}

抱歉!评论已关闭.