কম্পিউটার টিউটোরিয়াল

CSS দিয়ে বেসিক লিস্টকে লিস্ট গ্রুপে রূপান্তর করার পদ্ধতি


উদাহরণ

নিচের কোডটি CSS ব্যবহার করে বেসিক লিস্টকে "লিস্ট গ্রুপ"-এ রূপান্তর করার পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
    box-sizing: border-box;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul li {
    border: 1px solid rgb(0, 0, 0);
    background-color: #f6f6f6;
    padding: 12px;
    font-size: 18px;
}
</style>
</head>
<body>
<h1>List Group Example</h1>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Cheetah</li>
<li>Jaguar</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS দিয়ে বেসিক লিস্টকে লিস্ট গ্রুপে রূপান্তর করার পদ্ধতি


  1. CSS দিয়ে রেসপন্সিভ টেবিল তৈরি করার পদ্ধতি

  2. CSS দিয়ে ক্যালেন্ডার তৈরি করার পদ্ধতি

  3. CSS দিয়ে রেসপন্সিভ প্রাইসিং টেবিল তৈরি

  4. CSS ও JavaScript দিয়ে লিস্ট গ্রিড ভিউ (List Grid View) তৈরি করা