सामग्री मार्केटिङ

CSS प्रयोग गरेर पृष्ठभूमि छविमा एंकर ट्याग क्षेत्रहरू कसरी निर्माण गर्ने

वेब 1.0 को दिनहरूमा, प्रत्येक ग्राफिकमा लिङ्कहरूसँग तपाइँको छविलाई विभाजित गरेर, त्यसपछि यो सबैलाई टेबलको साथ सँगै सिलाई गर्ने प्रयास गरेर यस जस्तै लिङ्कहरूको संग्रह निर्माण गर्न सकिन्छ। यो एक प्रयोग गरेर पनि पूरा गर्न सकिन्छ छवि नक्शा तर त्यसका लागि सामान्यतया समन्वय प्रणाली निर्माण गर्न उपकरण चाहिन्छ।

क्यास्केडिङ शैली पानाहरू प्रयोग गर्दै (CSS) ले यसलाई एक टन सजिलो बनाउँछ... कुनै छविहरू विभाजन नगर्ने र तपाईंको समन्वय प्रणाली निर्माण गर्न उपकरण खोज्ने प्रयास नगर्ने! तपाइँ केवल एक div मा पृष्ठभूमि छवि थप्नुहोस् र त्यसपछि तपाइँ लिङ्क गर्न चाहानु भएको प्रत्येक क्षेत्रको चौडाई र उचाइ निर्दिष्ट गर्न निरपेक्ष स्थिति प्रयोग गर्नुहोस्।

  1. तपाईंले प्रयोग गर्न चाहनुभएको छवि बनाउनुहोस्। तपाईं तलको यो ग्राफिक प्रयोग गर्न सक्नुहुन्छ (दायाँ क्लिक गर्नुहोस् र डाउनलोड गर्नको लागि बचत गर्नुहोस्)
विकल्पहरू

  1. तपाइँको छवि एक निर्देशिकामा अपलोड गर्नुहोस् जुन तपाइँको CSS मा सम्बन्धित छ। WordPress मा, यो तपाईंको विषयवस्तु डाइरेक्टरीमा छवि फोल्डरमा राखेर सजिलो गर्न सकिन्छ।
  2. तपाईको 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>
  1. आफ्नो क्यास्केडिङ शैली पाना (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 को सल्लाहको साथ राम्रो पहुँचको लागि फिल!

Douglas Karr

Douglas Karr को CMO छ OpenINSightTS र को संस्थापक Martech Zone। डगलसले दर्जनौं सफल MarTech स्टार्टअपहरूलाई मद्दत गरेको छ, Martech अधिग्रहण र लगानीमा $ 5 बिलियन भन्दा बढीको लगनशीलतामा सहयोग गरेको छ, र कम्पनीहरूलाई उनीहरूको बिक्री र मार्केटिङ रणनीतिहरू कार्यान्वयन र स्वचालित गर्न मद्दत गर्न जारी छ। डगलस एक अन्तर्राष्ट्रिय मान्यता प्राप्त डिजिटल रूपान्तरण र MarTech विशेषज्ञ र वक्ता हो। डगलस डम्मीको गाईड र व्यापार नेतृत्व पुस्तकका प्रकाशित लेखक पनि हुन्।

सम्बन्धित लेख

शीर्ष बटनमा फर्कनुहोस्
बन्द

Adblock पत्ता लाग्यो

Martech Zone तपाइँलाई यो सामग्री कुनै पनि लागतमा उपलब्ध गराउन सक्षम छ किनभने हामीले हाम्रो साइटलाई विज्ञापन राजस्व, सम्बद्ध लिङ्कहरू, र प्रायोजनहरू मार्फत मुद्रीकरण गर्छौं। यदि तपाईंले हाम्रो साइट हेर्दै आफ्नो विज्ञापन अवरोधक हटाउनु भयो भने हामी प्रशंसा गर्नेछौं।