A képek az életet növelik a weboldalakhoz, és felhívják a figyelmet a nézők figyelmére. A feliratok több információt nyújtanak webes képeiről, de nehéz lehet weboldalakat hozzáadni a fejlett HTML és CSS készségek nélkül. Itt van egy megbízható módszer egy egyszerű, mégis vonzó felirat készítéséhez, amely a képen marad, bárhová helyezi a weboldalon.
Lépések egy HTML képaláíráshoz
-
Adjon hozzá egy képet a weboldalához.
-
A weboldal HTML-kódjába helyezze a div tagot a kép körül:
-
Stílus attribútum hozzáadása a div taghez:
style = ""> -
Állítsa be a div szélességét a kép szélességéhez hasonlóan, szélesség-stílus tulajdonsággal:
-
Az olyan feliratokhoz, amelyek valamivel kisebbek a környező szövegnél, adjon hozzá egy font méretű tulajdonságot a div stílushoz:
-
A feliratok legjobbnak tűnnek, ha a kép alatt helyezkednek el, ezért hozzá kell adni a text-align tulajdonságot a stílus attribútumhoz:
-
Végül adjon hozzá egy kis extra helyet a kép és a képaláírás között, hozzáadva egy stílus attribútumot a képhez egy padding-bottom style tulajdonsággal:
style = "padding-bottom: 0.5em;" />
-
Ezután adja hozzá a szövegfeliratot közvetlenül a kép alatt:
Töltse fel a weboldalt a szerverére, és tesztelje böngészőben.
Képzési tippek
- A CSS méretei számos különböző mérés során rendelkezésre állhatnak, ezért általában tartalmaznia kell a mérési típust. Például:
szélesség: 100px; A HTML képméretek azonban mindig képpontban vannak, így a mérést ki kell hagynia.
width = "100"
- Ha a szél szélességét szélesebbre állítja, mint a kép szélessége, a kép mellett a felirat is megjelenhet. Ha ez az, amit akarsz, akkor add a
címke közvetlenül a felirat és a képcímke után.
