常用CSS

该博客提供了多种网页元素的CSS样式代码,包括按钮、下拉选择框、超级链接、文本框等。详细定义了各元素的字体、颜色、边框、背景等样式,可用于前端页面的样式设计,满足不同风格的页面需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ExpandedBlockStart.gifContractedBlock.gif/**//*按钮样式*/
ExpandedBlockStart.gifContractedBlock.gif.ButtonCss 
{dot.gif}{
InBlock.gif    font-family
: "Tahoma", "宋体";
InBlock.gif    font-size
:9pt; color: #003399;
InBlock.gif    border
: 1px #003399 solid;
InBlock.gif    color
:006699;
InBlock.gif    BORDER-BOTTOM
: #93bee2 1px solid; 
InBlock.gif    BORDER-LEFT
: #93bee2 1px solid; 
InBlock.gif    BORDER-RIGHT
: #93bee2 1px solid; 
InBlock.gif    BORDER-TOP
: #93bee2 1px solid;
InBlock.gif    background-image
:url(../Images/bluebuttonbg.gif);
InBlock.gif    background-color
: #e8f4ff;
InBlock.gif    CURSOR
: hand;
InBlock.gif    font-style
: normal ;
InBlock.gif    width
:60px;
InBlock.gif    height
:22px;
ExpandedBlockEnd.gif
}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*蓝色按钮样式*/
ExpandedBlockStart.gifContractedBlock.gif.blueButtonCss 
{dot.gif}{
InBlock.gif    font-family
: "Tahoma", "宋体";
InBlock.gif    font-size
: 9pt; color: #003366;
InBlock.gif    border
: 0px #93bee2 solid;
ExpandedSubBlockStart.gifContractedSubBlock.gif   
/**//* BORDER-BOTTOM: #93bee2 1px solid; 
InBlock.gif    BORDER-LEFT: #93bee2 1px solid; 
InBlock.gif    BORDER-RIGHT: #93bee2 1px solid; 
ExpandedSubBlockEnd.gif    BORDER-TOP: #93bee2 1px solid;
*/

InBlock.gif    background-image
:url(../Images/blue_button_bg.gif);
InBlock.gif    background-color
: #ffffff;
InBlock.gif    CURSOR
: hand;
InBlock.gif    font-style
: normal ;
ExpandedBlockEnd.gif
}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*红色按钮样式*/
ExpandedBlockStart.gifContractedBlock.gif.redButtonCss 
{dot.gif}{
InBlock.gif    font-family
: "Tahoma", "宋体";
InBlock.gif    font-size
: 9pt; color: #0066cc;
InBlock.gif    border
: 1px #93bee2 solid;
InBlock.gif    BORDER-BOTTOM
: #93bee2 1px solid; 
InBlock.gif    BORDER-LEFT
: #93bee2 1px solid; 
InBlock.gif    BORDER-RIGHT
: #93bee2 1px solid; 
InBlock.gif    BORDER-TOP
: #93bee2 1px solid;
InBlock.gif    background-image
:url(../Images/redbuttonbg.gif);
InBlock.gif    background-color
: #ffffff;
InBlock.gif    CURSOR
: hand;
InBlock.gif    font-style
: normal ;
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*选择按钮样式*/
None.gif.selectButtonCss
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    font-family
: "Tahoma", "宋体";
InBlock.gif    font-size
: 9pt; color: #0066cc;
InBlock.gif    border
: 1px #93bee2 solid;
InBlock.gif    BORDER-BOTTOM
: #93bee2 1px solid; 
InBlock.gif    BORDER-LEFT
: #93bee2 1px solid; 
InBlock.gif    BORDER-RIGHT
: #93bee2 1px solid; 
InBlock.gif    BORDER-TOP
: #93bee2 1px solid;
InBlock.gif    background-image
:url(../Images/blue_button_bg.gif);
InBlock.gif    background-color
: #ffffff;
InBlock.gif    CURSOR
: hand;
InBlock.gif    font-style
: normal ;
ExpandedBlockEnd.gif
}
    
None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*绿色按钮样式*/
ExpandedBlockStart.gifContractedBlock.gif.greenButtonCss 
{dot.gif}{
InBlock.gif    font-family
: "Tahoma", "宋体";
InBlock.gif    font-size
: 9pt; color: #0066cc;
InBlock.gif    border
: 1px #93bee2 solid;
InBlock.gif    BORDER-BOTTOM
: #93bee2 1px solid; 
InBlock.gif    BORDER-LEFT
: #93bee2 1px solid; 
InBlock.gif    BORDER-RIGHT
: #93bee2 1px solid; 
InBlock.gif    BORDER-TOP
: #93bee2 1px solid;
InBlock.gif    background-image
:url(../Images/greenbuttonbg.gif);
InBlock.gif    background-color
: #ffffff;
InBlock.gif    CURSOR
: hand;
InBlock.gif    font-style
: normal ;
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*图像按钮*/
None.gif.imageButton
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
ExpandedSubBlockStart.gifContractedSubBlock.gifCURSOR
: hand;    /**//*改变鼠标形状*/
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*页面正文样式*/
None.gifbody 
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    scrollbar-face-color
: #EDEDF3;
InBlock.gif    scrollbar-highlight-color
: #ffffff;
InBlock.gif    scrollbar-shadow-color
: #93949F;
InBlock.gif    scrollbar-3dlight-color
: #EDEDF3;
InBlock.gif    scrollbar-arrow-color
: #082468;
InBlock.gif    scrollbar-track-color
: #F7F7F9;
InBlock.gif    scrollbar-darkshadow-color
: #EDEDF3;
InBlock.gif    
InBlock.gif    font-size
: 9pt;
InBlock.gif    color
: #003366;
InBlock.gif    overflow
:auto;
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gifTD 
{dot.gif}{ FONT-SIZE: 12px }
None.gifTH 
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    FONT-SIZE
: 12px; 
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*************************************
InBlock.gif下拉选择框显示风格
ExpandedBlockEnd.gif************************************
*/

None.gifSELECT
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    BORDER-RIGHT
: #000000 1px solid; 
InBlock.gif    BORDER-TOP
: #FFFFFF 1px solid; 
InBlock.gif    FONT-SIZE
: 12px; 
InBlock.gif    BORDER-LEFT
: #FFFFFF 1px solid;
InBlock.gif    COLOR
:#003366; 
InBlock.gif    BORDER-BOTTOM
: #000000 1px solid; 
InBlock.gif    BACKGROUND-COLOR
: #f4f4f4;
ExpandedBlockEnd.gif
}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif超级链接显示风格
ExpandedBlockEnd.gif****************************************************
*/

ExpandedBlockStart.gifContractedBlock.gifA:Link, A:Visited
{dot.gif}{color:#223355;text-decoration: none}
ExpandedBlockStart.gifContractedBlock.gifA:Hover
{dot.gif}{color:red;text-decoration:none;}
None.gif
ExpandedBlockStart.gifContractedBlock.gifA.highlight:link, A.highlight:visited 
{dot.gif}{ color:red; text-decoration:none }
ExpandedBlockStart.gifContractedBlock.gifA.highlight:hover 
{dot.gif}{ color:red; text-decoration:underline }
None.gif
ExpandedBlockStart.gifContractedBlock.gifA.thisclass:link, A.thisclass:visited 
{dot.gif}{ color: #D9EBFD; font-weight:bold; text-decoration:none }
ExpandedBlockStart.gifContractedBlock.gifA.thisclass:hover 
{dot.gif}{ color: #FFFFFF;font-weight:bold; }
None.gif
ExpandedBlockStart.gifContractedBlock.gifA.navlink:link, A.navlink:visited 
{dot.gif}{color: #D9EBFD; text-decoration:none}
ExpandedBlockStart.gifContractedBlock.gifA.navlink:hover 
{dot.gif}{color: #FFFFFF; text-decoration:none }
None.gif
None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif线条文本编辑框显示风格
ExpandedBlockEnd.gif****************************************************
*/

None.gif.EditBox
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    background
: #ffffff; 
InBlock.gif    border
: 1px solid #B7B7B7;
InBlock.gif    color
: #003366;
InBlock.gif    cursor
: text;
InBlock.gif    font-family
: "Arial";
InBlock.gif    font-size
: 9pt;
InBlock.gif    height
: 18px;
InBlock.gif    padding
: 1px;
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//****************************************************
InBlock.gif多行文本框样式
ExpandedBlockEnd.gif****************************************************
*/

None.gif.MultiEditBox
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    background
: #f8f8f8;
InBlock.gif    border-bottom
: #B7B7B7 1px solid;
InBlock.gif    border-left
: #B7B7B7 1px solid;
InBlock.gif    border-right
: #B7B7B7 1px solid;
InBlock.gif    border-top
: #B7B7B7 1px solid;
InBlock.gif    color
: #000000;
InBlock.gif    cursor
: text;
InBlock.gif    font-family
: "Arial";
InBlock.gif    font-size
: 9pt;
InBlock.gif    padding
: 1px;
ExpandedBlockEnd.gif
}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif阴影风格的表单
ExpandedBlockEnd.gif****************************************************
*/

None.gif.Shadow 
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    position
:absolute;
InBlock.gif    z-index
:1000;
InBlock.gif    top
:0px;
InBlock.gif    left
:0px;
InBlock.gif    background
:gray;
InBlock.gif    background-color
:#FFCC00;
InBlock.gif    filter 
: progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2,positives=true);
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif只显一条横线的Text的样式!
ExpandedBlockEnd.gif****************************************************
*/

None.gif.logintxt
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    BORDER-RIGHT
: #ffffff 0px solid; 
InBlock.gif    BORDER-TOP
: #ffffff 0px solid;
InBlock.gif    FONT-SIZE
: 9pt; 
InBlock.gif    BORDER-LEFT
: #ffffff 0px solid; 
InBlock.gif    BORDER-BOTTOM
: #c0c0c0 1px solid; 
InBlock.gif    BACKGROUND-COLOR
: #ffffff
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gifDataGrid页眉样式
ExpandedBlockEnd.gif****************************************************
*/

None.gif.dgTitle
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    height
:25px;
InBlock.gif    color
:#ffffff;
InBlock.gif    font-size
:large;
InBlock.gif    text-align
:center;
InBlock.gif    vertical-align
:middle;
InBlock.gif    BACKGROUND-IMAGE
:url(../images/tableTitle2.gif); height:25px
InBlock.gif    
ExpandedBlockEnd.gif
}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gifDataGrid数据显示样式
ExpandedBlockEnd.gif****************************************************
*/

None.gif.dgItem
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    height
:15px;
InBlock.gif    text-align
:center;
InBlock.gif    vertical-align
:middle;
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif文本框显示样式
ExpandedBlockEnd.gif****************************************************
*/

None.gif.clarity
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    BORDER-RIGHT
: #ffffff 0px solid; 
InBlock.gif    BORDER-TOP
: #ffffff 0px solid;
InBlock.gif    FONT-SIZE
: 9pt; 
InBlock.gif    BORDER-LEFT
: #ffffff 0px solid; 
InBlock.gif    BORDER-BOTTOM
: #ffffff 0px solid; 
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gifTABLE.List 
{dot.gif}{ border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
ExpandedBlockStart.gifContractedBlock.gifTABLE.List TH,TABLE.List TD 
{dot.gif}{ padding:4px;background-color:#eeeeee;border-bottom:2px solid #ffffff;border-right:1px solid #ffffff;border-left:1px solid #ffffff;color:#000000}
ExpandedBlockStart.gifContractedBlock.gifTABLE.List TH 
{dot.gif}{ background-color:#0064a8;border-top:2px solid #ffffff;color:#ffffff;font-weight:normal;}
ExpandedBlockStart.gifContractedBlock.gifTABLE.List TH A:link 
{dot.gif}{COLOR: #ffffff; TEXT-DECORATION: none}
ExpandedBlockStart.gifContractedBlock.gifTABLE.List TH A:visited 
{dot.gif}{COLOR: #ffffff; TEXT-DECORATION: none}
ExpandedBlockStart.gifContractedBlock.gifTABLE.List TH A:hover 
{dot.gif}{COLOR: #ffffff; TEXT-DECORATION: underline}
None.gif
ExpandedBlockStart.gifContractedBlock.gifTABLE.Form TH,TABLE.Form TD 
{dot.gif}{ padding:4px;background-color:#f6f6f6;border-bottom:1px solid #F6F6F6;border-right:1px solid #ffffff;border-left:1px solid #ffffff;color:#000000}
ExpandedBlockStart.gifContractedBlock.gifTABLE.Form TH 
{dot.gif}{ background-color:#E8E8E8;border-top:1px solid #ffffff;color:#006699;font-size:12px;font-weight:normal;border-bottom:1px;}
ExpandedBlockStart.gifContractedBlock.gifTABLE.Form TH A:link 
{dot.gif}{COLOR: #ffffff; TEXT-DECORATION: none}
ExpandedBlockStart.gifContractedBlock.gifTABLE.Form TH A:visited 
{dot.gif}{COLOR: #ffffff; TEXT-DECORATION: none}
ExpandedBlockStart.gifContractedBlock.gifTABLE.Form TH A:hover 
{dot.gif}{COLOR: #ffffff; TEXT-DECORATION: underline}
None.gif
ExpandedBlockStart.gifContractedBlock.gifTABLE.Sample TD 
{dot.gif}{ padding:2px;background-color:#f6f6f6;border-bottom:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000}
ExpandedBlockStart.gifContractedBlock.gifTABLE.Sample TH 
{dot.gif}{ background-color:#AEC1D7;border-bottom:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000;font-weight:normal;}
None.gif
ExpandedBlockStart.gifContractedBlock.gifTABLE.SampleD TD 
{dot.gif}{ padding:2px;border-bottom:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000}
ExpandedBlockStart.gifContractedBlock.gifTABLE.SampleD TH 
{dot.gif}{ border-bottom:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000;font-weight:normal;}
None.gif
ExpandedBlockStart.gifContractedBlock.gifTABLE.Form1 TH,TABLE.Form1 TD 
{dot.gif}{ padding:4px;background-color:#BED8F3;border-bottom:1px solid #ffffff;border-right:1px solid #ffffff;border-left:1px solid #ffffff;color:#000000}
ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif 没有边框的输入框 
ExpandedBlockEnd.gif****************************************************
*/

None.gif.NoneInput
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    text-align
:center;
InBlock.gif    width
:99%;height:99%;
InBlock.gif    border-top-style
: none;
InBlock.gif    border-right-style
: none;
InBlock.gif    border-left-style
: none;
InBlock.gif    background-color
: #f6f6f6;
InBlock.gif    border-bottom-style
: none;
ExpandedBlockEnd.gif
}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif 扁平风格的表单样式
ExpandedBlockEnd.gif****************************************************
*/

None.gif
None.gif
None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************/
None.gifTABLE
ExpandedBlockStart.gifContractedBlock.gif
{dot.gif}{
InBlock.gif    border-collapse
:collapse;
ExpandedBlockEnd.gif
}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
/**//*
InBlock.gif进度条样式
ExpandedBlockEnd.gif
*/

ExpandedBlockStart.gifContractedBlock.gif.bi-loading-status 
{dot.gif}{
ExpandedSubBlockStart.gifContractedSubBlock.gif  
/**//*position:   absolute;*/
InBlock.gif  width
:        150px;
InBlock.gif  padding
: 1px;
InBlock.gif  overflow
: hidden;
InBlock.gif  background-color
:Gray;  
ExpandedBlockEnd.gif
}

None.gif
None.gif 
None.gif
ExpandedBlockStart.gifContractedBlock.gif.bi-loading-status .text 
{dot.gif}{
InBlock.gif  white-space
:  nowrap;
InBlock.gif  overflow
:     hidden;
InBlock.gif  width
:             100%;
InBlock.gif  text-overflow
:     ellipsis;
InBlock.gif  padding
:      1px; 
ExpandedBlockEnd.gif
}

None.gif 
None.gif
ExpandedBlockStart.gifContractedBlock.gif.bi-loading-status .progress-bar 
{dot.gif}{
InBlock.gif  border
:       1px solid ThreeDShadow;
InBlock.gif  background
:   window;
InBlock.gif  height
:       10px;
InBlock.gif  width
:        100%;
InBlock.gif  padding
: 1px;
InBlock.gif  overflow
: hidden; 
ExpandedBlockEnd.gif
}

None.gif 
None.gif
ExpandedBlockStart.gifContractedBlock.gif.bi-loading-status .progress-bar div 
{dot.gif}{
InBlock.gif  background
:   Highlight;
InBlock.gif  overflow
: hidden;
InBlock.gif  height
:       100%;
InBlock.gif  filter
:       Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif 表头背景
ExpandedBlockEnd.gif****************************************************
*/

ExpandedBlockStart.gifContractedBlock.gif.tabletop 
{dot.gif}{
InBlock.gif    BACKGROUND-IMAGE
: url(../images/tableTitle2.gif);height:25px;
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif大标题
ExpandedBlockEnd.gif****************************************************
*/

ExpandedBlockStart.gifContractedBlock.gif.tabletitle
{dot.gif}{
InBlock.gif   font-family
: "Arial";FONT-SIZE: 12pt; COLOR:#0066cc;font-weight:bolder;filter : progid:DXImageTransform.Microsoft.DropShadow(color=#CCFFFF,offX=1,offY=1,positives=true);
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif
/**//*****************************************************
InBlock.gif小标题
ExpandedBlockEnd.gif****************************************************
*/

ExpandedBlockStart.gifContractedBlock.gif.smalltitle
{dot.gif}{
InBlock.gif   background-color
:#E8E8E8;font-size:12px;font-weight:normal;color:#006699;
ExpandedBlockEnd.gif
}

ExpandedBlockStart.gifContractedBlock.gif.calendarborder
{dot.gif}{
InBlock.gif   border
: 1px #B7B7B7 solid;
ExpandedBlockEnd.gif
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值