GridView、DetailView、BUTTON、TabContainer的CCS样式文件

来源：互联网发布：如何设计软件界面编辑：程序博客网时间：2024/06/04 17:53

Tabcontainer样式预览图:（里面是两个BUTTON哦^_^）

DetailView样式预览图:(在Tabcontainer中的)

GridView样式预览图

附CSS文件及注释：

/*GridView的CSS样式*/
.GView_HeaderCSS
{
/*页眉*/
position:relative ;
table-layout:fixed;
background-color: #C2E2ED;
height:22px;
font-size: 14px;
color:Black;
font-weight: bold;
text-align:left;
}
.GView_ItemCSS
{
/*奇数行*/
background-color: RGB(255,255,255);
height:15px;
color:#000000;
background-color: #ffffff;
border: solid 1px #ffffff;
}
.GView_AlternatingItemCSS
{
/*偶数行*/
background-color: #F3F3F3;
height:15px;
color:#000000;
background-color: #DDF9FE;
border: solid 1px #ffffff;
}
.GView_FooterCSS
{
/*DataGrid最后一行:文中并未涉及*/
background-color: #990000;
font-weight: bold;
color: white;
height:20px;
font-size:10pt;
}
.GView_BodyCSS
{
     font-family: arial;
     font-size: 12px;
     border: solid 1px #7f7f7f;
}

/*DetailView的CSS样式*/
.DetaiView_BodyCSS
{/*总体样式*/
background-color:LightGoldenrodYellow;
border-width:2px;
border-color:White;
border-style:solid;
Font-Size:12px;
Color: Black;
Height:46px;
Width:550px;
}
.DetaiView_HeaderCSS
{/*页眉*/
background-color: White;
height:22px;
font-size: 14px;
color:#05BEE1;
font-weight:bold;
text-align:left;
height:30px;
}
.DetaiView_ItemCSS
{/*奇数行*/
background-color: #F3F3F3;
height:15px;
color:#000000;
background-color: #DDF9FE;
border: solid 1px #ffffff;
}
.DetaiView_AlternatingItemCSS
{/*偶数行*/
background-color: RGB(255,255,255);
height:15px;
color:#000000;
background-color: #E9FCFF;
border: solid 1px #ffffff;
}

/* TabContainer 蓝色简单样式 */
.AjaxTabStrip .ajax__tab_header
{
    font-size: 20px;
    height:20px;
    padding-left:8px;
    padding-right:0px;
    padding-top:8px;
    background-color:#77CEFF;
    border-top:1px solid #038BA4;
    border-left:1px solid #038BA4;
    border-right:1px solid #038BA4;
}
/* 默认tab设置 */
.AjaxTabStrip .ajax__tab_tab
{
    font-size: 12px;
    padding: 4px;
    height:20px;   /* Your proper height */
    background-color: #C2E2ED;
    border:1px solid #ffffff;
}
/* 鼠标经过设置 :字体加粗、下划线*/
.AjaxTabStrip .ajax__tab_hover .ajax__tab_tab
{
    font-weight:bold;
    text-decoration: underline;
}
/* 当前激活选项卡设置*/
.AjaxTabStrip .ajax__tab_active .ajax__tab_tab
{
    background-color: #ffffff;
    font-weight:bold;
}
/*Body设置*/
.AjaxTabStrip .ajax__tab_body
{
border:1px solid #038BA4;
border-top: 0;
    padding: 8px;
    background-color: #ffffff;
}

/*浅蓝色3D按钮样式*/
.Boutton_LightBlue
{
BORDER-RIGHT: #2C59AA 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #2C59AA 1px solid;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
BORDER-LEFT: #2C59AA 1px solid;
CURSOR: hand;
COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #2C59AA 1px solid
}

/*橘红色3D按钮样式*/
.Boutton_Orange
{
BORDER-RIGHT: #D87E26 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #D87E26 1px solid;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#FF6406);
BORDER-LEFT: #D87E26 1px solid;
CURSOR: hand;
COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #D87E26 1px solid
}