मानवअधिकार (क्षैतिज नियम) ट्याग स्टाइल गर्दै

एचआर ट्यागहरूसँग वेब पृष्ठहरूमा रोचक हेर्ने लाइनहरू बनाउनुहोस्

यदि तपाइँलाई क्षैतिज थप्न आवश्यक छ भने, तपाइँका वेबसाइटहरूमा विभाजक-शैली रेखाहरू छन्, तपाईं सँग केही विकल्पहरू छन्। तपाईंले ती रेखाहरूको वास्तविक छवि फाइलहरू तपाईंको पृष्ठमा थप्न सक्नुहुनेछ, तर यसले तपाईको ब्राउजरको पुन: प्राप्त गर्न र ती फाईलहरू लोड गर्न आवश्यक पर्दछ, जुन साइट प्रदर्शनमा नकारात्मक प्रभाव हुन सक्छ।

तपाईँले सीएसएस सीमाना सम्पत्ति प्रयोग गर्न सिमानाहरू थप्न सक्नुहुनेछ जुन रेखाहरूमा वा माथिको शीर्षमा वा एक तत्वको तलमा कार्य गर्दछ, प्रभावकारी रूपमा तपाइँको विभागीक रेखा सिर्जना गर्नुहोस्।

अन्तमा, तपाइँ तेर्सो नियमको लागि एचटीएमएल तत्व प्रयोग गर्न सक्नुहुन्छ

तेर्सो नियम तत्व

यदि तपाईंले वेब पृष्ठमा एक तत्वलाई कहिल्यै राख्नुभयो भने, तपाईंले सम्भवतः पत्ता लगाउनुभयो कि यी रेखाहरू प्रदर्शन गरिएका पूर्वनिर्धारित तरिका आदर्श छैनन्। यसको अर्थ तपाईँले यी तत्वहरूको भिजुअल उपस्थिति समायोजन गर्न CSS लाई बदल्न आवश्यक छ कि तपाइँ कसरी आफ्नो साइट हेर्न चाहानुहुन्छ।

एक आधारभूत मानवअधिकार ट्यागले ब्राउजरलाई प्रदर्शन गर्न चाहानु भएको तरिकाले प्रदर्शित गर्दछ। आधुनिक ब्राउजरहरूले सामान्यतया अज्ञात मानव संसाधन ट्यागहरू 100% चौडाई, 2px को उचाई, र रेखामा सिर्जना गर्नका लागि 3D सीमाको चौडाई प्रदर्शन गर्दछ।

यहाँ एक मानक एचआर तत्वको उदाहरण हो वा तपाईं यस छविमा हेर्न सक्नुहुनेछ आधुनिक ब्राउजरमा कसरी अस्थिर एचआर देखिन्छ।

चौडाई र उचाइ ब्राउजरहरू भरपर्दो छन्

वेब ब्राउजरहरू मार्फत एकमात्र शैलीहरू चौडाई र शैली हुन्। यो परिभाषित कसरी ठूलो हुनेछ। यदि तपाईंले चौडाइ र उचाइ परिभाषित गर्नुहुन्न भने पूर्वनिर्धारित चौडाइ 100% हो र पूर्वनिर्धारित उचाइ 2px हो।

यस उदाहरणमा चौडाई अभिभावक तत्वको 50% हो। (तलका यी उदाहरणहरूलाई इनलाइन शैलीहरूमा समावेश गर्नुहोस्। उत्पादन सेटिङमा, यी शैलीहरू तपाईंको सबै पृष्ठहरूमा व्यवस्थापनको आरामको लागि बाह्य शैली पानामा लेख्न सकिन्छ):

style = "width: 50%;">

र यस उदाहरणमा उचाइ 2em छ:

style = "height: 2em;">

सीमाहरू परिवर्तन गर्न चुनौतीपूर्ण हुन सक्छ

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

style = "border: none;">

किनारा आकार, रङ र शैली समायोजनले लाइनको दृश्य फरक बनाउँछ र सबै आधुनिक ब्राउजरहरूमा उस्तै प्रभाव पार्दछ। उदाहरणका लागि, यो प्रदर्शनमा बोर्डो रातो, धरातल, र 1px चौडाई:

style = "border: 1px dashed # 000;">

तर यदि तपाईं सीमा र उचाइ परिवर्तन गर्नुहुन्छ भने, धेरै ब्राउजरहरूमा स्टाइलहरू आधुनिक ब्राउजरहरूमा भन्दा फरक फरक देखिन्छ। यदि तपाईं यो उदाहरणमा देख्न सक्नुहुनेछ भने यदि IE7 र तल देख्नुहुन्छ (तल ब्राउजर जो विस्मरणीय हो र अब माइक्रोसफ्ट द्वारा समर्थित छैन) एक बेभेले भित्ता रेखा हो जुन अन्य ब्राउजरमा प्रदर्शन गर्दैन (IE8 र माथि सहित) :

style = "height: 1.5em; width: 25em; border: 1px solid # 000;">

ती एन्क्वार्ड गरिएका ब्राउजरहरू आज वेब डिजाइनमा एक चिन्ताको कुरा होइनन्, किनकि तिनीहरू धेरैजसो आधुनिक विकल्पहरूसँग बदलिन्छन्।

पृष्ठभूमि छविको साथ एक सजावटी रेखा बनाउनुहोस्

रङको सट्टा, तपाइँ आफ्नो मानव संसाधनको लागि पृष्ठभूमि छवि परिभाषित गर्न सक्नुहुन्छ ताकि तपाईले यसलाई चाहानु भएको जस्तो देखिन्छ, तर अझै पनि तपाइँको मार्कअपमा उपप्रथम प्रदर्शन गर्दछ।

यस उदाहरणमा हामीले एउटा छवि प्रयोग गर्यौं जुन तीन लम्बाई रेखाहरू हो। पृष्ठभूमिमा छविको रूपमा यो दोहोरो रूपमा सेट गरेर, यो सामग्रीमा एक ब्रेक सिर्जना गर्दछ जुन लगभग किताबहरू देख्नुहुन्छ जस्तो देखिन्छ:

style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">

एचआर तत्वहरू परिवर्तन गर्दै

CSS3 को साथ, तपाईं आफ्नो रेखाहरु लाई अझ रोचक बनाउन सक्नुहुन्छ। मानव संसाधन तत्व पारंपरिक रूपमा क्षैतिज रेखा हो, तर सीएसएसले सम्पत्ति परिवर्तन गर्दछ, तपाई परिवर्तन गर्न सक्नुहुन्छ कि उनीहरु कसरी हेर्छन्। HR तत्वमा मनपर्ने परिवर्तन रोटेशन परिवर्तन गर्न हो।

तपाईं आफ्नो एचआर तत्व घुमाउन सक्नुहुन्छ ताकि यो केवल केहि विकर्ण छ।

घण्टा {
-मोज-परिवर्तन: घुमाउनुहोस् (10 डीडी);
वेब-ट्रांसफर: घुमाउनुहोस् (10 डीडी);
-ओ-परिवर्तन: घुमाउनुहोस् (10 डीडी);
-एमएम-परिवर्तन: घुमाउनुहोस् (10 डीडी);
परिवर्तन गर्नुहोस्: घुमाउनुहोस् (10 डीडी);
}

वा तपाइँ यसलाई घुमाउन सक्नुहुन्छ ताकि यो पुरा तरिकाले ऊर्ध्वाधर हो।

घण्टा {
-मोज-परिवर्तन: घुमाउनुहोस् (9 0 डीडी);
वेबकिट-परिवर्तन: घुमाउनुहोस् (9 0 डीडी);
-ओ-परिवर्तन: घुमाउनुहोस् (9 0 डीडी);
-एमएम-परिवर्तन: घुमाउनुहोस् (9 0 डीडी);
परिवर्तन गर्नुहोस्: घुमाउनुहोस् (9 0 डीडी);
}

याद गर्नुहोस् कि यसले कागजातमा यसको हालको स्थानमा आधारित मानव संसाधनलाई घुमाउँछ, त्यसैले तपाईलाई यो कहाँ प्राप्त गर्न यो स्थितिलाई समायोजन गर्न आवश्यक पर्दछ। यो डिजाइनमा ठाडो रेखाहरू थप्न यो प्रयोग गर्न सिफारिस गर्दैन, तर यो एक रोचक प्रभाव प्राप्त गर्ने तरिका हो।

तपाईंको पृष्ठमा लाइनहरू प्राप्त गर्ने अर्को तरिका

एक चीज हो कि केहि मान्छे मानव संसाधन को उपयोग को बिरुद्ध करते हो अन्य तत्वहरु को किनाराहरुमा निर्भर छ। तर कहिलेकाँही एक HR लाई सीमाहरू सेट अप गर्ने प्रयास भन्दा धेरै सजिलो र सजिलो छ। केही ब्राउजरहरूको बक्सको मोडेल समस्याहरू पनि सीमालाई पनि चुनौतीपूर्ण बनाउन सक्छ।