कैसे बनाएं: बाहरी संदेश बनाएं

CSS के द्वारा बाहरी संदेश (Callout Message) का निर्माण सीखें

बाहरी संदेश

बाहरी संदेश आमतौर पर पृष्ठभूमि के नीचे स्थित होते हैं, उपयोगकर्ताओं को कुछ विशेष मामलों के लिए अधिसूचना देते हैं: सूचना/तकनीक, दिस्काउंट, कदम लेने की आवश्यकता आदि।

स्वयं को प्रयोग करें

बाहरी संदेश बनाएं

पहला कदम - HTML जोड़ें:

<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>कुछ पाठ...</p>
  </div>
</div>

अगर आप बाहरी संदेश को बंद करने की क्षमता चाहते हैं, तो एक <span> एलीमेंट, और उसके लिए एक onclick अभियान, जो इसके परिणामस्वरूप "मेरा पारिता दिखाएं" का अर्थ है, अर्थात डिव <div class="callout">。

सुझाव:HTML एंबीड का "&times;"अक्षर "x" बनाएं"。

दूसरा कदम - CSS जोड़ें:

बाहरी संदेश फ़ॉल्डर और बंद करने वाले बटन के लिए स्टाइल सेट करें:

/* बाहरी संदेश फ़ॉल्डर - पृष्ठभूमि में तटस्थ स्थिति */
.callout {
  पोज़िशन: तटस्थ;
  नीचे: 35px;
  दायाँ: 20px;
  बायाँ: 20px;
  महत्त्व: 300px;
{}
/* बाहरी संदेश शीर्षक */
.callout-header {
  पैडिंग: 25px 15px;
  पृष्ठभूमि: #555;
  फ़ॉन्ट-साइज़: 30px;
  रंग: श्वेत;
{}
/* बाहरी संदेश दिवार/मुख्य */
.callout-container {
  पैडिंग: 15px;
  पृष्ठभूमि-रंग: #ccc;
  रंग: काला
{}
/* बंद करने वाला बटन */
.closebtn {
  पोज़िशन: अभिकृत;
  ऊपर: 5px;
  दायाँ: 15px;
  रंग: श्वेत;
  फ़ॉन्ट-साइज़: 30px;
  कर्सर: संकेतक;
{}
/* माउस होवर पर रंग बदलना */
.closebtn:hover {
  रंग: प्रकाशीय ग्रे;
{}

स्वयं को प्रयोग करें

संबंधित पृष्ठ

तालीम:चेतावनी संदेश बनाना कैसे करें

तालीम:नोट बनाना कैसे करें