एचआर टॅग्ससह वेब पृष्ठांवर स्वारस्यपूर्ण शोधत असलेले रेखांकन करणे
आपल्याला आपल्या वेबसाइटवर आडवे, सेपरेटर-शैली रेषा जोडण्याची आवश्यकता असल्यास, आपल्याकडे काही पर्याय आहेत आपण आपल्या पृष्ठावरील त्या ओळींची प्रत्यक्ष प्रतिमा फायली जोडू शकता, परंतु अशा ब्राउझरच्या पुनर्प्राप्त करण्यासाठी आणि लोड करण्यासाठी आपल्या ब्राउझरची आवश्यकता आहे, ज्यामुळे साइट कार्यप्रदर्शनावर नकारात्मक प्रभाव पडेल.
आपण सीमाभागात जोडण्यासाठी सीएसएस सीडरची संपत्ती वापरु शकता जे एकतर शीर्षस्थानी किंवा एका तळाशी ओळी म्हणून काम करतात, प्रभावीपणे आपला विभाजक रेखा तयार करतात.
शेवटी, आपण क्षैतिज नियमांसाठी HTML घटक वापरू शकता -
क्षैतिज नियम घटक
आपण कधीही एखाद्या वेब पृष्ठावरील घटक ठेवले असल्यास, आपण कदाचित शोधले की ही रेखांप्रमाणे प्रदर्शित केलेली डीफॉल्ट पद्धत आदर्श नाही. याचा अर्थ असा की आपल्याला आपल्या साइटची कशी इच्छा आहे यानुसार या घटकांचे दृश्य स्वरूप समायोजित करण्यासाठी सीएसएस वर चालू करणे आवश्यक आहे.
एक मूलभूत एचआर टॅग ब्राउझरला तो प्रदर्शित करू इच्छित असलेल्या मार्गाने प्रदर्शित केला जातो आधुनिक ब्राऊझर सामान्यत: 100% रूंदीसह, 2px ची उंची, आणि रेखा तयार करण्यासाठी काळ्या रंगात 3D सीमा नसलेले अस्थिर एचआर टॅग करतात.
येथे एक मानक एचआर घटकाचे उदाहरण आहे किंवा आपण या प्रतिमेत पाहू शकता की आधुनिक ब्राऊझर्समध्ये अस्थिरता असलेले एचआर कसे दिसते
रुंदी आणि उंची ब्राउझरमध्ये सर्वसाधारण आहेत
वेब ब्राउजरवर सुसंगत अशी एकमेव शैली रुंदी आणि शैली आहे. हे परिभाषित करते की ही लाइन किती मोठी असेल. आपण रूंदी आणि उंची परिभाषित न केल्यास डीफॉल्ट रूंदी 100% आहे आणि डीफॉल्ट उंची 2px आहे.
या उदाहरणामध्ये मूळ घटकांपैकी 50% रुंदी आहे (लक्षात घ्या की खालील सर्व उदाहरणेमध्ये इनलाइन शैली समाविष्ट आहे. उत्पादन सेटिंगमध्ये, आपल्या सर्व पृष्ठांवर व्यवस्थापनाच्या सोयीसाठी ही शैली प्रत्यक्षात एक बाह्य शैली पत्रकात लिहिली जाईल):
शैली = "रुंदी: 50%;">
आणि या उदाहरणात उंची 2em आहे:
शैली = "उंची: 2em;">
सीमा बदलणे आव्हानात्मक असू शकते
आधुनिक ब्राउझरमध्ये, ब्राउझर सीमा समायोजित करुन रेखा निर्माण करते. म्हणून जर आपण शैली मालमत्तेच्या सीमारेषा काढून टाका, तर पृष्ठावर ओळ ओघ होईल. आपण पाहू शकता (चांगले, आपण काहीही दिसणार नाही, म्हणून ओळी अदृश्य होईल) या उदाहरणात:
शैली = "सीमा: काहीही नाही;">
सीमा आकार, रंग आणि शैली समायोजित केल्याने लाइन भिन्न दिसली जाईल आणि सर्व आधुनिक ब्राउझरमध्ये समान प्रभाव पडेल. उदाहरणार्थ, या प्रदर्शनात बॉर्डर लाल, डॅश, आणि 1 पीएक्स रुंद आहे:
शैली = "सीमा: 1 पिक्स डॅश # 000;">
परंतु आपण सीमा आणि उंची बदलली तर, शैली आधुनिक ब्राउझरमध्ये करतात त्यापेक्षा बरेच कालबाह्य ब्राउझर्समध्ये भिन्न दिसतात. आपण या उदाहरणात पाहू शकता, आपण आयई 7 आणि खाली (जर एक ब्राऊजर जे दुःखाने कालबाह्य झाले आहे आणि आता मायक्रोसॉफ्टने समर्थित नाही) मध्ये बघितले तर तेथे एक वेदना असणारा आतील ओळ आहे जी अन्य ब्राउझरमध्ये (IE8 आणि त्यासह) प्रदर्शित होत नाही. :
शैली = "उंची: 1.5 मी., रूंदी: 25 मि; सीमा: 1 पीएक्स घन # 000;">
त्या जुन्या ब्राउझरमध्ये खरोखरच वेब डिझाईन्समध्ये खरोखरच जास्त चिंता नाही, कारण ते अधिक आधुनिक पर्यायांसह हलविले गेले आहेत.
एका पार्श्वभूमी प्रतिमेसह सजावटीची ओळ बनवा
रंगांऐवजी, आपण आपल्या एचआरसाठी पार्श्वभूमी प्रतिमा परिभाषित करू शकता जेणेकरून आपल्याला हवे तसे दिसते परंतु तरीही आपल्या मार्कअपमध्ये अर्थपूर्णतेने प्रदर्शित केले जाते.
या उदाहरणामध्ये आम्ही तीन लहराती ओळींपैकी एक प्रतिमा वापरली आहे. त्याची पुनरावृत्ती न करता पार्श्वभूमी प्रतिमा म्हणून सेट करून, ती सामग्रीमध्ये एक ब्रेक तयार करते जी जवळजवळ आपल्याला पुस्तके दिसत आहे:
शैली = "उंची: 20 पिक्सेल; पार्श्वभूमी: #fff url (aa010307.gif) नो-पुनरावृत्ती स्क्रोल केंद्र; सीमा: काहीही नाही;">
एचआर घटकांचे रूपांतर
CSS3 सह, आपण आपल्या ओळी अधिक मनोरंजक बनवू शकता एचआर तत्व पारंपारिक एक क्षैतिज ओळ आहे, पण सीएसएस रुपांतरण मालमत्तेसह, आपण ते कसे दिसते ते बदलू शकता. एचआर ऍसिडवरील पसंतीचे परिवर्तन म्हणजे रोटेशन बदलणे.
आपण आपल्या एचआर घटक फिरवू शकता जेणेकरून ते फक्त थोडा विकर्ण असेल:
तास {
-मोझ-ट्रांसफॉर्मः फिरवा (10deg);
-webkit-transform: फिरवा (10deg);
-o-transform: फिरवा (10deg);
-एमएमएस-ट्रान्सफॉर्म: फिरवा (10deg);
रूपांतर: फिरवा (10deg);
}
किंवा आपण ते फिरवू शकता जेणेकरून ते पूर्णपणे उभे असेल:
तास {
-मोझ-ट्रांसफॉर्म: फिरवा (9 0 डिग्री);
-webkit-transform: फिरवा (90deg);
-o-transform: फिरवा (90deg);
-एमएमएस-ट्रान्सफॉर्मः फिरवा (9 0 डिग्री);
रूपांतर: फिरवा (9 0 डिग्री);
}
लक्षात ठेवा की हे डॉक्युमेंटमध्ये त्याच्या वर्तमान स्थानावर आधारित एचआरला फिरवते, जेणेकरून आपल्याला तो जिथे हवा आहे तो प्राप्त करण्यासाठी आपल्याला स्थिती समायोजित करण्याची आवश्यकता असू शकते. हे डिझाइनमध्ये अनुलंब ओळी जोडण्यासाठी याचा वापर करण्याची शिफारस करत नाही, परंतु मनोरंजक प्रभाव प्राप्त करण्याचा एक मार्ग आहे.
आपल्या पृष्ठांवर लाइन्स मिळविण्याचे आणखी एक मार्ग
काही लोक एचआर घटक वापरून ऐवजी इतर गोष्टींबरोबरच सीमा अवलंबून आहे. पण काहीवेळा एचआर हा बॉर्डर सेट करण्याचा प्रयत्न करण्यापेक्षा किती अधिक सोयीचा आणि वापरण्यास सोपा आहे. काही ब्राऊझरच्या बॉक्स मॉडेल प्रकरणांमुळे अगदी कडक प्रवाहाची सीमा वाढू शकते.