Asp.NET中Gridview CSS---Office2003风格

效果：

CSS样式(Office2003.css)：

 1 /*GridViewCSS office2003blue*/
 2 .GridViewStyle
 3 {
 4     font-family: Arial, Sans-Serif;
 5     font-size:small;
 6     table-layout: auto;
 7     border-collapse: collapse;
 8     border:#4F93E3 1px solid;
 9 }
10 /*Header and Pager styles*/
11 .HeaderStyle/*, .PagerStyle*/ /*Common Styles*/
12 {
13     background-image: url(Images/hdbg.gif);
14     background-repeat:repeat-x repeat-y;
15     background-color:#d1dbe0;
16 }
17 .HeaderStyle th
18 {
19     padding: 5px;
20     color:#000000;
21 }
22 .HeaderStyle a
23 {
24     text-decoration:none;
25     color:#000000;
26     display:block;
27     text-align:left;
28     font-weight:normal;
29 }
30 .PagerStyle table
31 {
32     text-align:center;
33     margin:auto;
34 }
35 .PagerStyle table td
36 {
37     border:0px;
38     padding:5px;
39 }
40 .PagerStyle td
41 {
42     border-top: solid 1px #BFD3EE;
43 }
44 .PagerStyle a
45 {
46     color:#16387c;
47     text-decoration:none;
48     padding:2px 10px 2px 10px;
49     /*border-top:solid 1px #fff;*/
50     border-top:solid 1px #91a7b4;
51     border-right:solid 1px #91a7b4;
52     border-bottom:solid 1px #91a7b4;
53     /*border-left:solid 1px #fff;*/
54     border-left:solid 1px #91a7b4;
55 }
56 .PagerStyle span
57 {
58     font-weight:bold;
59     color:#16387c;
60     text-decoration:none;
61     padding:2px 10px 2px 10px;
62 }
63 /*RowStyles*/
64 .RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
65 {
66     padding: 5px;
67     border: solid 1px #BFD3EE;
68 }
69 .RowStyle td
70 {
71     background-color: #FFFFFF;
72     border:solid 1px #BFD3EE;
73 }
74 .AltRowStyle td
75 {
76     background-color: #EDF5FF;
77 }
78 .SelectedRowStyle td
79 {
80     background-color: #fcb814;
81 }

View Code

前台：

 1 <!DOCTYPE html>
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head runat="server">
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <title></title>
 7     <link href="App_Themes/office2003.css" rel="stylesheet" />
 8 </head>
 9 <body>
10     <form id="form1" runat="server">
11         <div>
12             <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="GridViewStyle" EnableModelValidation="True" PageSize="15" OnPageIndexChanged="GridView1_PageIndexChanged">
13                 <AlternatingRowStyle CssClass="AltRowStyle" />
14                 <HeaderStyle CssClass="HeaderStyle" />
15                 <RowStyle CssClass="RowStyle" />
16                 <PagerStyle CssClass="PagerStyle" />
17                 <SelectedRowStyle CssClass="SelectedRowStyle" />
18             </asp:GridView>
19         </div>
20     </form>
21 </body>
22 </html>

View Code

后台：

 1 protected void Page_Load(object sender, EventArgs e)
 2     {
 3         if (!Page.IsPostBack)
 4         {
 5             DataTable dt = new DataTable();
 6             dt.Columns.Add(new DataColumn("AccountNumber11111111111111111111"));
 7             dt.Columns.Add(new DataColumn("AccountName"));
 8             dt.Columns.Add(new DataColumn("City"));
 9             dt.Columns.Add(new DataColumn("Country"));
10             dt.Columns.Add(new DataColumn("AccountNumber1"));
11             dt.Columns.Add(new DataColumn("AccountName1"));
12             dt.Columns.Add(new DataColumn("City1"));
13             dt.Columns.Add(new DataColumn("Country1"));
14             dt.Columns.Add(new DataColumn("AccountNumber2"));
15             dt.Columns.Add(new DataColumn("AccountName2"));
16             dt.Columns.Add(new DataColumn("City2"));
17             dt.Columns.Add(new DataColumn("Country2"));
18             DataRow dr = dt.NewRow();
19             for (int i = 0; i < 60; i++)
20             {
21                 dr = dt.NewRow();
22                 dr["AccountName"] = "Test" + i;
23                 dr["AccountNumber11111111111111111111"] = "100" + i;
24                 dr["Country"] = "China" + i;
25                 dr["City"] = "Beijing" + i;
26                 dr["AccountName1"] = "Test" + i;
27                 dr["AccountNumber1"] = "100" + i;
28                 dr["Country1"] = "China" + i;
29                 dr["City1"] = "Beijing" + i;
30                 dr["AccountName2"] = "Test" + i;
31                 dr["AccountNumber2"] = "100" + i;
32                 dr["Country2"] = "China" + i;
33                 dr["City2"] = "Beijing" + i;
34                 dt.Rows.Add(dr);
35             }
36             GridView1.DataSource = dt;
37             GridView1.DataBind();
38         }
39     }

View Code