Sisu Marketing

Kuidas luua CSS-i abil taustapildile ankursiltide piirkondi

Veeb 1.0 päevil võis selliste linkide kogumi luua, ühendades oma pildi iga graafika linkidega ja seejärel proovides seda kõike tabeliga kokku õmmelda. Seda saab saavutada ka kasutades pildikaart kuid selleks on tavaliselt vaja koordinaatsüsteemi loomiseks tööriista.

Kaskaadlaadilehtede kasutamine (CSS) muudab selle palju lihtsamaks... ei mingit kujutiste splaissimist ega proovimist leida tööriistu oma koordinaatsüsteemi koostamiseks! Lisate lihtsalt div-le taustpildi ja seejärel kasutate absoluutset positsioneerimist, et määrata iga lingitava piirkonna laius ja kõrgus.

  1. Looge pilt, mida soovite kasutada. Saate kasutada seda allolevat graafikat (allalaadimiseks paremklõpsake ja salvestage nimega)
valikuid

  1. Laadige oma pilt üles kataloogi, mis on teie CSS-iga suhteline. WordPressis saab seda kõige lihtsamalt teha, kui asetate selle oma teemakataloogi piltide kausta.
  2. Lisage oma HTML. See on tore ja lihtne ... div, millel on kolm linki:
<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. Redigeerige oma kaskaadlaadilehte (CSS). Lisate 6 erinevat stiili. 1 stiil üldise div jaoks, 1 ankurmärgendi jaoks, et see ei kuvataks teksti kaunistust, 1 stiil teksti peitmiseks (kasutatakse juurdepääsetavuse tagamiseks) ja 1 stiili spetsifikatsioon iga lingi jaoks:
#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; }

Asukoha määramine on kena ja lihtne ... lisage kõrgus ja laius ning määrake seejärel pildi vasakust servast vasak ja ülemisest servast ülemine veeris!

Uuendatud 10. oktoober 3 parema juurdepääsetavuse huvides Phil!

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja selle asutaja Martech Zone. Douglas on aidanud kümneid edukaid MarTechi idufirmasid, on aidanud Martechi omandamisel ja investeeringutel üle 5 miljardi dollari ulatuses läbi viia ning jätkab ettevõtete abistamist nende müügi- ja turundusstrateegiate rakendamisel ja automatiseerimisel. Douglas on rahvusvaheliselt tunnustatud digitaalse transformatsiooni ja MarTechi ekspert ja esineja. Douglas on ka Dummie juhendi ja ärijuhtimise raamatu autor.

seotud artiklid

Tagasi üles nupule
lähedal

Adblock tuvastatud

Martech Zone suudab teile seda sisu tasuta pakkuda, kuna teenime oma saidi rahaks reklaamitulu, sidusettevõtete linkide ja sponsorluse kaudu. Oleksime tänulikud, kui eemaldaksite meie saidi vaatamise ajal oma reklaamiblokeerija.