CSS प्रयोग गरेर पृष्ठभूमि छविमा एंकर ट्याग क्षेत्रहरू कसरी निर्माण गर्ने
वेब 1.0 को दिनहरूमा, प्रत्येक ग्राफिकमा लिङ्कहरूसँग तपाइँको छविलाई विभाजित गरेर, त्यसपछि यो सबैलाई टेबलको साथ सँगै सिलाई गर्ने प्रयास गरेर यस जस्तै लिङ्कहरूको संग्रह निर्माण गर्न सकिन्छ। यो एक प्रयोग गरेर पनि पूरा गर्न सकिन्छ छवि नक्शा तर त्यसका लागि सामान्यतया समन्वय प्रणाली निर्माण गर्न उपकरण चाहिन्छ।
क्यास्केडिङ शैली पानाहरू प्रयोग गर्दै (CSS) ले यसलाई एक टन सजिलो बनाउँछ... कुनै छविहरू विभाजन नगर्ने र तपाईंको समन्वय प्रणाली निर्माण गर्न उपकरण खोज्ने प्रयास नगर्ने! तपाइँ केवल एक div मा पृष्ठभूमि छवि थप्नुहोस् र त्यसपछि तपाइँ लिङ्क गर्न चाहानु भएको प्रत्येक क्षेत्रको चौडाई र उचाइ निर्दिष्ट गर्न निरपेक्ष स्थिति प्रयोग गर्नुहोस्।
- तपाईंले प्रयोग गर्न चाहनुभएको छवि बनाउनुहोस्। तपाईं तलको यो ग्राफिक प्रयोग गर्न सक्नुहुन्छ (दायाँ क्लिक गर्नुहोस् र डाउनलोड गर्नको लागि बचत गर्नुहोस्)
- तपाइँको छवि एक निर्देशिकामा अपलोड गर्नुहोस् जुन तपाइँको CSS मा सम्बन्धित छ। WordPress मा, यो तपाईंको विषयवस्तु डाइरेक्टरीमा छवि फोल्डरमा राखेर सजिलो गर्न सकिन्छ।
- तपाईको HTML थप्नुहोस्। यो राम्रो र सरल छ ... यसमा तीन लि links्कको साथ डिभ:
<div id="subscribe">
<a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
<a id="email" href="[your email subscribe link]" title="Subscribe with Email"><span class="hide">Email</span></a>
<a id="mobile" href="[your mobile link]" title="View Mobile Version"><span class="hide">Mobile</span></a>
</div>
- आफ्नो क्यास्केडिङ शैली पाना (CSS)। तपाईंले 6 फरक शैलीहरू थप्नुहुनेछ। समग्र div को लागि 1 शैली, 1 एङ्कर ट्याग को लागी यसले कुनै पनि पाठ सजावट प्रदर्शन गर्दैन, 1 शैली पाठ लुकाउन (पहुँचको लागि प्रयोग गरिएको), र प्रत्येक लिङ्कको लागि 1 शैली विशिष्टता:
#subscribe { /* background image block */
display: block;
width: 215px;
height: 60px;
background: url(https://martech.zone/wp-content/uploads/2007/10/options.png) no-repeat;
margin-top: 0px; }
#subscribe a { text-decoration:none; }
.hide { visibility:hidden; }
#rss { /* RSS Link */
float: left;
position:absolute;
width: 50px;
height: 50px;
margin-left: 20px;
margin-top: 5px; }
#email { /* Email Link */
float: left;
position:absolute;
width: 50px;
height: 50px;
margin-left: 80px;
margin-top: 5px; }
#mobile { /* Mobile Link */
float: left;
position:absolute;
width : 50px;
height: 50px;
margin-left: 150px;
margin-top: 5px; }
स्थिति राम्रो र सरल छ ... एक उचाई र चौड़ाई जोड्नुहोस् र त्यसपछि छविको बायाँ तर्फबाट बायाँ मार्जिन सेट गर्नुहोस्, र छविको माथिल्लो भागबाट शीर्ष मार्जिन सेट गर्नुहोस्!
अद्यावधिक १०/10/२००3 को सल्लाहको साथ राम्रो पहुँचको लागि फिल!