नाविक

कार्य: एक पेज नेविगेटर बनाएँ। यहाँ एक है:

1. रंग चुनें

चूंकि नाविक किसी विशेष साइट में उपयोग के लिए बनाया गया है, इसलिए रंग हमें पहले से ही ज्ञात है: #0aaafd



। इस रंग का उपयोग लिंक को इंगित करने के लिए किया जाता है। और हमें इसे गोल वर्ग-सब्सट्रेट बनाने के लिए चाहिए (एक वर्तमान पृष्ठ का चयन करने के लिए, दूसरा प्रभाव के साथ उजागर करने के लिए :hover



)। वर्तमान पृष्ठ की पृष्ठभूमि के लिए, मैं 80% रंग संतृप्ति का उपयोग करता हूं, अर्थात् #3bbbfd



। के साथ दिखाई देने वाली पृष्ठभूमि के लिए :hover



प्रभाव :hover



मैं 20% रंग संतृप्ति का उपयोग करता हूं, अर्थात् #ceeeff



।

2. नाविक के तत्व

• वर्तमान पृष्ठ संख्या
• पिछले-अगले पृष्ठों में से एक की संख्या
• पिछला / अगला पृष्ठ
• पहला / अंतिम पृष्ठ

हम इस बात का ध्यान रखते हैं कि उपयोगकर्ता को यह समझना चाहिए कि पृष्ठ किस पर स्थित है, यानी आपको किसी तरह इसका चयन करने की आवश्यकता है। मैं हाइलाइट करने के 3 तरीके के रूप में उपयोग करता हूं: सफेद, बोल्ड और विषम, दूसरों की तुलना में उज्जवल, सब्सट्रेट।

3. हम थोपने के लिए गुजरते हैं

एचटीएमएल

पहले हमें html मार्कअप बनाने की आवश्यकता है जिसके साथ हम काम करेंगे। नाविक क्या है? एक विशिष्ट क्रम क्रम के साथ एक सूची। एक संख्या सूची ( ol



) इस परिभाषा के लिए उपयुक्त है। मार्कअप बनाएँ:

1. 
2. 
3. 7
4. 8
5. 9
6. 10
7. 11
8. 
9. 

हम वर्ग को सूची में असाइन करते हैं ताकि आप इस विशेष कंटेनर और उसके अंदर के तत्वों में हेरफेर कर सकें। नाविक का पहला और अंतिम 2 तत्व (प्रथम पृष्ठ, पिछला पृष्ठ, अगला पृष्ठ, अंतिम पृष्ठ) मैंने चित्रों के रूप में बनाने का फैसला किया, क्योंकि वे सामग्री को स्वयं से "प्रतिस्थापित" करते हैं। वर्तमान पृष्ठ को मजबूत के साथ चुनें (हमें केवल बोल्ड की आवश्यकता है)।



अब हम सबसे दिलचस्प गुजरते हैं -

सीएसएस

आइए हमारे नाविक पर एक नज़र डालें:





ऊपरी और निचले क्षैतिज पट्टियों के बीच की दूरी 18 पिक्सेल है।

पारभासी ग्रे आयत की चौड़ाई 20 पिक्सेल है।

बाकी 500% के पैमाने के लिए धन्यवाद दिखाई दे रहा है, कृपया फ़ोटोशॉप द्वारा प्रदान किया गया है।



ol



टैग के लिए नियम :

clear:both;

display:block;

width:181px;

margin:0 auto;



पहला नियम प्रवाह को प्रतिबंधित करता है।

दूसरा नियम "कहता है" कि यह कंटेनर एक ब्लॉक तत्व है - चूंकि अंदर ब्लॉक तत्व होंगे (आप निचले तत्वों के अंदर ब्लॉक तत्व नहीं डाल सकते हैं)।

नाविक को केंद्र में रखने के लिए हमें तीसरे नियम की आवश्यकता है। तथ्य यह है कि चौड़ाई को निर्दिष्ट किए बिना, हम इस कंटेनर को केंद्र में संरेखित नहीं कर पाएंगे। हमारे नाविक के लिए चौड़ाई मान ol



की गणना सूत्र द्वारा की जाती है:



[ ol] * ( [ li] + [ li] + [ li] )







यही है, 9 * ( 18 + 1 + 1 )



, हमें 180 मिलते हैं। हालांकि, 180 IE पिक्सेल पर्याप्त नहीं हैं, और नाविक तैरता है:



1 पिक्सेल की चौड़ाई बढ़ाएँ, और सब कुछ सामान्य हो जाता है।



आप परेशान नहीं कर सकते हैं, और लगभग चौड़ाई का चयन कर सकते हैं, लेकिन आदेश होने पर यह हमेशा अधिक सुखद होता है :)

पैडिंग को ध्यान में नहीं रखा गया है, मैं समझाऊंगा कि बाद में क्यों।



li



टैग के लिए नियम :

list-style:none;

display:block;

float:left;

margin:0 1px;



पहला नियम किसी सूची आइटम के सीरियल नंबर के प्रदर्शन को प्रतिबंधित करता है।

दूसरे नियम की जरूरत है, क्योंकि अंदर एक ब्लॉक तत्व होगा - एक लिंक।

तीसरा नियम यह सुनिश्चित करना है कि सूची आइटम लंबवत रूप से व्यवस्थित नहीं हैं, लेकिन क्षैतिज रूप से।

चौथा नियम बाईं ओर दाईं ओर 1 पिक्सेल पर इंडेंटेशन सेट करता है। हमें इसकी आवश्यकता है, क्योंकि पृष्ठभूमि का आकार 18px है, और एक छोटी दूरी की आवश्यकता है ताकि वर्तमान पृष्ठ की पृष्ठभूमि मँडराते समय "एक साथ छड़ी न करें"।



टैग के लिए नियम :

display:block;

width:18px;

background:none;

text-align:center;

font:normal 14px/18px Arial, Helvetica, sans-serif;



दूसरे के काम करने के लिए पहला नियम आवश्यक है। यही है, इनलाइन तत्वों में चौड़ाई काम नहीं करती है।

दूसरा नियम आवश्यक है, क्योंकि हमारे पास सब्सट्रेट के लिए एक निश्चित चौड़ाई है। यदि आप एक अपरिचित चाहते हैं, तो हम स्लाइडिंग दरवाजे तकनीक का उपयोग करते हैं।

तीसरा नियम लिंक की सामान्य स्थिति में एक पृष्ठभूमि (पृष्ठभूमि) के उपयोग को प्रतिबंधित करता है।



चौथा नियम कंटेनर की सामग्री को क्षैतिज रूप से केंद्र में संरेखित करता है।

पाँचवाँ नियम 14 पिक्सल के आकार वाला एक सामान्य (बोल्ड नहीं) फॉन्ट है, टेक्स्ट का वर्टिकल अलाइनमेंट और इस्तेमाल किए जाने वाले फॉन्ट परिवार का एक संकेत है।



के लिए नियम a:hover



प्रभाव :

background:url("img/ps-bg.gif") no-repeat left bottom;



पृष्ठभूमि छवि का उपयोग करने के बारे में नियम "कहता है"। लेकिन सब कुछ उतना सरल नहीं है जितना पहली नज़र में लगता है। यदि हम केवल प्रभाव के लिए एक चित्र बनाते हैं :hover



, जब पृष्ठ लोड होता है, तो ब्राउज़र इसे लोड नहीं करेगा (क्योंकि जब पृष्ठ लोड नहीं होता है)।

यह भी ध्यान दें कि IE में :hover



केवल लिंक के संदर्भ में काम करता है।

सब्सट्रेट पर वापस जा रहे हैं। चूंकि हमारे पास 2 सब्सट्रेट्स हैं (वर्तमान पृष्ठ के लिए और होवर पर), मैं उन्हें एक चित्र में "गोंद" करता हूं (ताकि जब आप सब कुछ तुरंत काम करें तो):





↑ यह ps-bg.gif



, 18 पिक्सेल चौड़ा और (18 + 18) ऊँचा है। निचला आधा हॉवर प्रभाव के लिए है, शीर्ष आधा वर्तमान पृष्ठ के लिए है।



तो, कंटेनर (सूची li



तत्व) 18x18 हमारे लिए तैयार हैं, आप उन्हें सामग्री से भर सकते हैं। यह हमारे लिए 2 टैग जारी करने के लिए रहता है - strong



और img



। टेक्स्ट लिंक के लिए डिज़ाइन तैयार है।



strong



टैग के लिए नियम :

display:block;

width:18px;

color:white;

background:url("img/ps-bg.gif") no-repeat left top;

text-align:center;

font:bold 14px/18px Arial, Helvetica, sans-serif;



यहाँ, केवल चौथा नियम ब्याज का है - "हमने ps-bg.gif के ऊपरी भाग को काट दिया और इसे 18x18 कंटेनर में पृष्ठभूमि के साथ चिपका दिया"।



img



टैग के लिए नियम :

width:18px;



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



सभी सीएसएस:

.page-scroll {

clear:both;

display:block;

width:181px;

margin:0 auto;

}



.page-scroll li {

list-style:none;

display:block;

float:left;

margin:0 1px;

}



.page-scroll a {

display:block;

width:18px;

background:none;

text-align:center;

font:normal 14px/18px Arial, Helvetica, sans-serif;

}



.page-scroll a:hover {background:url("img/ps-bg.gif") no-repeat left bottom;}



.page-scroll strong {

display:block;

width:18px;

color:white;

background:url("img/ps-bg.gif") no-repeat left top;

text-align:center;

font:bold 14px/18px Arial, Helvetica, sans-serif;

}



.page-scroll img {width:18px;}



सामान्य तौर पर, सब कुछ तैयार है, लेकिन सीएसएस को थोड़ा कम किया जा सकता है:

.page-scroll {

clear:both;

display:block;

width:181px;

margin:0 auto;

}



.page-scroll li {

list-style:none;

display:block;

float:left;

margin:0 1px;

}



.page-scroll a {

background:none;

font:normal 14px/18px Arial, Helvetica, sans-serif;

}



.page-scroll a:hover {background:url("img/ps-bg.gif") no-repeat left bottom;}



.page-scroll strong {

color:white;

background:url("img/ps-bg.gif") no-repeat left top;

font:bold 14px/18px Arial, Helvetica, sans-serif;

}



.page-scroll strong, .page-scroll a, .page-scroll img {

display:block;

width:18px;

text-align:center;

}



काम कर रहे नाविक को देखो