সিএসএস এর বিভিন্ন প্রোপার্টি যেমন - display, float, border, background-color ইত্যাদি প্রোপার্টি ব্যবহার করে খুব সহজেই বিভিন্ন ডিজাইনের পত্রাঙ্কন বা Pagination তৈরি করা যায়। নিচে পত্রাঙ্কন বা Pagination এর একটি ব্যাবহারিক উদাহরন দেখুন।
ওয়েব পেজে কত গুলো এইচটিএমএল লিংককে সিএসএস ব্যবহার করে স্টাইল করে Pagination তৈরি করা হয়।নিচে একটি সাধারণ Pagination এর উদাহরণ দেখুন, এখানে Pagination তৈরি করার জন্য এইচটিএমএল লিংক অর্থাৎ <a> ট্যাগ ব্যাবহার করা হয়েছে।
ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের কোড গুলো দেখুন।
<style> .pagination { display:inline-block; } .pagination a { color:black; float:left; padding:8px 16px; text-decoration:none; } .pagination a:hover { background-color:red; } </style> <div class="pagination"> <a href="#">«</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div>
নিচে pagination টি দেখুন, এখানে :active এবং :hovar সিলেক্টর যোগ করা হয়েছে। সাথে সিএসএস এর border-radius প্রোপার্টি ব্যাবহার করে আরও আকর্ষণীয় করে তলা হয়েছে।
border-radius প্রোপার্টি ব্যাবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।
<style> .pagination1{ display:inline-block; } .pagination1 a{ color:black; float:left; padding:8px 16px; text-decoration:none; border-radius: 4px; } .pagination1 a:hover{ background-color:#cccccc; } .pagination1 a.active{ background-color:#ff9999; } </style> <div class="pagination1"> <a href="#">«</a> <a href="#">1</a> <a href="#">2</a> <a class="active" href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div>
pagination তৈরি করতে সিএসএস এর transition প্রোপার্টি ব্যাবহার করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।
transition প্রোপার্টি ব্যাবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।
<style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a:hover { background-color: #cccccc; transition: background-color .5s; } .pagination a.active { background-color: #ff9999; } </style> <div class="pagination"> <a href="#">«</a> <a href="#">1</a> <a href="#">2</a> <a class="active" href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div>
সিএসএস এর border ও margin প্রোপার্টি ব্যাবহার করে pagination টিকে একটি ভিন্ন বৈশিষ্ট প্রদান করা যায়। নিচে এর ব্যাবহারিক উদাহরন দেখুন।
সিএসএস এর border ও margin প্রোপার্টি ব্যাবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।
<style> .pagination { display:inline-block; } .pagination a { color:black; float:left; margin: 0 4px; padding:8px 16px; text-decoration:none; border: 1px solid #bbbbbb; } .pagination a:hover { background-color:#cccccc; transition: background-color .5s; } .pagination a.active { background-color:#ff9999; border: 1px solid red; } </style> <div class="pagination3"> <a href="#">«</a> <a href="#">1</a> <a href="#">2</a> <a class="active" href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div>
সিএসএস এর font-size প্রোপার্টি ব্যাবহার করে pagination এর আকার নিয়ন্ত্রন করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।
সিএসএস এর font-size প্রোপার্টি ব্যবহার করে ওপরে প্রদর্শিত Pagination টি তৈরি করার জন্য নিচের এইচটিএমএল ও সিএসএস কোড গুলো দেখুন।
<style> .pagination { display:inline-block;} .pagination a { color:black; font-size:1.6em; float:left; margin: 0 4px; padding:8px 16px; text-decoration:none; border: 1px solid #bbb; } .pagination a:hover { background-color:#cccccc; transition: background-color .5s; } .pagination a.active { background-color:#ff9999; border: 1px solid red; } </style> <div class="pagination4"> <a href="#">«</a> <a href="#">1</a> <a href="#">2</a> <a class="active" href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div>