on tarpeeksi helppoa lisätä tai piirtää vaakasuora viiva html: ään. Mutta miten pystyviiva piirretään html: ssä? Toisin kuin vaakaviivalla, html: ssä ei ole yhtä tagia, joka piirtäisi pystyviivan. Se ei kuitenkaan tarkoita, että se olisi mahdotonta.
käyttämällä CSS: ää
yksi tapa on käyttää html-tageja, joissa on CSS: ää tai CSS: ää.
käytämme html: ssä Div-tagia piirtämään lohkoa sivulle. Div-tunnisteessa voit käyttää raja-vasen tai raja-oikea-ominaisuutta lohkon rajojen piirtämiseen. Yhdessä korkeus ominaisuus div, päädyt piirustus pystysuora viiva halutun pituinen.
- korkeus: korkeudesta voidaan määrittää sivulla olevan viivan pituus.
- raja-vasen: täsmentäkää, millaisesta rivistä pidätte. esimerkki on kiinteä musta viiva, jonka paksuus on 2 pikseliä. Sinulla voi olla katkoviivat tai paljon paksumpi viiva.
- sijainti ja vasen: nämä kaksi yhdessä määrittelevät, missä kohdassa sivua tarvitset viivan vaakasuoraan. Mitä tahansa määreitä, jotka sijoittavat div: n asianmukaisesti, voidaan käyttää viivan sijoittamiseen sivulle
edellä mainitun koodin ulostulo näkyy kiinteänä mustana pystyviivana sivun keskellä.
on olemassa useita erilaisia yhdistelmiä, jotka ovat mahdollisia. Esimerkiksi, voit käyttää sekä raja-vasen ja raja-oikea ominaisuuksia yhdessä piirtää kaksi pystyviivaa vierekkäin. Muista määrittää DIV: n leveys, jos piirrät kaksi viivaa. Se määrittää kahden pystysuoran viivan välisen etäisyyden.
voit muuttaa viivan kokoa tai paksuutta pikselimäärän avulla. Lähes kaikkia variaatioita, joita voi käyttää vaakaviivan piirtämiseen, voidaan käyttää myös pystyviivan piirtämiseen.
käyttämällä säiliötunnusta, kuten div, voit myös piirtää pystysuoran viivan tekstilohkon viereen, jos sitä tarvitset. Säiliötunnuksen käyttäminen antaa joustavuutta piirtää pystyviivojen lisäksi myös vaakasuoria viivoja tekstin ympärille. Jotta voit tehdä jotain tällaista:
<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>
olen käyttänyt inline style-määritettä tässä esimerkeissä, mutta mieluiten käyttäisit ulkoista tyyliä arkki ja voit käyttää näitä uudelleen luokan attribuutin kanssa. Se antaa sinulle mahdollisuuden olla johdonmukainen ulkoasu kaikissa webpages.
käyttämällä hr-tunnistetta
HTML-tunniste vaakaviivan lisäämiseksi on hr-tunniste. Voit käyttää samaa tunnistetta myös pystysuuntaisen viivan asettamiseen, mutta sinun täytyy silti määrittää leveys ja koko rivin muotoilemiseksi. Niin, kaikki mitä luultavasti teet on käyttää hr tag sijasta div tag aiemmassa esimerkissä.
vielä, se voi olla melko yksinkertainen käyttää, jos et tarvitse mitään hienoja muotoiluja. Määrität width-attribuutin asettaaksesi viivan paksuuden ja koko-attribuutin määrittääksesi viivan pituuden tai korkeuden.
<hr width="1" size="300"/>
div: n käyttäminen antaa paljon enemmän joustavuutta piirrettävän viivan koon ja tyypin ohjaamiseen sekä useiden viivojen piirtämiseen. No, voit piirtää vaakasuoran viivan aivan samalla tavalla, käyttäen raja-ylä-tai raja-pohja ominaisuuksia sijasta vasen ja oikea olimme käyttäneet.