हम HTML और सीएसएस "हबराब्रा" को संशोधित करते हैं

नमस्ते



चूँकि "हब्रहाब" में एक कोड भी होता है, मैं उस हिस्से का एक हल्का संशोधन करता हूँ जिसे मैं दिन में दर्जनों बार नियंत्रित और डाउनलोड कर सकता हूँ। हम "लाइव" अनुभाग के लिए कोड को संशोधित करेंगे।



कैट HTML और सीएसएस लिस्टिंग के तहत।

स्रोत कोड

आइए इनसाइड्स में खुदाई करें। अब अनुभाग "लाइव" तत्वों के निम्नलिखित सेट द्वारा वर्णित किया गया है (मैं सीधे ब्लॉग पृष्ठ से एक लाइव उदाहरण लेता हूं):

<div class = "live_section">

<div class = "live_section_navtext_title">

<a href = "naz.habrahabr.ru"> <img src = "i / small_default_userpic.gif" सीमा = "0" alt = "प्रोफ़ाइल देखें" शीर्षक = "प्रोफ़ाइल देखें"> </a>

<a href= प्राथमिकता naz.habrahabr.ru »class= निर्धारितलाइव_सेंक्शन_निक्कीनाम> > बाज </a>

<a href= मूल्यांकन www.habrahabr.ru/blog/google »class= निर्धारितलाइव_सेंचे_नवटेक्स्ट_टिटेल_सैको> > Google </a> /

<a href=fore www.habrahabr.ru/blog/google/17315.html#comment217245 »class= selectlive_section_navtext_title> > Google ने Microsoft पर एकाधिकार करने का आरोप लगाया

22 </ span>

</ div> ...

</ Div>

कोड में क्या गलत है?

1. कोड वर्ग के नाम के साथ अतिभारित है जो बहुत लंबा है।

2. सीएसएस में सेट होने के बजाय उपयोगकर्ता नाम के आगे का मार्कर <img> तत्व का उपयोग करके डाला जाता है। लाइव पर प्रत्येक उपयोगकर्ता नाम के बगल में कोड का यह टुकड़ा दोहराया जाता है।

3. HTML खराब पढ़ी जाती है।

4. CSS को खराब तरीके से पढ़ा जाता है और स्टाइलशीट पर फैलाया जाता है।

नया कोड

हम जानकारी के तर्क से निपटेंगे

लाइव रिकॉर्डिंग क्या है? वास्तव में, यह जानकारी है कि किसने, कहां और क्या टिप्पणी की। इसके अतिरिक्त, टिप्पणीकारों की कुल संख्या इंगित की गई है। यह जानकर, मैं कोड तत्वों के लिए नए वर्ग के नाम चुनता हूं।



इसलिए, मैं कक्षा = "कौन" को उपयोगकर्ता के लिंक, वर्ग = "जहां" को ब्लॉग लिंक पर असाइन करता हूं, और विषय वर्ग को ब्लॉग के अंदर एक विशिष्ट विषय के लिंक के रूप में नामित करता हूं।



यह टिप्पणियों की कुल संख्या से निपटने के लिए बनी हुई है: वर्ग = "कुल" और संपूर्ण प्रविष्टि के लिए सामान्य कंटेनर का नाम - वर्ग = "प्रविष्टि" ।



अगला, तुरंत लिंक के व्यवहार का मूल्यांकन करें। इसलिए, जब आप लिंक पर होवर करते हैं, तो वे पृष्ठभूमि रंग और टेक्स्ट रंग बदलते हैं। सामान्य बात है। हालांकि, चूंकि मैं इसे सीएसएस में सेट करके पृष्ठभूमि में उपयोगकर्ता के मार्कर को छिपाने जा रहा हूं, इसलिए मुझे इस लिंक पर मंडराते समय मार्कर के विशिष्ट व्यवहार को ध्यान में रखना होगा। इस मामले में वॉलपेपर को <a> तत्व पर नहीं लटकाया जा सकता है। इसे <span> में बैकग्राउंड इमेज को बिल्कुल <span> से लटकाकर, और लिंक की पृष्ठभूमि और रंग को लिंक से ही बदलना आवश्यक है। यहाँ HTML आपको इसके लिए आवश्यक है:

<div class = "live_section">

<div class = "entry">

<span class = "who"> <a href="..."> उपयोगकर्ता नाम </a> </ span> →

<a class= चुनी गई href="..."> Google </a> /

<a class= chosentopic> href = "..."> Google ने Microsoft पर एकाधिकार का आरोप लगाया </a> <span class = "total"> 22 </ span>

</ Div>



</ Div>

अब हमारे पास तैयार किया गया HTML कोड है, जो अधिक पठनीय, आसान है। इसे स्टाइल से सजाएं।

नई शैली

शुरुआत करते हैं जनक से। कुछ मिनटों तक शैलियों में रमने के बाद, मैं अभी भी उन्हें एक साथ रखने में कामयाब रहा। यहां हमें यह लिखना होगा कि हम बाद में दोहराएं नहीं, लेकिन संपत्ति के उत्तराधिकार का उपयोग करें:

.live_section

गद्दी: 20px 20px 7px 20px;

font-family: tahoma, arial;

फ़ॉन्ट-आकार: 12 पीएक्स;

}

अब हम लाइव रिकॉर्डिंग के लिए नीचे इंडेंट सेट करेंगे:

.live_section .entry {

मार्जिन-बॉटम: 1ex;

}

हम सभी तीन लिंक के लिए सामान्य गुणों का वर्णन करते हैं:

.live_section की अवधि .who a , .live_section .where , .live_section .jpg। {{

मार्जिन-बॉटम: 1ex;

लाइन-ऊँचाई: 1.35em;

}

और अब हम विशिष्ट गुण निर्दिष्ट करेंगे:

.live_section .who {

पैडिंग-लेफ्ट: 16 पीएक्स;

पृष्ठभूमि: url (i / small_default_userpic.gif) 0 50% नो-रिपीट;

}

.live_section .who a , .live_section .where {

रंग: # 999;

}

.live_section .topic {

रंग: # 666;

}

लिंक के व्यवहार का वर्णन करने का समय:

.live_section स्पैन। जो a: hover , .live_section a.where: hover {

पाठ-सजावट: कोई नहीं;

पृष्ठभूमि: # ff6666;

रंग: सफेद;

}

.live_section.topic: होवर {

पाठ-सजावट: कोई नहीं;

पृष्ठभूमि: # 66cc66;

रंग: सफेद;

}

और अंत में, हम टिप्पणियों की कुल संख्या को सजाएंगे:

स्पैनटोटल {

रंग: # CC0000;

}

मेरी राय में, यह अच्छी तरह से निकला: एक जीवित उदाहरण । कोड आसान और अधिक समझ में आ गया है।



UPD : व्लादिमीर Agafonkin का एक वैकल्पिक संस्करण ।



PS उदाहरण में, अप्रासंगिक पृष्ठ तत्वों को जानबूझकर हटा दिया जाता है। के लिए सुविधा।