कभी-कभी अपने वेब पेज का प्रवाह बनाते समय, आप अपनी सामग्री को अलग-अलग भागों में विभाजित करने का कोई तरीका खोजना चाहेंगे। इस लेख में, हम HTML में क्षैतिज नियम और इसे अपने मार्कअप में डालने के तरीके के बारे में जानेंगे ताकि आप अपने वेब पेज को अधिक आकर्षक और उपयोगकर्ता के अनुकूल बना सकें।

<hr> HTML तत्व को CSS का उपयोग करके किसी अन्य HTML तत्व की तरह ही स्टाइल किया जा सकता है। कन्वेंशन इसके लिए एक सेल्फ-क्लोजिंग टैग (

मुझे लगता है कि यह देखने के लिए सीएसएस के साथ प्रयोग करना सबसे अच्छा है कि यह क्या करता है। निम्नलिखित कोड सैंडबॉक्स कुछ सीएसएस के साथ एक बहुत ही बुनियादी HTML पृष्ठ दिखाता है जिसका उपयोग HTML

    <शीर्षक>घंटा  <शैली> बॉडी {फ़ॉन्ट-फ़ैमिली:'रोबोटो मोनो'; } एनएवी {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:रो रैप; औचित्य-सामग्री:अंतरिक्ष-बीच; चौड़ाई:100%; ऊंचाई:50 पीएक्स; मार्जिन-बाएं:20px; } एनएवी> डिव {डिस्प्ले:फ्लेक्स; औचित्य-सामग्री:अंतरिक्ष-चारों ओर; संरेखित-आइटम:केंद्र; चौड़ाई:40%; } एनएवी> डिव> ए { टेक्स्ट-डेकोरेशन:कोई नहीं; रंग काला; } एनएवी> ए { टेक्स्ट-डेकोरेशन:कोई नहीं; फ़ॉन्ट-संस्करण:स्मॉल-कैप; संरेखित करें-स्व:केंद्र; } घंटा { सीमा:कोई नहीं; बॉर्डर-टॉप:5px डबल ब्लैक; रंग:#333; अतिप्रवाह:दृश्यमान; पाठ-संरेखण:केंद्र; ऊंचाई:5 पीएक्स; } घंटा ::के बाद { सामग्री:'😀😀😀😀'; पैडिंग:0 4px; स्थिति:रिश्तेदार; शीर्ष:-18 पीएक्स; पृष्ठभूमि:#fff; } खंड {चौड़ाई:100%; प्रदर्शन:फ्लेक्स; संरेखित-आइटम:केंद्र; मार्जिन:0 ऑटो; } अनुभाग> div {चौड़ाई:50%; प्रदर्शन:फ्लेक्स; औचित्य-सामग्री:केंद्र; } अनुभाग> h1 {चौड़ाई:50%; पाठ-संरेखण:केंद्र; } अनुभाग> div> img {ऊंचाई:350px; ऑब्जेक्ट-फिट:कवर; } #diff-style-hr { सीमा:कोई नहीं; बॉर्डर-टॉप:3पीएक्स डॉटेड ब्लैक;रंग:#333; अतिप्रवाह:दृश्यमान; पाठ-संरेखण:केंद्र; ऊंचाई:5 पीएक्स; } #diff-style-hr::after { सामग्री:""; पैडिंग:0; } .लोअर-कंटेनर {डिस्प्ले:फ्लेक्स; फ्लेक्स-फ्लो:रो रैप; } .लोअर-मेन {डिस्प्ले:फ्लेक्स; फ्लेक्स-दिशा:स्तंभ; चौड़ाई:40%; मार्जिन:0 ऑटो; } h4 { align-self:flex-start; }     
 <मुख्य> <अनुभाग> 
  
 
मैं एक व्यवसाय का नाम हूं
  
 
 <सेक्शन क्लास ="लोअर-मेन"> 
मैं एक हेडलाइन हूं
 

 लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसामस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो यूट कॉन्सेक्वेंटुर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसामस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो और कॉन्सेक्वेंटूर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर।
  <सेक्शन क्लास ="लोअर-मेन"> 
मैं एक हूं हेडलाइन
 

लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसामस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो यूट कॉन्सेक्वेंटुर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसामस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो और कॉन्सेक्वेंटूर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर।
  <सेक्शन क्लास ="लोअर-मेन"> 
मैं एक हूं हेडलाइन
 

लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसामस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो यूट कॉन्सेक्वेंटुर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसामस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो और कॉन्सेक्वेंटूर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर।
  <सेक्शन क्लास ="लोअर-मेन"> 
मैं एक हूं हेडलाइन
 

लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसामस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो यूट कॉन्सेक्वेंटुर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर। डेलेनिटी ईयूस रेम उल्लम वेलिट प्रोविडेंट इटैक, टेनेटुर इवनिएट, एक्यूसमस डोलोरम रेरम इप्सम फैसिलिस कॉन्सेक्वेटुर ओडियो यूट कॉन्सेक्वेंटुर वॉलुपेट डोलोरेमक्यू एलिगेंडी एरर।
  
   

 
 

 अच्छा काम! अब आपके पास 
 का उपयोग करके एक शानदार दिखने वाली साइट बनाने के लिए आवश्यक टूल हैं।