Ինչպես կառուցել խարիսխի պիտակների շրջաններ ֆոնային պատկերի վրա՝ օգտագործելով CSS
Վեբ 1.0-ի օրերում նման հղումների հավաքածու կարող էր ստեղծվել՝ ձեր պատկերը յուրաքանչյուր գրաֆիկի վրա հղումներով միացնելով, այնուհետև փորձելով այն նորից կարել սեղանով: Դա կարող է իրականացվել նաև օգտագործելով an պատկերի քարտեզ բայց դա սովորաբար պահանջում է կոորդինատային համակարգը կառուցելու գործիք:
Կասկադային ոճի թերթիկների օգտագործում (CSS) դա շատ ավելի հեշտ է դարձնում… առանց պատկերների միացման և ձեր կոորդինատային համակարգը կառուցելու գործիք գտնելու փորձի: Դուք պարզապես ավելացնում եք ֆոնային պատկեր div-ում և այնուհետև օգտագործում բացարձակ դիրքավորում՝ նշելու յուրաքանչյուր շրջանի լայնությունը և բարձրությունը, որոնք ցանկանում եք կապվել:
- Կառուցեք այն պատկերը, որը ցանկանում եք օգտագործել: Դուք կարող եք օգտագործել այս գրաֆիկը ստորև (աջ սեղմեք և պահեք որպես ներբեռնում)
- Վերբեռնեք ձեր նկարը գրացուցակում, որը համեմատական է ձեր CSS- ի հետ: WordPress- ում դա կարելի է անել ամենահեշտը `այն տեղադրելով ձեր թեմայի գրացուցակում գտնվող պատկերների պանակում:
- Ավելացրեք ձեր 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>
- Խմբագրել ձեր Կասկադային ոճի թերթիկը (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!