Content Marketing

Ինչպես կառուցել խարիսխի պիտակների շրջաններ ֆոնային պատկերի վրա՝ օգտագործելով CSS

Վեբ 1.0-ի օրերում նման հղումների հավաքածու կարող էր ստեղծվել՝ ձեր պատկերը յուրաքանչյուր գրաֆիկի վրա հղումներով միացնելով, այնուհետև փորձելով այն նորից կարել սեղանով: Դա կարող է իրականացվել նաև օգտագործելով an պատկերի քարտեզ բայց դա սովորաբար պահանջում է կոորդինատային համակարգը կառուցելու գործիք:

Կասկադային ոճի թերթիկների օգտագործում (CSS) դա շատ ավելի հեշտ է դարձնում… առանց պատկերների միացման և ձեր կոորդինատային համակարգը կառուցելու գործիք գտնելու փորձի: Դուք պարզապես ավելացնում եք ֆոնային պատկեր div-ում և այնուհետև օգտագործում բացարձակ դիրքավորում՝ նշելու յուրաքանչյուր շրջանի լայնությունը և բարձրությունը, որոնք ցանկանում եք կապվել:

  1. Կառուցեք այն պատկերը, որը ցանկանում եք օգտագործել: Դուք կարող եք օգտագործել այս գրաֆիկը ստորև (աջ սեղմեք և պահեք որպես ներբեռնում)
ընտրանքներ

  1. Վերբեռնեք ձեր նկարը գրացուցակում, որը համեմատական ​​է ձեր CSS- ի հետ: WordPress- ում դա կարելի է անել ամենահեշտը `այն տեղադրելով ձեր թեմայի գրացուցակում գտնվող պատկերների պանակում:
  2. Ավելացրեք ձեր HTML- ը: Դա գեղեցիկ և պարզ է… a div, որի մեջ կան երեք հղումներ.
<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 տարբեր ոճեր: 1 ոճ ընդհանուր div-ի համար, 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/2007 ՝ ավելի լավ մատչելիության համար ՝ խորհուրդների միջոցով Phil!

Douglas Karr

Douglas Karr -ի CMO-ն է OpenINSIGHTS և հիմնադիրը Martech Zone. Դուգլասը օգնել է MarTech-ի տասնյակ հաջողակ ստարտափների, աջակցել է ավելի քան 5 միլիարդ դոլարի չափով Martech-ի ձեռքբերումների և ներդրումների պատշաճ ուսումնասիրությանը և շարունակում է աջակցել ընկերություններին իրենց վաճառքի և շուկայավարման ռազմավարությունների իրականացման և ավտոմատացման գործում: Դուգլասը միջազգայնորեն ճանաչված թվային փոխակերպման և MarTech փորձագետ և խոսնակ է: Դուգլասը նաև Դումմիի ուղեցույցի և բիզնեսի առաջնորդության գրքի հրատարակված հեղինակ է:

Առնչվող հոդվածներ

Վերադառնալ սկիզբ կոճակը
փակել

Հայտնաբերվել է Adblock

Martech Zone կարող է անվճար տրամադրել ձեզ այս բովանդակությունը, քանի որ մենք դրամայնացնում ենք մեր կայքը գովազդից ստացված եկամուտների, փոխկապակցված հղումների և հովանավորությունների միջոցով: Մենք երախտապարտ կլինենք, եթե մեր կայքը դիտելիս հեռացնեիք ձեր գովազդային արգելափակիչը: