elég könnyű vízszintes vonalat beilleszteni vagy rajzolni html-be. De hogyan rajzoljon függőleges vonalat html-ben? A vízszintes vonallal ellentétben a html-ben nincs egyetlen címke, amely megrajzolja a függőleges vonalat. De ez nem jelenti azt, hogy lehetetlen ezt megtenni.
CSS használata
ennek egyik módja a HTML-címkék használata lépcsőzetes stíluslapokkal vagy CSS-sel.
a div címkét html-ben fogjuk használni, hogy egy blokkot rajzoljunk az oldalon. A div címkén a border-left vagy a border-right tulajdonság segítségével rajzolhatja meg a blokk határait. A div magasság tulajdonságával kombinálva a kívánt hosszúságú függőleges vonalat rajzolja.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- magasság: a magasság használható az oldalon lévő sor hosszának meghatározására.
- border-left: ez adja meg, hogy milyen sort szeretne. a példa egy 2 pixel vastagságú fekete vonal. Lehet szaggatott vonal vagy sokkal vastagabb vonal.
- pozíció és balra: ez a kettő együtt adja meg, hogy az oldalon hol kell a vonal vízszintesen igazítva. Bármelyik attribútum, amely megfelelően elhelyezi a div-t, felhasználható a vonal elhelyezésére az oldalon
a fenti kód kimenete szilárd fekete függőleges vonalként jelenik meg az oldal közepén.
számos különböző kombináció lehetséges. Például használhatja mind a szegély-bal, mind a határ-jobb tulajdonságokat együtt két függőleges vonal egymás melletti rajzolásához. Ügyeljen arra, hogy adja meg a div szélességét, ha két vonalat rajzol. Ez határozza meg a két függőleges vonal közötti távolságot.
a képpontszám segítségével változtathatja a vonal méretét vagy vastagságát. Szinte minden variáció, amellyel vízszintes vonalat rajzolhat, felhasználható a függőleges vonal rajzolására is.
a konténercímke, például a div használata lehetővé teszi, hogy függőleges vonalat rajzoljon egy szövegblokk mellé, ha erre van szüksége. A konténercímke használata rugalmasságot biztosít nemcsak függőleges vonalak, hanem vízszintes vonalak rajzolásához is a szöveg körül. Ehhez meg lehet csinálni valamit, mint ez:
<div style="border-left: 2px solid black; border-right: 2px dashed green; width: 70em;"> <div style="padding-left: 2em;"> <p>The output of the above code will display as a solid black vertical line in the middle of the page.</p> <p>There are several different combinations that are possible. For example, you can use both the border-left and the border-right properties together to draw two vertical lines side by side. Be sure to specify the width of the div if you are drawing two lines. That will determine the distance between the two vertical lines.</p> <p>You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.</p> </div></div>
az itt található példákban az inline stílus attribútumot használtam, de ideális esetben külső stílust használnék ezeket újra felhasználhatja a class attribútummal. Ez lehetővé teszi, hogy következetes megjelenést és érzést kapjon az összes weboldalon.
A hr címke használata
a vízszintes vonal beillesztésére szolgáló HTML címke a hr címke. Ugyanazt a címkét használhatja a függőleges vonal beillesztéséhez is, de a vonal formázásához továbbra is meg kell adnia a szélességet és a méretet. Tehát valószínűleg csak a hr címkét használja a korábbi példában szereplő div címke helyett.
ennek ellenére nagyon egyszerű lehet használni, ha nincs szüksége divatos formázásra. Megadja a szélesség attribútumot a vonal vastagságának beállításához, a méret attribútumot pedig a vonal hosszának vagy magasságának meghatározásához.
<hr width="1" size="300"/>
a div használata sokkal nagyobb rugalmasságot biztosít a rajzolni kívánt vonal méretének és típusának szabályozásában, valamint több vonal rajzolásához. Nos, a vízszintes vonalat ugyanúgy meg lehet rajzolni, a szegély-felső vagy a szegély-alsó tulajdonságokat használva a bal és a jobb helyett.