asp.net分页控件CSS

.aspx代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample3_DataPager.aspx.cs" Inherits="Sample_03_DataPager" %>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title></title>


     <style type ="text/css">
         div.divPager { padding:10px; background-color:#363636;}

         /*所有按钮的通用样式: 活动按钮,不活动按钮,页码,当前页码*/
         .divPager a, .divPager span span
         { display:block; float:left;
           padding:5px 8px 5px 8px; margin-left:4px;
           font-size:14px;
           color:#ddd;
           background-color:#630;
           border:1px solid #d88;  
           text-decoration:none;   }

         /*鼠标移入样式 (活动按钮,页码)*/
         .divPager a:hover
         { color:White; background-color:#a30; }

         /*当前页码*/
         .divPager span.pageNow
         { background-color:#a30; color:White; 
           font-weight:bold; border:1px solid #ddd;
             }

         /*不活动按钮*/
         .divPager span span
         { border:1px solid gray; color:#999; }

     </style>


 </head>
 <body>
     <form  runat="server">
     <div>
     <h2>用CSS控制分页控件的外观</h2>
         <asp:ListView ID="ListView1" runat="server" DataSourceID="AccessDataSource1"
              ItemPlaceholderID="itemholder"
         >


         <LayoutTemplate>
             <div runat="server" ></div>
         </LayoutTemplate>


         <ItemTemplate>
             <div style="padding:5px; border:1px solid silver;"><%#Eval("mo_name") %></div>
         </ItemTemplate>


         </asp:ListView>


         <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1"
          PageSize="1"   >
             <Fields>
                 <asp:NextPreviousPagerField ButtonType="link"
                  ShowFirstPageButton="true" 
                  ShowNextPageButton="false" 
                  RenderDisabledButtonsAsLabels ="true"   />


                  <asp:NumericPagerField   CurrentPageLabelCssClass="pageNow"
                   ButtonType="link" ButtonCount="6"
                   NextPageText=">>" PreviousPageText="<<"   />


                   <asp:NextPreviousPagerField ButtonType="link"
                    ShowPreviousPageButton="false"  ShowLastPageButton="true"
                    RenderDisabledButtonsAsLabels ="true"        />


             </Fields>
         </asp:DataPager>


         <div class ="divPager">
             <asp:DataPager ID="DataPager2" runat="server" PagedControlID="ListView1"
          PageSize="1"   >
             <Fields>
                 <asp:NextPreviousPagerField ButtonType="link"
                  ShowFirstPageButton="true" 
                  ShowNextPageButton="false" 
                  RenderDisabledButtonsAsLabels ="true"   />


                  <asp:NumericPagerField   CurrentPageLabelCssClass="pageNow"
                   ButtonType="link" ButtonCount="6"
                   NextPageText=">>" PreviousPageText="<<"   />


                   <asp:NextPreviousPagerField ButtonType="link"
                    ShowPreviousPageButton="false"  ShowLastPageButton="true"
                    RenderDisabledButtonsAsLabels ="true"        />


             </Fields>
         </asp:DataPager>

         <div style ="clear:both;"></div>    
         </div>

         <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
             DataFile="~/mdb/EV.mdb" SelectCommand="SELECT * FROM [TB_MONITOR]">
         </asp:AccessDataSource>
     </div>
     </form>
 </body>
 </html>
效果如下：
asp.net分页控件CSS
秒客网

asp.net分页控件CSS

相关文章
