কম্পিউটার

কিভাবে CSS দিয়ে পেজিনেশন তৈরি করবেন?


নিম্নলিখিত হল CSS-এর সাথে পৃষ্ঠা সংখ্যা তৈরি করার কোড -

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,*::before,*::after{
   box-sizing: border-box;
}
.pagePagination{
   margin: 15px;
   display: inline-block;
   background-color: rgb(39, 39, 39);
   overflow: auto;
   height: auto;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   color: rgb(178, 137, 253);
   text-decoration: none;
   font-size: 17px;
}
.links:hover {
   background-color: rgb(100, 100, 100);
}
.selected{
   background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h1> Page pagination example </h1>
<div class="pagePagination">
<a class="links" href="#">«</a>
<a class="links selected" href="#">1</a>
<a class="links" href="#">2</a>
<a class="links" href="#">3</a>
<a class="links" href="#">4</a>
<a class="links" href="#">5</a>
<a class="links" href="#">»</a>
</div>
<h2>Hover on the above numbers to see effect</h2>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে পেজিনেশন তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি কুপন তৈরি করবেন?

  2. কিভাবে CSS দিয়ে তীর তৈরি করবেন?

  3. কিভাবে CSS দিয়ে চ্যাট মেসেজ তৈরি করবেন?

  4. কিভাবে CSS দিয়ে একটি বিভাগ কাউন্টার তৈরি করবেন?