2010-04-05 60 views
2
my css : 

/* for greed view */ 
.pagination { 
      font-size: 80%; 
     } 

.pagination a { 
    text-decoration: none; 
    color: #15B; 
} 

.pagination a, .pagination span { 
    display: block; 
    float: left; 
    padding: 0.3em 0.5em; 
    margin-right: 5px; 
    margin-bottom: 5px; 
} 

.pagination .current { 
    background: #26B; 
    color: #fff; 
    border: solid 1px #AAE; 
} 

.pagination .current.prev, .pagination .current.next{ 
    color:#999; 
    border-color:#999; 
    background:#fff; 
} 

网格视图:CSS分页的GridView控件

<asp:Panel ID="Panel2" style="width:1208px; border-style: outset; border-width: 4px; " 
        runat="server" ScrollBars="Auto"> 
    <asp:GridView ID="GridView2" runat="server" 
     DataSourceID="SqlDataSource1" Width="100%" 
     ondatabound="GridView2_DataBound" CellPadding="4" ForeColor="#333333" onrowdatabound="GridView2_RowDataBound" 
     HorizontalAlign="Center" AllowPaging="True" PageSize="15" 
     onrowcreated="GridView2_RowCreated"> 
     <PagerSettings FirstPageText="&#1055;&#1077;&#1088;&#1074;&#1072;&#1103;" 
      LastPageText="&#1055;&#1086;&#1089;&#1083;&#1077;&#1076;&#1085;&#1103;&#1103;" 
      PageButtonCount="15" position="Bottom" /> 
     <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
     <PagerStyle CssClass="pagination" HorizontalAlign="Left" 
       VerticalAlign="Middle" 
      Font-Size="14pt" Wrap="True" BackColor="#284775" /> 

但.pagination .current不会出现当前页面上,我可以看看它的边界。 我在做什么错? (只要你喜欢,改变颜色/宽度)

+0

你甚至在你当前的页面上使用这个类。使用萤火虫的检查元素工具来找出任何元素上的现有样式 – Midhat 2010-04-05 06:14:43

+0

您可否提供更多有关该问题的上下文,例如HTML结构或更好,您遇到问题的页面的实际示例?如果没有HTML,很难诊断样式问题。 – digitaldreamer 2010-04-05 06:14:58

+0

我用萤火虫,所以我的.pagination .current不会出现。 GridView添加到第一篇文章 – Cynede 2010-04-05 06:16:28

回答

11

试试这个

.pagination 
{ 
    line-height: 26px; 
} 

.pagination span 
{ 
    padding: 5px; 
    border: solid 1px #477B0E; 
    text-decoration: none; 
    white-space: nowrap; 
    background: #547B2A; 
} 

.pagination a, 
.pagination a:visited 
{ 
    text-decoration: none; 
    padding: 6px; 
    white-space: nowrap; 
} 
.pagination a:hover, 
.pagination a:active 
{ 
    padding: 5px; 
    border: solid 1px #9ECDE7; 
    text-decoration: none; 
    white-space: nowrap; 
    background: #486694; 
} 

...

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left" CssClass="pagination" /> 

一个小例子上的号码将如何显示:http://jsfiddle.net/THVb9/2/

+0

上知道当前的寻呼机风格我已经失去了很多小时,试图找到它:)并修复它。 - 我很高兴你喜欢它。 – Aristos 2010-04-05 13:46:35