Skip to main content

Pridėti antraštę, kuri nuotraukose lieka su nuotrauka

Anonim

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

  1. Pridėkite vaizdą prie savo tinklalapio.

  2. Jūsų tinklalapio HTML vietoje aplink vaizdą pažymėkite dvi žymeles:

    alternatyvus tekstas

  3. Pridėti žymės stiliui atributą:

    stilius = "">

    alternatyvus tekstas

  4. Nustatykite div plotį į tą patį pločio plotą kaip paveikslėlis su pločio stiliumi:

    alternatyvus tekstas

  5. Jei antraštės yra šiek tiek mažesnės nei supanti teksto, pridėti font-size savybę stiliaus div:

    alternatyvus tekstas

  6. Parašai geriausiai atrodo, jei jie yra nukreipti žemiau paveikslėlio, todėl stiliaus atributui pridedamas teksto derinimo elementas:

    alternatyvus tekstas

  7. 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:

    alternatyvus tekstasstyle = "padding-bottom: 0.5em;" />

  8. Tada pridėkite teksto antraštę tiesiai po paveikslėliu:

alternatyvus tekstasTai 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.