सुंदर नेविगेशन

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

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

<a href="#"><span>Section One</span>Semantics</a>
<a href="#"><span>Section Two</span>Semantics</a>
<a href="#"><span>Section Three</span>Semantics</a>
<a href="#"><span>Section Four</span>Semantics</a>

सबसे पहले, आपको एक सुविधाजनक क्लिक करने योग्य ज़ोन को फिर से बनाने के लिए लिंक की चौड़ाई और पैडिंग निर्धारित करने की आवश्यकता है, और निश्चित रूप से, एक सुंदर - आंख से अच्छा - पृष्ठभूमि। एक ब्लॉक के रूप में एक अवधि को परिभाषित करने से हमें किसी भी अनावश्यक <br /> से बचने में मदद मिलेगी। यहाँ अंतिम परिणाम है:

a {
text-transform: uppercase;
font-size: 2.5em;
font-weight: bold;
letter-spacing: -1px;
color: red;
display: block;
padding: 0.5em;
float: left;
width: 8em;
text-decoration: none;
line-height: 0.5em;
}
a span {
color: #666;
display: block;
font-size: 50%;
letter-spacing: 0;
margin-bottom: 0.3em;
}
a:hover {
background-color: #fffea4;
}

[ उदाहरण ]