Vaizdai prideda gyvenimą prie jūsų tinklalapių ir atkreipia žiūrovų dėmesį. Subtitrais pateikiama papildoma informacija apie jūsų žiniatinklio 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į.
Žingsniai prie HTML vaizdo antraštės
-
Pridėkite vaizdą prie savo tinklalapio.
-
Jūsų tinklalapio HTML vietoje aplink vaizdą pažymėkite dvi žymeles:
-
Pridėti žymės stiliui atributą:
stilius = ""> -
Nustatykite div plotį į tą patį pločio plotą kaip paveikslėlis su pločio stiliumi:
-
Jei antraštės yra šiek tiek mažesnės nei supanti teksto, pridėti font-size savybę stiliaus div:
-
Parašai geriausiai atrodo, jei jie yra nukreipti žemiau paveikslėlio, todėl stiliaus atributui pridedamas teksto derinimo elementas:
-
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 stiliaus savybe:
style = "padding-bottom: 0.5em;" />
-
Tada pridėkite teksto antraštę tiesiai po paveikslėliu:
Tai mano parašas
Įkelkite tinklalapį į savo serverį ir patikrinkite jį naršyklėje.
Antraščių patarimai
- CSS matmenys gali būti įvairūs matavimai, todėl paprastai turite nurodyti matavimo tipą. Pavyzdžiui:
plotis: 100px; 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, pridėkite a
žyma tiesiai prieš antraštę ir po vaizdo žymos.