CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

Web人员常用的CSS代码：包含按钮样式、蓝色按钮样式、红色按钮样式、红色按钮样式、绿色按钮样式、图像按钮、页面正文样式、下拉选择框显示风格、超级链接显示风格、线条文本编辑框显示风格、多行文本框样式、阴影风格的表单、只显一条横线的Text的样式

/*按钮样式*/

.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/bluebuttonbg.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;

}

/*红色按钮样式*/

.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/redbuttonbg.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;

    background-image: url(../Images/blue_button_bg.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 1px solid;

    border-left: #93bee2 1px solid;

    border-right: #93bee2 1px solid;

    border-top: #93bee2 1px solid;

    background-image: url(../Images/greenbuttonbg.gif);

    background-color: #ffffff;

    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: #EDEDF3;

    font-size: 9pt;

    color: #003366;

    overflow: 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: #FFFFFF 1px solid;

    color: #003366;

    border-bottom: #000000 1px solid;

    background-color: #f4f4f4;

}

/*****************************************************

超级链接显示风格

*****************************************************/

A:Link, A:Visited

{

    color: #223355;

    text-decoration: none;

}

A:Hover

{

    color: red;

    text-decoration: none;

}

A.highlight:link, A.highlight:visited

{

    color: red;

    text-decoration: none;

}

A.highlight:hover

{

    color: red;

    text-decoration: underline;

}

A.thisclass:link, A.thisclass: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-decoration: none;

}

/*****************************************************

线条文本编辑框显示风格

*****************************************************/

.EditBox

{

    background: #ffffff;

    border: 1px solid #B7B7B7;

    color: #003366;

    cursor: text;

    font-family: "Arial";

    font-size: 9pt;

    height: 18px;

    padding: 1px;

}

/****************************************************

多行文本框样式

*****************************************************/

.MultiEditBox

{

    background: #f8f8f8;

    border-bottom: #B7B7B7 1px solid;

    border-left: #B7B7B7 1px solid;

    border-right: #B7B7B7 1px solid;

    border-top: #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;

}