网页设计【常用上的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;
}

/*蓝色按扭样式*/
.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;
}

/*选择按扭样式*/
.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;
}

/*红色按扭样式*/
.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;
}

/*禄色按扭样式*/
.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;
}

/**************************
下拉选择框显示风格
**************************/
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 }

/*****************************************
线条文本编辑显示风格
*****************************************/
.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;
}

/**********************************************
阴影风格的表单
**********************************************/
.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;
}

/*****************************************************  扁平风格的表单样式
*****************************************************/
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;
}