Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

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 से कैलेंडर कैसे बनाएं? CSS से कैलेंडर कैसे बनाएं?

    CSS कैलेंडर में महीना हेडर, दिन नाम पंक्ति, और तारीख ग्रिड होता है। ग्रिड display: inline-block और width: 13.6% (100%/7) से 7 कॉलम बनाता है। आज की तारीख हाइलाइटेड होती है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verda

  1. CSS से रिस्पॉन्सिव प्राइसिंग टेबल कैसे बनाएं? CSS से रिस्पॉन्सिव प्राइसिंग टेबल कैसे बनाएं?

    CSS से रिस्पॉन्सिव प्राइसिंग टेबल बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>    * {       box-sizing: border-box; &nb

  1. CSS और JavaScript से लिस्ट ग्रिड व्यू कैसे बनाएं? CSS और JavaScript से लिस्ट ग्रिड व्यू कैसे बनाएं?

    उदाहरण लिस्ट ग्रिड व्यू बनाने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <style>    * {       box-sizing: border-box;    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdan