gridview布局_grid css

2022-11-09 16:54:51 浏览数 (2)

大家好,又见面了,我是你们的朋友全栈君。

页面代码:

代码语言:javascript复制
01.<asp:GridView ID="gvCustomres" runat="server"  
02.    DataSourceID="customresDataSource"    
03.    AutoGenerateColumns="False"  
04.    GridLines="None"  
05.    AllowPaging="true"  
06.    CssClass="mGrid"  
07.    PagerStyle-CssClass="pgr"  
08.    AlternatingRowStyle-CssClass="alt">  
09.    <Columns>  
10.        <asp:BoundField DataField="CompanyName" HeaderText="Company Name" />  
11.        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />  
12.        <asp:BoundField DataField="ContactTitle" HeaderText="Contact Title" />  
13.        <asp:BoundField DataField="Address" HeaderText="Address" />  
14.        <asp:BoundField DataField="City" HeaderText="City" />  
15.        <asp:BoundField DataField="Country" HeaderText="Country" />  
16.    </Columns>  
17.</asp:GridView>  
18.<asp:XmlDataSource ID="customresDataSource" runat="server" DataFile="~/App_Data/data.xml"></asp:XmlDataSource> 

css代码

代码语言:javascript复制
01..mGrid {    
02.    width: 100%;    
03.    background-color: #fff;    
04.    margin: 5px 0 10px 0;    
05.    border: solid 1px #525252;    
06.    border-collapse:collapse;    
07.}   
08..mGrid td {    
09.    padding: 2px;    
10.    border: solid 1px #c1c1c1;    
11.    color: #717171;    
12.}   
13..mGrid th {    
14.    padding: 4px 2px;    
15.    color: #fff;    
16.    background: #424242 url(grd_head.png) repeat-x top;    
17.    border-left: solid 1px #525252;    
18.    font-size: 0.9em;    
19.}   
20..mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }   
21..mGrid .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }   
22..mGrid .pgr table { margin: 5px 0; }   
23..mGrid .pgr td {    
24.    border-width: 0;    
25.    padding: 0 6px;    
26.    border-left: solid 1px #666;    
27.    font-weight: bold;    
28.    color: #fff;    
29.    line-height: 12px;    
30. }      
31..mGrid .pgr a { color: #666; text-decoration: none; }   
32..mGrid .pgr a:hover { color: #000; text-decoration: none; }  

完整代码下载:

http://download.csdn.net/detail/goodshot/8122819

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

0 人点赞