HTML,CSS web网页分页样式,包含C#构建Html代码-罗分明网络博客

效果如下图

以下是html css代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分页样式代码</title>
</head>
<body>
    <style>
        .zzsc {
            margin: 5px auto;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page > a {
            float: left;
            padding: 5px 10px;
            cursor: pointer;
            user-select: none;
            text-decoration: none;
            color: black;
        }

        .page .pageItem {
            border: solid thin #DDDDDD;
            margin: 5px;
        }

        .page .pageItemActive {
            border: solid thin #0099FF;
            margin: 5px;
            background-color: #0099FF;
            color: white;
        }

        .page .pageItem:hover {
            border: solid thin #0099FF;
            background-color: #0099FF;
            color: white;
        }

        .page .pageItemDisable {
            border: solid thin #DDDDDD;
            margin: 5px;
            background-color: #DDDDDD;
        }
    </style>

    <div>
        <div>
            <a>首页</a>
            <a>&lt;上一页</a>
            <a>1</a>
            <a href="./KM?pId=2979328&amp;index=2">2</a>
            <a href="./KM?pId=2979328&amp;index=3">3</a>
            <a href="./KM?pId=2979328&amp;index=4">4</a>
            <a href="./KM?pId=2979328&amp;index=5">5</a>
            <a href="./KM?pId=2979328&amp;index=2">下一页&gt;</a>
            <a href="./KM?pId=2979328&amp;index=9">尾页</a>
        </div>
    </div>
</body>
</html>

下面是C#构建Html的方法

/// <summary>
/// 构建html分页
/// </summary>
/// <param name="pId">url参数</param>
/// <param name="pageIndex">第几页</param>
/// <param name="pageCount">总共多少页</param>
/// <param name="pageShowMax">展示多少页</param>
/// <returns></returns>
public string BuildPageHtml(int pId, int pageIndex, int pageCount, int pageShowMax = 5)
{
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("<div class=\"zzsc\">");
    sb.AppendLine("<div class=\"page\">");
    if (pageIndex <= 1)
    {
        pageIndex = 1;
        sb.AppendLine("<a class=\"pageItemDisable\">首页</a>");
        sb.AppendLine("<a class=\"pageItemDisable\">&lt;上一页</a>");
    }
    else
    {
        sb.AppendLine($"<a class=\"pageItem\" href=\"./KM?pId={pId}&index=1\">首页</a>");
        sb.AppendLine($"<a class=\"pageItem\" href=\"./KM?pId={pId}&index={pageIndex - 1}\">&lt;上一页</a>");
    }

    if (pageCount <= pageShowMax)
    {
        for (int i = 1; i <= pageCount; i++)
        {
            if (i == pageIndex)
            {
                sb.AppendLine($"<a class=\"pageItemActive\">{i}</a>");
            }
            else
            {
                sb.AppendLine($"<a class=\"pageItem\" href=\"./KM?pId={pId}&index={i}\">{i}</a>");
            }
        }
    }
    else
    {
        int pageShowStart = 1;
        if (pageIndex - Math.Ceiling(pageShowMax / 2.0) > 0)
        {
            pageShowStart = pageIndex - (int)Math.Ceiling(pageShowMax / 2.0) + 1;
            if (pageCount - pageShowStart - pageShowMax + 1 < 0)
            {
                pageShowStart = pageCount - pageShowMax + 1;
            }
        }
        for (int i = pageShowStart; i < pageShowStart + pageShowMax; i++)
        {
            if (i == pageIndex)
            {
                sb.AppendLine($"<a class=\"pageItemActive\">{i}</a>");
            }
            else
            {
                sb.AppendLine($"<a class=\"pageItem\" href=\"./KM?pId={pId}&index={i}\">{i}</a>");
            }
        }
    }
    if (pageIndex >= pageCount)
    {
        sb.AppendLine("<a class=\"pageItemDisable\">下一页&gt;</a>");
        sb.AppendLine("<a class=\"pageItemDisable\">尾页</a>");
    }
    else
    {
        sb.AppendLine($"<a class=\"pageItem\" href=\"./KM?pId={pId}&index={pageIndex + 1}\">下一页&gt;</a>");
        sb.AppendLine($"<a class=\"pageItem\" href=\"./KM?pId={pId}&index={pageCount}\">尾页</a>");
    }
    sb.AppendLine("</div></div>");
    return sb.ToString();
}

本文来自 www.luofenming.com