网页设计【常用上的CSS来实现样式】

/*按扭样式*/
.ButtonCss{
 font-family:"Tahoma","宋体";
 font-size:9pt; color:#003399;
 border:1px #003399 solid;
 color:006699;
 border-bottom:#93bee2 1px solid;
 border-left:#93bee2 1px solid;
 border-right: #93bee2 1px solid;
 border-top:#93bee2 1px solid;
 background-image:url(../Images/bulebuttonbg.gif);
 background-color:#e8f4ff;
 cursor:hand;
 font-style:normal;
 width:60px;
 height:22px;
}

2.

/*蓝色按扭样式*/
.blueButtonCss{
 font-family:"Tahoma","宋体";
 font-size:9pt; color:#003366;
 border:0px #93bee2 solid;
 /*border-bottom: #93bee2 1px solid;
 border-left: #93bee2 1px solid;
 border-right:#93bee2 1px solid;
 border-top:#93bee2 1px solid;*/
 background-image:url(../Images/blue_button_bg.gif);
 background-color:#ffffff;
 cursor:hand;
 font-style:normal;
}

3.

/*选择按扭样式*/
.selectButtonCss
{
 font-family:"Tahoma","宋体";
 font-size:9pt ; color:#0066cc;
 border:1px #93bee2 solid;
 border-bottom:#93bee2 1px solid ;
 border-left:#93bee2 1px solid ;
 border-right:#93bee2 1px solid;
 border-top:#93bee2 1px solid ;
 backgroud-image:url(../Images/blue_buttom_bg.gif);
 backgroud-color:#fffff;
 cursor:hand;
 font-style:normal;
}

4.

/*红色按扭样式*/
.redbuttoncss{
 font-family: "Tahoma" , "宋体";
 font-size: 9pt; color:#0066cc;
 border: 1px #93bee2 solid;
 border-bottom:#93bee2 1px solid;
 border-left:#93bee2 1px solid;
 border-right :#93bee2 1px solid;
 border-top : #93bee2 1px solid;
 background-image:url(../Images/redbuttombg.gif);
 background-color:#ffffff;
 cursor:hand;
 font-style:normal;
}

5.

/*禄色按扭样式*/
.greenButtonCss {
 font-family: 'Tahoma","宋体";
 font-size: 9pt; color:#0066cc;
 border:1px #93bee2 solid;
 border-bottom:#93bee2 1xp solid;
 border-left:#93bee2 1px solid;
 border-right: #93bee2 1px solid; 
 border-top: #93bee2 1px solid;
 background-image:url(../Images/greenbuttonbg.gif);
 background-color;#fffff;
 cursor: hand;
 font-style :normal;
}

/*图象按扭*/
.imageButton
{
 cursor:hand; /*改变鼠标形状*/
}
/*页面正文样式*/
body
{
 scrollbar-face-color:#ededf3;
 scrollbar-highlight-color:#ffffff;
 scrollbar-shadow-color:#93949f;
 scrollbar-3dlight-color:#ededf3;
 scrollbar-arrow-color:#082468;
 scrollbar-track-color:#f7f7f9;
 scrollbar-darkshadow-color:#edede3;

 font-size:9pt;
 color:#003366;
 overfolw:auto;
 overfolw:auto;
 }
 td { font-size:12px}
 th
{
 font-size:12px;
}

6.

/**************************
下拉选择框显示风格
**************************/
select
{
 border-right:#000000 1px solid;
 border-top: #ffffff 1px solid;
 font-size: 12px; 
 border-left:#fffff 1px solid;
 border-bottom:#000000 1px solid;
 color:#003366;
 background-color:#f4f4f4;
}

/**************************
超级连接显示风格 
**************************/
A:Link, A:Visited{ color:#223355; text-decoration: none }
A:Hover
{ color:red;
  text-decoration:none; }

A.hightlight:link,  A.hightlight:visited
{ color:red; text-decoration:none }

A.thisclass"link, A.htisclass:visited
{ color:#d9ebfd; font-weight:bold; text-decoration:none }

A.thisclass:hover 
{ color:#ffffff; font-weight:bold; }
 
A.navlink:link , A.navlink:visited
{ color:#d9ebfd; text-decoration:none }

A.navlink:hover 
{ color :#ffffff; text-decoraton:none }

7

/*****************************************
线条文本编辑显示风格
*****************************************/
.EditBox
{
 background: #ffffff;
 border:1px solid #B7b7b7;
 color: #003366;
 cursor:text;
 font-family:"Arial";
 font-size:9pt;
 height:18px;
 padding:1px;
}

/******************************************
多行文本框样式
******************************************/
.MultiEditBox
{
 backgroud: #f8f8f8;
 border-bottom: #b7b7b7 1px solid;
 border-left: #b7b7b7 1px solid;
 border-top: #b7b7b7 1px solid;
 border-right: #b7b7b7 1px solid;
 color:#000000;
 cursor : text;
 font-family: "Arial";
 font-size:9pt;
 padding:1px;
}

8.

/**********************************************
阴影风格的表单
**********************************************/
.Shadow
{
 position:absolute;
 z-index:1000;
 top:0px;
 left:0px;
 background:gray;
 background-color:#ffcc00;
 filter:progid:DXImageTransform.Microsoft.DropShadow
(color=#ff404040, offX=2,offY=2,positives=true);
}

/***********************************************
只显一条横线的Text的样式!
***********************************************/
.logintxt
{
 border-right: #ffffff 0px solid;
 border-top:#ffffff 0px solid;
 font-size: 9pt;
 border-left:#ffffff 0px solid;
 border-bottom:#c0c0c0 1px solid;
 background-color:#ffffff;
}

9.

/*****************************************************  扁平风格的表单样式
*****************************************************/
TABLE{ 
   border-collapse:collapse;
}
/**进度条样式*/
.bi-loading-status
 { 
 /***position:   absolute;*/
  width:   150px; 
 padding: 1px; 
  overflow: hidden; 
 background-color:Gray; 
 } 
.bi-loading-status .text {
  white-space:  nowrap; 
 overflow:     hidden;
  width:             100%;
  text-overflow:     ellipsis;  
 padding:      1px;
 }
 .bi-loading-status .progress-bar { 
 border:       1px solid ThreeDShadow; 
 background:   window; 
 height:       10px;  width:      
  100%;  padding: 1px; 
 overflow: hidden;
 } 
.bi-loading-status .progress-bar div { 
 background:   Highlight; 
 overflow: hidden; 
 height:       100%; 
 filter:      
 Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
/***************************************************** 
表头背景
*****************************************************/.tabletop { 
 BACKGROUND-IMAGE: url(../images/tableTitle2.gif);height:25px;
}
/*****************************************************
大标题
****************************************************/
.tabletitle{ 
  font-family: "Arial";
FONT-SIZE: 12pt; 
 COLOR:#0066cc;
 font-weight:
bolder;filter :
 progid:DXImageTransform.Microsoft.DropShadow
(color=#CCFFFF,offX=1,offY=1,positives=true);
}
/*****************************************************
小标题
*****************************************************/.
smalltitle{ 
  background-color:#E8E8E8;
font-size:12px;
font-weight:normal;
color:#006699;
}
.calendarborder{  
 border: 1px #B7B7B7 solid;
}