FSR060523 :- Create Pagination with Html & Css

HTML-CSS Conversations
,
#1

Output :-

Pagination

2 Likes
#2
.pagination { display: inline-block; }

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

.pagination a.active {
background-color: blue;
color: white;
border: 1px solid blue;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

< 1 2 3 4 5 >
1 Like
#3
Pagination ul li { list-style-type: none; display: inline-block; padding: 20px; border: 2px solid gray; border-collapse: collapse; } ul a{ text-decoration: none; } ul a li{ border-collapse: collapse; }
1 Like
#4 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main{
            border: 0px solid red;
            width: 70%;
            height: 300px;
            margin: auto;
            
        }
        ul{
            border: 0px solid blue;
            padding-top: 15%;
            list-style-type: none;
            margin: auto;
            width: 70%;
        }
        li{

            display: inline-block;
            margin-left: -3px;
            color: #0084ff;
        }
        a{
            border: 2px solid gray;
            text-decoration: none;
            font-size: 30px;
            font-weight: bold;
            padding: 30px 40px;
        }
        a:hover{
            background-color: #0084ff;
            color: white;
        }
    </style>
</head>
<body>
    <main>
        <ul>
            <li>
                <a href="#1" target="_self">&lt;</a>
            </li>
            <li>
                <a href="#2" target="_self">1</a>
            </li>
            <li>
                <a href="#3" target="_self">2</a>
            </li>
            <li>
                <a href="#4" target="_self">3</a>
            </li>
            <li>
                <a href="#5" target="_self">4</a>
            </li>
            <li>
                <a href="#6" target="_self">5</a>
            </li>
            <li>
                <a href="#7" target="_self">&gt;</a>
            </li>
        </ul>
    </main>
    
</body>
</html>
2 Likes
#5 
<title>Pagination</title>
<style>

.list{
list-style-type: none;
font-size: larger;
padding: 3%;

}

.list-order{
display: inline-block;
padding: 3%;
font-size: 40px;
border: 1px solid black;

}
a{
text-decoration: none;
}
.list-order:hover{
background-color: rgb(111, 111, 160);
}

1 Like
#8
Pegination list .pegination li{ 
        display: inline-block;
        margin: 10px;
        padding: 5px;
        color: blue;
        border: 2px solid lightgrey;
        
    }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
</ul>
1 Like
#9 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination</title>
  <link rel="stylesheet" href="styles.css">
</head>
<style>
    .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.pagination a.arrow {
  font-size: 18px;
}

.pagination a.active {
  background-color: #333;
  color: #fff;
}

.pagination a:hover {
  background-color: #f5f5f5;
}

</style>
<body>
  <ul class="pagination">
    <li><a href="#" class="arrow">&#8249;</a></li>
    <li><a href="#" class="active">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" class="arrow">&#8250;</a></li>
  </ul>
</body>
</html>
1 Like
#10 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Session1 CSS</title>
    <script src="https://kit.fontawesome.com/b4bf7183bd.js" crossorigin="anonymous"></script>
    <style>
        ul li {
            display: inline-block;
            border: 1px solid grey;
            padding: 20px;
            margin: -2.5px;
        }

        ul li a {
            text-decoration: none;
            color: blue;
        }

        li:hover {
            background-color: #0084ff;
        }

        li:hover a {
            color: white
        }
    </style>
</head>

<body style="background-color: ;">
    <ul>
        <li><a href="#"><i class="fa-solid fa-less-than"></i></a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#"><i class="fa-solid fa-greater-than"></i></a></li>
    </ul>
</body>

</html>
1 Like
#12
1 Like
#14

very well students!!

1 Like
#15
Pagination ul{ padding:150px; margin: auto; 
    }
    li{
        display: inline-block;
        color: #0084ff; 
        margin:-2px; 
    }
    ul li a{
        border: 1px solid grey;
        font-size: 35px;
        font-weight: bolder;
        padding:30px;
        text-decoration: none;
        color: #0084ff;
    }
    ul li a:hover{
        color:white;
        background-color: #0084ff;
    }
    .lt_arr a{
        color:gray;
    }
    .main ul li a.active{
        background-color: #0084ff;
        color:white;
    }
</style>
#16
Pagination ul li{ display: inline-block; padding: 15px; }

ul li a{
text-decoration: none;
color: blue;
}
li:hover{
background-color: rgb(52, 46, 212);
}
li:hover a{
color: white;
}


<ul>
    <li><a href="#"> < </a></li>
    <li><a href="#"> 1 </a></li>
    <li><a href="#"> 2 </a></li>
    <li><a href="#"> 3 </a></li>
    <li><a href="#"> 4 </a></li>
    <li><a href="#"> 5 </a></li>
    <li><a href="#"> > </a></li>
</ul>
</body>
#17
1 Like
#18

https://codepen.io/yksealoj-the-styleful/pen/poxXvZd

1 Like
#19

<!doctype html>

ul {

color: rgb(20,110,190);

}

li {
float: left;
border: 1px solid black;
overflow: hidden;

}

li a {

color: rgb(20,110,190);
padding: 20px;
text-decoration: none;
font-size: 20px;
}

li a:hover {
background-color: rgb(20,110,190);
color: white;
}

1 Like
#20 
    <a href="#">&lt; &lt;</a>
     
    <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      
      <a href="#">&gt;&gt;</a>

    </div>

body{

border: 5px solid royalblue;
width: 25%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 400px;

}

.pagination a {
color: black;
padding: 10px 16px;
text-decoration: none;
background-color: blanchedalmond;
}

a:hover {
background-color: #1bb616;
border-radius: 30px;
}

#21

HTML PART

  • prev
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • next

    • CSS PART

    pagination{

    display: flex;
    justify-content: center;
    padding:0;
    margin: auto;
    }
    ul li a {
    border: 2px;
    font-size: 20px;
    font-weight: bolder;
    padding:20px;
    color: #fff;
    }

    li a:hover {
    color: lightgrey;
    }