表格样式,好看得表格样式。(用于临时卡信息查询)

来源:互联网 发布:python模块导入 编辑:程序博客网 时间:2024/05/17 06:01

--outer,inter,content 用于居中

--tab,表格样式

--button,按钮样式

#outer{                                 

height:100%;  
background: #f3f3f3;   
}
#inter{                                  
position:absolute;   
background: #f3f3f3;              
top:10%;                              
left:50%;    
}
#content{
position:absolute;
background: #f3f3f3; 
padding:0px;
width:500px;
height:400px;
margin:0px -200px;    
}
#msg{
font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
font-size: 14px; 
color: #9fbfbc;
text-align: center;
letter-spacing: 3px;
}
#msg a{
color: #5c89bd;
font-size: 18px;
}

#tab{
width: 100%;
margin:0;
padding:0;
font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;

color: #1c5d79;
border-top:  1px #c2c2c2;
border-bottom:  1px #c2c2c2;   
border-left:  1px #c2c2c2;
border-right:  1px #c2c2c2;
border-collapse: collapse;



#tab caption { 
margin:0;
padding:0;
background: #f3f3f3;
height: 80px;
line-height: 80px;
text-indent: 28px;
font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
font-size: 22px;
font-weight: bold;
color: #555d6d;
text-align: center;
letter-spacing: 3px;
border-top: dashed 1px #c2c2c2;
border-bottom: dashed 1px #c2c2c2; 

#tab tbody tr {
background: #f3f3f3;
font-size: 16px;
height: 30px;
line-height: 30px;
text-align: left;
event:expression( 
onmouseover = function(){this.style.backgroundColor = '#E9F5FF';}, 
onmouseout = function(){this.style.backgroundColor = '#f3f3f3';} 




#tab tbody tr.odd { 
background: #F0FFFF; 



#tab tbody tr th,#tab tbody tr td { 
padding: 6px; 
border: solid 1px #326e87;



#tab tbody tr th { 
font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
font-size: 12px; 
padding: 6px; 
text-align: left; 
font-weight: bold;
color: #FFFFFF; 
border-bottom: solid 1px white; 



#tab tbody tr th:hover { 
background: #ffffff; 
}


#button, #button:visited {
background: #2883b0 url(overlay.png) repeat-x;
display: inline-block;
padding: 6px 28px 7px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
#button:hover{
background-color:#0079ba ;
}