Pridėti HTML antraštes į žiniatinklio paveikslėlius 9 paprastais žingsniais
Vaizdai praturtina jūsų tinklalapius ir atkreipia žiūrovų dėmesį. Parašai pateikia papildomos informacijos apie jūsų interneto vaizdus, bet juos gali būti sunku pridėti prie tinklalapių be pažangių HTML ir CSS įgūdžių. Čia yra patikimas būdas pridėti paprastą, bet patraukliai parašą vaizdui, kuris lieka su vaizdu, kur jūs jį perkeliate į tinklalapį.
9 žingsniai prie HTML vaizdo antraštės
Pridėkite antraštę prie vaizdo ir perkelkite jas kartu kur tik norite:
- Pridėkite vaizdą prie savo tinklalapio.
- Į savo svetainės HTML įrašykite aplink vaizdą dvi žymeles:
- Įtraukite stiliaus atributas į žymę div:
style = "" >- Nustatykite div plotį į tą patį pločio plotą kaip paveikslėlis su pločio stiliumi :
width: image width px; ">- Jei pavadinimai yra šiek tiek mažesni už aplinkinį tekstą, pridėkite šrifto dydžio savybę stiliaus div:
font size: 80%; ">- Antraštės geriausiai atrodo, jei jie yra nukreipti žemiau paveikslėlio, todėl prie stiliui priskirto teksto suderinimo savybės:
text-align: center; "> < img src = "URL" alt = "pakaitinis tekstas" width = "width" height = "height" />- Galiausiai pridėkite šiek tiek daugiau vietos tarp paveikslėlio ir antraštės, pridėdami stiliaus atributą vaizdui su užpildo apačioje esančio stiliumi :
style =" padding-bottom: 0.5em; " /> - Tada pridėkite teksto antraštę tiesiai po paveikslėliu:
Tai mano antraštė Įkelkite tinklalapį į savo serverį ir patikrinkite jį naršyklėje.
Antraščių patarimai
- Pločiai : CSS matmenys gali būti įvairūs matavimai, todėl paprastai turite nurodyti matavimo tipą. Pavyzdžiui: plotis: 100 px ; Tačiau HTML formato matmenys visada yra taškų, todėl jūs išmatuojote matavimą. width = "100"
- Jei sukursite divo plotį platesnį nei vaizdo plotis, antraštė gali pasirodyti šalia nuotraukos. Jei tai yra tai, ko norite, tada pridėkite
žymę tiesiai prieš antraštę ir po vaizdo tvirtinimo.
- Įtraukite stiliaus atributas į žymę div: