Kontenut Marketing

Kif Tibni Reġjuni Tag Ankra Fuq Immaġni Sfond Bl-użu tas-CSS

Fil-jiem tal-Web 1.0, ġabra ta 'links bħal din tista' tinbena billi tgħaqqad l-immaġni tiegħek b'links fuq kull grafika, imbagħad tipprova tħitha kollha lura flimkien ma 'tabella. Jista 'jsir ukoll bl-użu ta' mappa tal-immaġni iżda li normalment teħtieġ għodda biex tinbena s-sistema ta 'koordinati.

L-użu ta' Folji ta' Stil Cascading (CSS) jagħmel dan ħafna aktar faċli ... l-ebda immaġini splicing u l-ebda tipprova ssib għodda biex tibni sistema ta 'koordinati tiegħek! Sempliċement iżżid immaġni ta 'sfond ma' div u mbagħad tuża pożizzjonament assolut biex tispeċifika l-wisa 'u l-għoli ta' kull wieħed mir-reġjuni li trid tkun marbuta.

  1. Ibni l-immaġni li tixtieq tuża. Tista 'tutilizza din il-grafika hawn taħt (ikklikkja bil-lemin u ssejvja bħala biex tniżżel)
għażliet

  1. Tella 'l-immaġni tiegħek għal direttorju li huwa relattiv għas-CSS tiegħek. Fil-WordPress, dan jista 'jsir l-aktar faċli billi tpoġġiha f'folder tal-immaġini fid-direttorju tat-tema tiegħek.
  2. Żid l-HTML tiegħek. Huwa sabiħ u sempliċi ... div bi tliet links fiha:
<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. Editja l-Iskeda tal-Istil Cascading tiegħek (CSS). Int se żżid 6 stili differenti. Stil 1 għad-div ġenerali, 1 għat-tikketta tal-ankra sabiex ma turi l-ebda dekorazzjoni tat-test, stil 1 biex jaħbi t-test (użat għall-aċċessibbiltà), u speċifikazzjoni tal-istil 1 għal kull wieħed mill-links:
#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; }

Il-pożizzjonament huwa sabiħ u sempliċi ... żid għoli u wisa 'u mbagħad issettja l-marġni tax-xellug mix-xellug tal-immaġni, u l-marġni ta' fuq min-naħa ta 'fuq tal-immaġni!

AĠĠORNAT 10/3/2007 għal aċċessibilità aħjar bil-parir ta ' Phil!

Douglas Karr

Douglas Karr huwa CMO ta OpenINSIGHTS u l-fundatur tal- Martech Zone. Douglas għen għexieren ta’ startups ta’ MarTech ta’ suċċess, għen fid-diliġenza dovuta ta’ aktar minn $5 biljun f’akkwisti u investimenti ta’ Martech, u jkompli jgħin lill-kumpaniji fl-implimentazzjoni u l-awtomatizzazzjoni tal-istrateġiji tal-bejgħ u l-kummerċjalizzazzjoni tagħhom. Douglas huwa trasformazzjoni diġitali rikonoxxuta internazzjonalment u espert u kelliem tal-MarTech. Douglas huwa wkoll awtur ippubblikat ta 'gwida ta' Dummie u ktieb ta 'tmexxija tan-negozju.

Artikli relatati

Lura għall-buttuna ta 'fuq
Agħlaq

Adblock Individwat

Martech Zone huwa kapaċi jagħtik dan il-kontenut mingħajr ebda spiża għaliex aħna monetize is-sit tagħna permezz ta 'dħul minn reklam, links affiljati, u sponsorships. Napprezzaw jekk tneħħi l-imblokkatur tar-reklami tiegħek hekk kif tara s-sit tagħna.