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;    }    div {       margin-bottom: 15px;       padding: 4px 12px;       font-size: 18px;    }    .danger {       background-color: #ffdddd;       border-left: 6px solid #f44336;    }    .success {       background-color: #ddffdd;       border-left: 6px solid #4CAF50;    }    .info {       background-color: #e7f3fe;       border-left: 6px solid #2196F3;    } </style> </head> <body> <h1 style="text-align: center;">Notes Example</h1> <div class="danger"> <p><strong>Danger!</strong>Operation may damage your computer</p> </div> <div class="success"> <p><strong>Success!</strong> Operation has been performed successfully</p> </div> <div class="info"> <p><strong>Info!</strong> Need more resources to perform this operation</p> </div> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS से नोट्स कैसे बनाएं?


  1. 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

  1. CSS से 4-कॉलम लेआउट ग्रिड कैसे बनाएं? CSS से 4-कॉलम लेआउट ग्रिड कैसे बनाएं?

    उदाहरण CSS से 4-कॉलम लेआउट ग्रिड बनाने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI&

  1. CSS से चेकमार्क/टिक कैसे बनाएं? CSS से चेकमार्क/टिक कैसे बनाएं?

    हम CSS का उपयोग करके एक कस्टमाइज़्ड चेकमार्क बना सकते हैं। निम्न उदाहरण इस प्रभाव को दर्शाते हैं: उदाहरण 1 (प्सूडो-एलिमेंट से) <!DOCTYPE html> <html> <style> div {    margin: 2%;    position: relative;    width: 40px;    height: 40px;