给AspNetPager控件和GridView的分页添加自定义样式

一、第三方控件AspNetPager分页控件的分页样式。

ASP.NET第三方控件AspNetPager分页控件在WEB开发中应用很广泛,如何给这个控件设置我们自己的样式效果呢,本文以网易风格分页效果为例为大家介绍如何给AspNetPager分页控件添加样式。

最终效果如下图:

 

 

样式部分:

    <style type="text/css">
       .anpager .cpb
        {
            background: #1F3A87 none repeat scroll 0 0;
            border: 1px solid #CCCCCC;
            color: #FFFFFF;
            font-weight: bold;
            margin: 5px 4px 0 0;
            padding: 4px 5px 0;
        }
        .anpager a
        {
            background: #FFFFFF none repeat scroll 0 0;
            border: 1px solid #CCCCCC;
            color: #1F3A87;
            margin: 5px 4px 0 0;
            padding: 4px 5px 0;
            text-decoration: none;
        }
        .anpager a:hover
        {
            background: #1F3A87 none repeat scroll 0 0;
            border: 1px solid #1F3A87;
            color: #FFFFFF;
        }
    </style>


代码部分:注本例没有处理任何事件,只是设置样式而已。

        <webdiyer:AspNetPager ID="aspNetPager" CssClass="anpager" PageSize="3" CurrentPageButtonClass="cpb"
            runat="server">
        </webdiyer:AspNetPager>

 

二、GridView分页的样式

技巧1:在分页区中改变当前页码的样式或高亮显示页码

一个简单的办法,就是为分页区配置如下的CSS样式。

<head runat="server">

    <title></title>

       <style type="text/css">   

              .cssPager span { background-color:#4f6b72; font-size:18px;}    

        </style>

</head>

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">

    <PagerStyle CssClass="cssPager" />

 

效果如下所示:

 

技巧2:增加分页区中页码之间的间隔

与技巧1一样,可以设置如下的CSS样式。但要注意,该样式旨在在修改分页区中的TD元素。因为页码是放置于TD元素之中。

head runat="server">

    <title></title>

       <style type="text/css">           

           .cssPager td

            {

                  padding-left: 4px;     

                  padding-right: 4px;    

              }

        </style>

</head>

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">

    <PagerStyle CssClass="cssPager" />

你可能感兴趣的:(给AspNetPager控件和GridView的分页添加自定义样式)