前段时间因为项目组做DEMO的人手不够，所以调了我们几个做WEB层的去学习并参与做项目按前期的DEMO
学了一个星期就开始干活了，至于CSS的学习资料在网上的资源还是很丰富的，个人认为不用去买书什么的
多多练习多看些案例和开发库就好！~下面是我个人提供的CSS项目通用开发库
(提示：有留言说没有相应的Html页面，下面代码适合在项目开发中参考使用，不适合初学者去学，想实现的话可以自己去写页面并调用样式表，有时间会整理出相应的页面)
CSS通用开发库:下载
/*-------------------------------------------------重置reset-------------------------------------------------------*/
a:link,a:visited,a:active
{
color:#0062e0;
text-decoration:none;
}
a:hover
{
color:#e8aa11;
text-decoration:underline;
}
body
{
font-size:12px;
font-family:Arial, Helvetica, sans-serif,宋体;
background:#fff;
height:100%;
}
*
{
margin:0;
padding:0;
}
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 12px;
line-height: 24px;
font-weight: normal;
padding:0 0 0 28px;
}
h6 {
font-size: 10px;
line-height: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
img
{
border:0;
}
ul
{
list-style:none;
}
textarea
{
font-size:12px;
}
/*----------------------------------------------零件Widgets--------------------------*/
/*------------通用样式tyle------------------*/
/*==================form表单style=========================*/
.formStyle
{
}
.formStyle input
{
width:150px;
float:left;
}
.formStyle select
{
width:154px;
float:left;
}
.formStyle textarea
{
float:left;
width:300px;
height:100px;
}
.formStyle .checkbox
{
width:20px;
}
.formStyle .checkbox input
{
width:15px;
}
.formStyle span
{
height:22px;
line-height:22px;
float:left;
margin:0;
padding:0;
}
.formStyle .file
{
width:250px;
}
.formStyle .shortList
{
width:50px;
}
* html .formStyle .file
{
width:226px;
}
.formStyle li
{
clear:both;
width:520px;
height:24px;
margin:0 15px 2px 0;
}
* html .formStyle li
{
height:0;
}
*+html .formStyle li
{
height:auto;
}
.formStyle li label
{
height:24px;
line-height:24px;
float:left;
width:50px;
text-align:left;
margin-right:10px;
}
.loginButton
{
float:left;
margin:2px 8px 0 0;
}
/*横向排列style*/
.across
{
width:600px;
}
.across li
{
clear:none;
float:left;
width:230px;
}
* html .across li
{
margin-right:6px;
}
/*ul布局的各种样式*/
ul.EntityQuery
{
width:660px;
}
ul.EntityQuery li
{
width:150px;
margin-right:0px;
}
ul.EntityQuery li label
{
width:75px;
margin-right:0;
text-align:right;
}
ul.EntityQuery li ul
{
display:inline;
width:300px;
float:left;
margin-top:3px;
}
ul.EntityQuery li ul li
{
width:auto;
float:left;
margin-right:15px;
}
ul.liWidth li
{
width:300px;
}
ul.labelWidth li label
{
width:70px;
}
ul.labelWidth .loginButton
{
float:left;
margin:-1px 0 0 0;
}
ul.labelWidth
{
width:660px;
}
ul.labelWidth li
{
clear:none;
float:left;
width:300px;
}
ul.labelWidth li label
{
width:75px;
}
ul.ulMargin
{
margin:5px 0 5px 0;
}
ul.popList li
{
width:300px;
}
ul.popList li label
{
width:100px;
}
ul.shortLi li
{
width:250px;
}
ul.ulWidth
{
width:600px;
}
ul.ulWidth input
{
width:100px;
}
ul.ulWidth select
{
width:105px;
}
ul.ulWidth li
{
width:auto;
}
ul.ulWidth li label
{
text-align:right;
}
ul.otherPages li
{
float:left;
margin-left:15px;
}
ul.otherPages li a,ul.otherPages li a:visited
{
text-decoration:underline;
color:blue;
}
/*--========================--*/
.formBg
{
background:#bdd3e9;
border-top:1px solid #5b7e91;
}
.formBg01
{
background:#d7e9ff;
border-top:1px solid #5b7e91;
}
.testSearchList
{
width:600px;
}
.testSearchList li
{
width:280px;
}
.testSearchList li label
{
width:100px;
}
/*======整体居中center========*/
.centerPosition
{
width:1000px;
margin-left:auto;
margin-right:auto;
}
/*====隐藏DIV====*/
.hidden
{
display:none;
}
/*===浮动float==*/
.floatLeft
{
float:left;
}
.floatRight
{
float:right;
}
/*====清除浮动clear====*/
.clearFloat
{
clear:both;
}
.clear_margin_right
{
margin-right:0;
}
.clear_margin_left
{
margin-left:0;
}
/*====Margin====*/
.marginRight
{
margin-right:5px;
}
* html .marginLeft70
{
margin-left:73px;
}
.marginLeft
{
margin-left:70px;
}
/*--===================清楚边边框=====================---*/
.lastBorder
{
border:none;
}
.leftBorderRemove
{
border-left-style:none;
}
.rightBorderRemove
{
border-right-style:none;
}
.topBorderRemove
{
border-top-style:none;
}
.bottomBorderRemove
{
border-bottom-style:none;
}
/*=====Width and Height=====*/
.label_width70
{
width:70px;
}
/*============TREE===============*/
ul.tree
{
margin-top:15px;
list-style:none;
line-height:17px;
}
ul.tree a.ex
{
display:block;
float:left;
background:url(../images/+.gif) 5px 4px no-repeat;
width:17px;
height:17px;
cursor:pointer;
}
ul.tree a.sh
{
display:block;
float:left;
background:url(../images/_.gif) 5px 4px no-repeat;
width:17px;
height:17px;
cursor:pointer;
}
ul.tree li
{
padding-left:40px;
line-height:17px;
background:url(../images/T.gif) 8px 0px no-repeat;
}
ul.tree li.last
{
background:url(../images/L.gif) 8px 3px no-repeat;
}
/*====弹出DIV1====*/
.pop_div
{
display:none;
position:absolute;
top:80px;
left:60px;
z-index:1000;
width:900px;
}
.pop_div .pop_body
{
z-index:1000;
padding:5px;
background:#f5f6e8;
border:1px solid #a2a9bc;
border-top:0;
}
.pop_div .search_ul
{
background:#fff;
border:1px solid #a2a9bc;
height:130px;
line-height:50px;
padding-left:20px;
}
.pop_div .search_ul ul li
{
float:left;
margin-right:20px;
}
* .pop_div .search_ul ul li label
{
float:left;
}
* .pop_div .search_ul ul li select,* .pop_div .search_ul ul li input
{
margin-top:12px;
}
.pop_div .button,.pop_div .buttonSuccess,.pop_div .buttonFailure
{
background:#ececec;
text-align:center;
height:30px;
padding:10px 0 0 350px;
}
/*====弹出DIV2====*/
.pop_div_2
{
display:none;
width:600px;
position:absolute;
top:130px;
left:90px;
z-index:1000;
border:1px solid #5b719e;
}
.pop_div_2 .pop_body
{
z-index:1000;
padding:5px;
background:#f5f6e8;
border:1px solid #a2a9bc;
border-top:0;
text-align:center;
}
.pop_div_2 .pop_body .pop_content
{
border:1px solid #a2a9bc;
background:#fff;
}
.pop_div_2 .search_ul,.pop_div .search_ul
{
background:#fff;
padding:1px 0 20px 0px;
text-align:left;
}
.pop_div_2 .search_ul ul li,.pop_div .search_ul ul li
{
float:left;
margin-top:6px;
margin-right:20px;
}
.pop_div_2 .search_ul ul li .checkbox
{
width:15px;
}
.pop_div_2 .search_ul ul li .checkbox input
{
width:15px;
}
.pop_div_2 .search_ul ul li.fullWidth
{
width:500px;
}
.pop_div_2 .search_ul ul li.fullWidth div
{
float:left;
margin:11px 18px 0 18px;
}
.pop_div_2 .search_ul ul li.fullWidth div a
{
margin-bottom:8px;
}
.pop_div_2 .search_ul ul li.fullWidth label
{
float:left;
}
.pop_div_2 .search_ul ul li.fullWidth select
{
float:left;
width:144px;
}
.pop_div_2 .search_ul ul li label,.pop_div .search_ul ul li label,#gather_table .search_ul li label
{
margin-right:10px;
text-align:right;
width:80px;
display:block;
float:left;
line-height:20px;
}
.pop_div_2 .search_ul ul li input,.pop_div .search_ul ul li input,#gather_table .search_ul li input
{
width:140px;
}
.pop_div_2 .search_ul ul li select,.pop_div .search_ul ul li select,,#gather_table .search_ul li select
{
width:144px;
}
.pop_div_2 .search_ul ul li.date input
{
width:122px;
}
.pop_div_2 .search_ul ul li.date img
{
width:16px;
height:16px;
border:0;
}
.pop_div_2 .button,.pop_div_2 .buttonSuccess,.pop_div_2 .buttonFailure
{
background:#ececec;
height:30px;
padding:10px 0 0 0;
}
.pop_div_2 .button_content
{
margin:0 auto;
width:158px;
height:21px;
}
/*======POP Buttons======*/
.pop_div_2 .buttonSuccess
{
background-color:Green;
}
.pop_div_2 .buttonFailure
{
background-color:Red;
}
/*====标题样式form_title====*/
.form_title
{
position:relative;
background:url(../images/bar.gif) repeat-x;
height:21px;
line-height:21px;
padding-left:15px;
border:1px solid #a2a9bc;
text-align:left;
}
.form_title01
{
color:#ccc;
position:relative;
background:url(../images/form_title_1.jpg) repeat-x;
height:23px;
line-height:23px;
padding-left:10px;
border-left:#6cc6ff solid 5px;
border-right:#6cc6ff solid 2px;
}
.form_title02
{
font-size:20px;
color:#c3def9;
position:relative;
background:#2c3940;
height:32px;
line-height:32px;
padding-left:10px;
font-family:榛戜綋;
}
.form_title03
{ position:relative;
height:20px;
line-height:20px;
background:#adbfc8;
border-top:1px solid #5b7e91;
color:#406478;
padding:0 50px 0 10px
}
.form_title04
{
position:relative;
height:20px;
line-height:20px;
background:#adbfc8;
border-bottom:1px solid #5b7e91;
color:#fff;
padding:0 50px 0 10px
}
.form_content
{
margin:0;
padding:10px;
border:1px solid #a2a9bc;
border-top:0;
border-bottom:0;
}
* html .form_content
{
height:0;
}
/*====警告框Warnning frame====*/
.warnning
{
background:#fff0c2 url(../images/!.gif) 2px 3px no-repeat;
border:solid 1px #b69204;
height:22px;
width:400px;
line-height:22px;
padding-left:20px;
}
/*============Buttons================*/
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:12px;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
/* STANDARD */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}
/*=============IDS Button==========*/
a.button_ids
{
display: block;
background: url(../images/buttons.jpg) no-repeat;
background-position: 0px -60px;
width: 75px;
height:20px;
line-height: 20px;
border: 0px;
text-align: center;
cursor:pointer;
color:#000;
}
a.button_ids:link,a.button_ids:visited
{
background-position: 0px -60px;
color:#000;
text-decoration:none;
}
a.button_ids:hover
{
background-position: 0px -0px;
text-decoration:none;
}
a.button_ids:active
{
background-position: 0px -20px;
}
a.button_ids:focus
{
background-position: 0px -80px;
}
a.linkbutton_w
{
display: block;
float:left;
margin-right:6px;
background: url(../images/linkbutton_w.jpg) no-repeat;
background-position: 0px -60px;
width: 147px;
height: 15px;
border: 0px;
text-decoration: none;
text-align: center;
padding-top: 5px;
color: black;
cursor: hand;
}
a.linkbutton_w:link
{
background-position: 0px -60px;
color:#000;
}
a.linkbutton_w:visited
{
background-position: 0px -60px;
color:#000;
}
a.linkbutton_w:hover
{
background-position: 0px 0px;
text-decoration:none;
color:#000;
}
a.linkbutton_w:active
{
background-position: 0px -20px;
}
/*====模态弹出窗口alpha====*/
#alphaWindow
{
display:none;
position:absolute;
top:0;
left:0;
min-width:1000px;
width:100%;
min-height:500px;
height:100%;
background-color: black;
-moz-opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
z-index: 999;
}
/*====妯℃嫙妯℃€佺獥鍙dd====*/
#addForm
{
position:absolute;
top:0;
width:500px;
height:350px;
margin:0px auto;
text-align:center;
}
/*====图标Icon====*/
.about_img a
{
background:url(../images/icon.gif) top no-repeat;
background-position:8px 0;
}
.about_img a:hover
{
background:url(../images/icon.gif) top no-repeat;
background-position:9px 1px;
}
.help_img a
{
background:url(../images/icon.gif) top no-repeat;
background-position:8px -19px;
}
.help_img a:hover
{
background:url(../images/icon.gif) top no-repeat;
background-position:9px -18px;
}
.logout_img a
{
background:url(../images/icon.gif) top no-repeat;
background-position:8px -35px;
}
.logout_img a:hover
{
background:url(../images/icon.gif) top no-repeat;
background-position:9px -34px;
}
.set_img a
{
background:url(../images/icon.gif) top no-repeat;
background-position:-2px -87px;
padding-left:16px;
margin-left:8px;
}
.set_img a:hover
{
background:url(../images/icon.gif) top no-repeat;
background-position:-1px -86px;
}
.help li a
{
width:50px;
height:16px;
display:block;
text-align:right;
}
/*导航菜单位置nav_menu*/
#nav_menu
{
width:100%;
clear:both;
position:absolute;
top:5px;
}
* html #nav_menu
{
top:3px;
}
/*========Tab Menu1 in System========*/
/*Menu level 1 style*/
ul#menu_level_0
{
display:block;
width:100%;
height:65px;
font-size:12px;
list-style:none;
}
ul#menu_level_0 li
{
float:left;
height:63px;
padding-bottom:0px;
border:0 solid #5685c3;
border-right:1px;
}
ul#menu_level_0 li#firstPage
{
margin-left:240px;
_margin-left:124px;
}
ul#menu_level_0 li.lastPage
{
border:0px;
}
ul#menu_level_0 li a
{
position:relative;
float:left;
display:block;
padding:0px 15px 4px 15px;
margin-right:1px;
height:63px;
color:#fff;
text-decoration:none;
cursor:default;
text-align:center;
}
ul#menu_level_0 li a:hover
{
background:url(../images/menuHover.jpg) top repeat-x;
}
ul#menu_level_0 li.menu_hover a
{
background:url(../images/menuHover.jpg) top repeat-x;
}
ul#menu_level_0 li a img
{
display:block;
}
/*Menu level 2 style*/
div#div_menu
{
position:relative;
height:22px;
background:#4e8dd0;
}
div#div_menu ul
{
position:absolute;
top:0;
list-style:none;
display:none;
height:22px;
line-height:22px;
}
div#div_menu ul li
{
display:block;
float:left;
margin:0;
padding:0px 2px 0px 3px;
background:url(../images/menu2_spliter.png) right center no-repeat;
}
div#div_menu ul li a
{
height:22px;
line-height:22px;
position:relative;
float:left;
color:#c5e0fb;
display:block;
margin-right:2px;
text-decoration:none;
margin-top:1px;
padding:0px 13px 0px 13px;
}
div#div_menu ul li.lastBorder
{
background:none;
}
div#div_menu ul li a:hover
{
color:#fff;
}
div#div_menu ul li a span
{
position:absolute;
top:0px;
left:0px;
width:4px;
height:23px;
}
div#div_menu ul li a:focus
{
color:#fff;
}
/*======================下拉三级菜单CSS===============*/
.menu {
font-family: verdana, sans-serif;
position:relative;
z-index:9999;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:139px;
height:3em;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#dfc184;
padding-left:10px;
line-height:3em;
}
* html .menu ul li a, .menu ul li a:visited {
width:149px;
w\idth:139px;
}
.menu ul li ul {
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
background:#bd8d5e;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:5px 10px;
width:129px
}
.menu ul li:hover ul li a.drop {
background:#c9c9a7 url(drop.png) bottom right no-repeat;
}
.menu ul li:hover ul li a:hover {
background:#c9c9a7;
color:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:150px;
top:0;
width:150px;
}
.menu ul li:hover ul li:hover ul.left {
left:-150px;
}
/*============表格style============*/
.result
{
padding:1px;
}
*html .result
{
padding-left:0px;
}
.result .table
{
border:none;
}
.result .table tr th
{
background:#daf2ff;
}
.table
{
width:100%;
border-collapse:collapse;
border-left:#9dc0d3 solid 1px;
border-top:#9dc0d3 solid 1px;
}
.table .th_width
{
width:250px;
}
.table tr th
{
height:21px;
line-height:21px;
background:#f7f8f9;
text-align:left;
padding:0 5px 0 10px;
color:#284a82;
border-right:#bee1f4 solid 1px;
border-bottom:#bee1f4 solid 1px;
}
.table tr td
{
height:18px;
line-height:18px;
background:#f4fbff;
text-align:left;
padding:0 5px 0 10px;
border-right:#bee1f4 solid 1px;
border-bottom:#bee1f4 solid 1px;
}
.tableTwo
{
width:100%;
margin-top:1px;
margin-left:-10px;
margin-right:-25px;
}
.tableTwo tr th
{
height:21px;
line-height:21px;
background:#f7f8f9;
text-align:left;
padding:0 5px 0 10px;
color:#284a82;
border-right:#bee1f4 solid 1px;
border-bottom:#bee1f4 solid 1px;
}
.tableTwo tr td
{
height:18px;
line-height:18px;
background:#f4fbff;
text-align:left;
padding:0 5px 0 10px;
border-right:#bee1f4 solid 1px;
border-bottom:#bee1f4 solid 1px;
}
.noBorder
{
border:0;
}
.table img
{
width:200px;
}
.tableTwo img
{
width:200px;
}
/*form element*/
.formElement input
{
width:100px;
font-size:12px;
}
.formElement select
{
width:104px;
font-size:12px;
}
.formElement textarea
{
padding:3px;
}
.formElement .file
{
width:220px;
}
.formElement .textarea
{
width:250px;
height:50px;
}
.formElement .textareaLarge
{
width:450px;
height:100px;
}
.formElement .textareaLarge2
{
width:290px;
height:300px;
}
.textareaLarge
{
width:450px;
height:100px;
}
.formElement .checkbox input
{
width:15px;
}
.formElement .shortList
{
width:50px;
}
.formElement .longinput
{
width:200px;
}
/*listButton*/
.listButton .lastBorder
{
border:none;
}
.listButton
{
background:#fff;
padding:4px 0 0 10px;
height:20px;
line-height:16px;
}
.listButton ul li
{
color:#294982;
float:left;
margin-right:10px;
border-right:1px solid #294982;
padding-right:10px;
}
.listButton ul li a,.listButton ul li a:visited
{
color:#294982;
}
/*===========表格function==========*/
.tableFunction li
{
float:left;
border-right:1px solid #406478;
line-height:16px;
margin-top:2px;
}
.tableFunction li a,.tableFunction li a:visited
{
color:#406478;
padding:0 15px 0 15px;
}
.tableFunction li.lastBorder
{
border:none;
}
.functionColor li
{
border-right:1px solid #fff;
}
.functionColor li a, .functionColor li a:visited
{
color:#fff;
}
/*========分页style==========*/
.divTableFooter
{
width:100%;
background:#5b7e91;
height:24px;
}
.tableFooter
{
height:24px;
float:right;
padding:10px 0 3px 0;
}
.tableFooter li
{
line-height:14px;
padding:0 5px 0 5px;
float:left;
margin-right:5px;
color:#daf2ff;
border-right:1px solid #daf2ff;
}
.tableFooter li .lastBorder
{
border-right-width:0;
}
.tableFooter input
{
width:25px;
}
.fontColor li
{
color:#000;
border-right:1px solid #000;
}
/*=======================TAB标签STYLE========================*/
/********MainTab style***********/
ul.subTab_A
{
position:relative;
display:block;
float:left;
list-style:none;
height:22px;
padding-left:10px;
margin-bottom:0px;
margin-top:5px;
}
ul.subTab_A li
{
float:left;
margin:0 3px 0 0px;
height:22px;
background:#3c637b;
position:relative;
}
ul.subTab_A li a
{
float:left;
position:relative;
display:block;
color:#78a3bf;
line-height:22px;
vertical-align:middle;
width:120px;
text-align:center;
}
ul.subTab_A li a:visited
{
color:#78a3bf;
}
ul.subTab_A li.current
{
background:#daf2ff;
color:#36678a;
}
ul.subTab_A li a.delete
{
width:10px;
position:absolute;
left:105px;
top:2px;
}
/*内容Div*/
div.subTabContent
{
display:none;
float:left;
width:100%;
position:relative;
}
*+html div.subTabContent
{
height:100%;
}
* html div.subTabContent
{
float:none;
padding:0;
}
/*===========解决父元素包含浮动子元素的问题clear===========*/
.clear:after{
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clear{ min-height:1px;}
/* * */
/*-------------------------------------------------页面布局-----------------------------------------------------*/
/*=========================顶部样式header======================*/
.header
{
position:relative;
height:66px;
background:#3267ad url(../images/headerBorder.gif) bottom repeat-x;
width:100%;
padding-bottom:2px;
}
.logo
{
float:left;
}
.help
{
float:right;
margin:35px 15px 0 0 ;
}
.help li
{
float:left;
}
.help li a,.help li a:visited
{
color:#fff;
}
.help li a:hover
{
text-decoration:underline;
}
.header .header_ul
{
position:absolute;
right:5px;
top:35px;
}
.header .header_ul ul li
{
float:left;
margin-right:5px;
}
.header .header_ul select
{
width:150px;
background:#c6e0f6;
color:#235daa;
border:1px solid #235daa;
height:20px;
line-height:16px;
padding-left:2px;
}
.header .header_ul input
{
width:150px;
background:#c6e0f6;
color:#235daa;
border:1px solid #235daa;
height:16px;
line-height:16px;
padding-left:2px;
}
/*横条space*/
#space01
{
background:#eff3f7;
height:1px;
font-size:1px;
}
#space03
{
display:block;
background:#36678a;
height:1px;
font-size:1px;
}
.spaceing01
{
height:3px;
font-size:3px;
background:url(../images/index_border.jpg) repeat-x;
}
* html .spaceing01
{
height:2.5px;
font-size:2.5px;
}
/*==================================中间区域content===============================*/
.login_bg
{
background:#c4dbf6;
}
.body_bg
{
background:white;
}
.content
{
width:100%;
}
.contentBg
{
background:#2c3940;
border:1px solid #5b7e91;
border-top :none;
}
*+html .content
{
height:100%;
}
* html .content
{
height:0;
}
.loginContent
{
background:#c4dbf6;
}
.divContent
{
padding:10px;
}
* html .divContent
{
height:100px;
}
.whiteBg
{
background:white;
}
.divBorder
{
padding:10px;
height:auto;
border:1px solid #5b7e91;
background:#f5f6e8;
}
.divBody
{
border:1px solid #a2a9bc;
background:#fff;
height:auto;
}
* html .divBody
{
height:0;
}
* html .divBorder
{
height:0;
}
.leftBorder
{
border-left:1px solid #5b7e91;
margin:10px 0 0 0;
}
.divButton
{
background:#ececec;
height:30px;
padding:10px 0 0 0;
}
.buttonContent
{
margin:0 auto;
width:158px;
height:21px;
}
/*欢迎信息style*/
.userInfo
{
background:url(../images/second_bar.jpg) repeat-x;
height:33px;
line-height:33px;
padding:0 20px 0 20px;
color:#8d8d8d;
}
/****************登录页面style****************/
.spaceing
{
height:60px;
background:#84ace1;
}
.hr01
{
background:url(../images/main_hr_top.jpg);
font-size:8px;
height:8px;
margin:0;
padding:0;
}
.hr02
{
background:url(../images/main_hr_bottom.jpg);
font-size:8px;
height:8px;
margin:0;
padding:0;
}
.login
{
position:relative;
margin:30px 0 0 75px;
}
/*用户登录style*/
.form_login
{
padding:20px 0 0 30px;
}
.form_login input
{
width:155px;
}
.form_login li
{
margin-bottom:10px;
}
.form_login li label
{
width:40px;
height:24px;
line-height:24px;
float:left;
text-align:right;
margin-right:15px;
}
.form_login .loginButton
{
float:left;
margin-right:8px;
}
* html .form_login .loginButton
{
margin-left:3px;
margin-right:5px;
}
/****************三列布局style****************/
#left {
position: absolute;
top: 0px;
left: 0px;
margin:0 20px 20px 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 120px;
}
#middle {
margin: 0px 190px 20px 190px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
}
#right {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a space at right
swhen there is no scroll bar */
margin:0 20px 20px 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
width: 120px;
}
/*************双列style*************/
.leftContent
{
float: left;
background:#f4f4f4;
border:1px solid #24618e;
width: 230px;
margin:2px 0 0 1px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
}
.rightContent
{
margin:2px 0 0 236px;
background: #ededed;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width:auto;
height:300px;
background:#f4f4f4;
}
/********MainTab style***********/
ul.subTab_B
{
position:relative;
display:block;
float:left;
list-style:none;
height:21px;
margin-left:50px;
}
ul.subTab_B li
{
float:left;
margin:0 5px 0 0;
text-align:center;
background:url(../images/tag_normal_right.jpg) right top no-repeat;
}
ul.subTab_B li a
{
float:left;
display:block;
color:#24618e;
height:21px;
line-height:21px;
padding:0 15px 0 15px;
vertical-align:middle;
background:url(../images/tag_normal_left.jpg) left top no-repeat;
}
ul.subTab_B li a:visited
{
color:#24618e;
}
ul.subTab_B li.current
{
background:url(../images/tag_right.jpg) right top no-repeat;
}
ul.subTab_B li.current a,ul.subTab_B li.current a:visited
{
background:url(../images/tag_left.jpg) left top no-repeat;
color:#fff;
}
/*内容Div*/
div.subTabContentB
{
display:none;
float:left;
width:99%;
position:relative;
border:#24618e 1px solid;
background-color:#f4f4f4;
height:589px;
}
*+html div.subTabContentB
{
height:100%;
}
* html div.subTabContentB
{
float:none;
padding:0;
}
/***********实体功能列表style*****************/
.mono_info
{
width:100%;
height:100%;
background:#f0f4f6;
}
.mono_info .info
{
padding:5px;
background:#f0f4f6;
}
.mono_info .info .info_content
{
background:#fff;
padding:12px;
border:#9dc0d3 1px solid;
height:450px;
}
ul.base_info
{
width:600px;
padding:0 0 0 25px;
color:#000;
}
ul.base_info li
{
float:left;
margin:0 25px 5px 0;
height:20px;
line-height:20px;
}
ul.base_info li label
{
float:left;
margin:0 1px 0 0;
}
ul.base_info li span
{
margin-top:-2px;
}
.detailInfo
{
margin-top:12px;
background:url(../images/detailBg.jpg) top center no-repeat;
}
.detailInfo label
{
color:#000;
position:relative;
top:-10px;
left:-20px;
padding:0 10px 0 10px;
line-height:20px;
background-color:White;
}
.detailInfo ul
{
margin:40px 20px 0 20px;
}
.detailInfo ul li
{
height:24px;
line-height:24px;
border:0px solid #dfcf64;
border-bottom:1px;
}
.detailInfo ul li.lastBorder
{
border:none;
}
.detailInfo ul.download li
{
width:100%;
}
.detailInfo ul.download li span
{
float:left;
}
.detailInfo ul.download li span.NO
{
margin:-2px 0 0 3px;
}
.detailInfo ul.download li div
{
float:right;
}
.detailInfo ul.download li div a
{
margin:0 5px 0 5px;
}
.detailInfo ul.download li div a img
{
margin:0 3px -2px 0;
}
/*************测试数据Report************************/
.testReportHeader
{
background:#225ba6;
width:100%;
}
.leftTitle
{
background:#3c7ac0;
height:27px;
line-height:27px;
padding-left:10px;
color:#fff;
}
ul.reportList
{
}
ul.reportList li
{
background:#dce4ef;
}
ul.reportList li a
{
position:relative;
padding-left:15px;
height:24px;
line-height:24px;
display:block;
border-top:2px solid #eaf0f8;
border-bottom:2px solid #d2dae0;
}
ul.reportList li a .arrow
{
position:absolute;
left:190px;
top:3px;
}
ul.reportList li ul
{
background:#f4f4f4;
height:764px;
}
ul.reportList li ul li
{
background:#f4f4f4;
}
ul.reportList li ul li a
{
padding-left:25px;
margin-top:5px;
border:none;
color:#14476d;
}
ul.reportList li ul li a:hover
{
color:#d50303;
}
ul.reportList li ul li a:visited
{
color:#878787;
}
/*---------*/
.pageTitle
{
height:59px;
border:1px solid #a7a6ab;
}
.titleBg01
{
background:#225ca6 url(../images/type_title_bg.jpg) right no-repeat;
}
.titleBg02
{
background:#225ca6 url(../images/function_title_bg.jpg) right no-repeat;
}
/*------------*/
.indexBg
{
position:absolute;
right:0;
bottom:0;
}
/*=====================================底部区域footer================================*/
.footer
{
position:absolute;
bottom:0;
width:100%;
height:29px;
background:#bac6cf;
color:#668191;
line-height:25px;
text-align:center;
}
.footer_n
{
clear:both;
width:1000px;
height:28px;
background:#757575;
color:#dcdcdc;
line-height:28px;
text-align:center;
}
/*底部横条space*/
.space02
{
background:#e1e8f2;
height:4px;
font-size:4px;
}
/*标志shenzhou*/
.shenzhou
{
position:absolute;
bottom:31px;
right:0px;
}
/*-----------ps----------*/
.divCheckbox
{
margin:5px 0 0 15px;
height:795px;
overflow:scroll;
}
.divCheckbox input
{
width:20px;
}
.popWindow
{
position:absolute;
left:290px;
top:220px;
width:0px;
height:0px;
color:#fff;
font-size:12px;
background:#999;
border:1px solid #def;
filter:Alpha(Opacity=0);
opacity:0;
z-index:99999;
display:none;
}
.popWindow .popContent
{
margin:10px;
display:none;
overflow:auto;
text-indent:2em;
line-height:1.5em;
}
/*Accordion*/
.reportList
{
background:#dce4ef;
}
.reportList span
{
padding-left:15px;
height:24px;
line-height:24px;
display:block;
border-top:2px solid #eaf0f8;
border-bottom:2px solid #d2dae0;
}
.reportTitle
{
background:#f4f4f4;
}
.reportTitle ul
{
margin:10px 0 50px 0;
height:697px;
}
.reportTitle ul li
{
width:200px;
height:20px;
word-break:break-all;
}
.reportTitle ul li a
{
display:block;
padding-left:25px;
color:#14476d;
line-height:20px;
}
.reportTitle ul li a:visited
{
color:#878787;
}
.reportTitle ul li a:hover
{
color:#d50303;
}
.hide
{
display:none;
}
/*Welcome Info*/
.welInfo
{
margin:5px 0 0 45px;
}
.welContent
{
background:url(../images/welInfoBg.jpg) left top no-repeat;
padding:8px 0 0 10px;
}
.infoContent
{
margin-left:20px;
padding:15px 0 25px 15px;
color:#fff;
background:url(../images/lineBg.gif) bottom left no-repeat;
}
.infoContent p
{
color:#aaff76;
font-size:14px;
font-weight:bold;
margin-bottom:10px;
}
/*detail_info*/
.detail_info
{
margin-top:12px;
padding:0 0 10px 15px;
border-top:#c1d6e9 1px solid;
}
.detail_info label
{
color:#000;
position:relative;
top:-10px;
left:-20px;
padding:0 10px 0 10px;
line-height:20px;
background-color:White;
}
.detail_info ul
{
width:100%
}
.detail_info ul li
{
height:24px;
line-height:24px;
width:190px;
margin:0 29px 0 0;
}
.detail_info ul.download li
{
width:100%;
}
.detail_info ul.download li span
{
float:left;
}
.detail_info ul.download li div
{
float:right;
}
.detail_info ul.download li div a
{
padding:0 10px 0 10px;
}
/*userAdmin*/
.userAdmin
{
margin-bottom:5px;
}
.userAdmin ul
{
float:left;
padding-left:10px;
}
.userAdmin ul li
{
text-align:left;
height:24px;
line-height:24px;
}
/**/
.leftImage
{
background:#fff url(../images/leftImage.jpg) bottom repeat-x;
}
/**/
.arrow img
{
width:7px;
height:7px;
margin:-5px 0 0 4px;
}
