首页 > 代码库 > asp.net分页控件CSS
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 id="form1" runat="server">
<div>
<h2>用CSS控制分页控件的外观</h2>
<asp:ListView ID="ListView1" runat="server" DataSourceID="AccessDataSource1"
ItemPlaceholderID="itemholder"
>
<LayoutTemplate>
<div runat="server" id="itemholder"></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