Cherie缺小瑞的部落格

※程式寫法:

<asp:GridView ID="GridView1" runat="server" CssClass="gvStyle" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" AutoGenerateColumns="False"></asp:GridView>

※CSS樣式寫法:

/* 查詢表單 gvStyle 隔行換色 */

.gvStyle {

border:#c7c7c7 1px solid;

font-size:12px;

color: #333333;

width:100%;

margin-top:10px;

}

/*Header 標題*/

.gvStyle th{

background-image: url(images/titlebg.gif);

background-repeat: repeat-x;border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #cad4d6;

height:25px;

color:#0663cc;

font-weight:bold;

text-align:center;

border: 1px solid #ccc;

}

/*OnMouseOver 滑鼠移過列表時, 背景色變更*/

.gvStyle tr:hover{

background-color:#FFF4DA;

}

/*Rows 列表顏色*/

.gvStyle td{

border: 1px solid #ccc;

height:25px;

text-align:center;padding:3px;

}

/*Change Rows 如果想要有單、雙列不同顏色替換, 在這裡更換*/

.gvStyle .alt{

background-color:#fff;

border: 1px solid #ccc;

height:25px;

}

/*Page 分頁顏色*/

.gvStyle .pgr table{

margin-left:auto;

margin-right:auto;

}

.gvStyle .pgr td{

background-color:#E2EAF2;

border-width: 0px;

padding:3px;

}

.gvStyle .pgr a{

color: #666; text-decoration:underline;

padding:0px 3px 0px 3px;

}

.gvStyle .pgr a:hover{ color: #FF0000; text-decoration: none;}

※參考教學

http://www.dotblogs.com.tw/keni216/archive/2010/07/02/16336.aspx