آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination

< nav aria-label="صفحه‌بندی" >
    < ul class="pagination" >
        < li > < a href="#1" > 1 < / a > < / li >
        < li > < a href="#2" > 2 < / a > < / li >
        < li > < a href="#3" > 3 < / a > < / li >
        < li > < a href="#4" > 4 < / a > < / li >
    < / ul >
< / nav >

.pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.pagination li {
    margin: 0 5px;
}

.pagination a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #007bff;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

.pagination .active a {
    background-color: #007bff;
    color: #fff;
    pointer-events: none;
    border: 1px solid #007bff;
}

< li class="active" > < a href="#3" > 3 < / a > < / li >

< nav aria-label="صفحه‌بندی" >
    < ul class="pagination" >
        < li > < a href="#prev" > « < / a > < / li >
        < li > < a href="#1" > 1 < / a > < / li >
        < li > < a href="#2" > 2 < / a > < / li >
        < li class="active" > < a href="#3" > 3 < / a > < / li >
        < li > < a href="#4" > 4 < / a > < / li >
        < li > < a href="#next" > » < / a > < / li >
    < / ul >
< / nav >

.pagination a {
    padding: 10px 15px;
    color: #007bff;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

< nav aria-label="صفحه‌بندی" >
    < ul class="pagination" >
        < li > < a href="#prev" aria-label="صفحه قبلی" > « < / a > < / li >
        < li > < a href="#1" aria-label="صفحه ۱" >1 < / a > < / li >
        < li > < a href="#2" aria-label="صفحه ۲" >2 < / a > < / li >
        < li class="active" > < a href="#3" aria-label="صفحه ۳" aria-current="page" > 3 < / a > < / li >
        < li > < a href="#4" aria-label="صفحه ۴" > 4 < / a > < / li >
        < li > < a href="#next" aria-label="صفحه بعدی" > » < / a > < / li >
    < / ul >
< / nav >

< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش ایجاد صفحه‌بندی با HTML و CSS" >
    < meta name="keywords" content="HTML, CSS, صفحه‌بندی, pagination" >
    < meta name="author" content="نام شما" >
    < title > آموزش صفحه‌بندی < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        .pagination {
            display: flex;
            list-style-type: none;
            padding: 0;
            margin: 0;
            justify-content: center;
        }
        .pagination li {
            margin: 0 5px;
        }
        .pagination a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #007bff;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .pagination a:hover {
            background-color: #007bff;
            color: #fff;
        }
        .pagination .active a {
            background-color: #007bff;
            color: #fff;
            pointer-events: none;
            border: 1px solid #007bff;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش ایجاد صفحه‌بندی < / h1 >
    < / header >
    < main >
        < nav aria-label="صفحه‌بندی" >
            < ul class="pagination" >
                < li > < a href="#prev" aria-label="صفحه قبلی" > « < / a > < / li >
                < li > < a href="#1" aria-label="صفحه ۱"> 1 < / a > < / li >
                < li > < a href="#2" aria-label="صفحه ۲"> 2 < / a > < / li >
                < li class="active" > < a href="#3" aria-label="صفحه ۳" aria-current="page" > 3 < / a > < / li >
                < li > < a href="#4" aria-label="صفحه ۴"> 4 < / a > < / li >
                < li > < a href="#next" aria-label="صفحه بعدی">» < / a > < / li >
            < / ul >
        < / nav >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >