det er lett nok å sette inn eller tegne en horisontal linje i html. Men hvordan tegner du en vertikal linje i html? I motsetning til for den horisontale linjen, er det ingen enkelt kode i html som vil tegne den vertikale linjen. Men det betyr ikke at det er umulig å gjøre det.
BRUKE CSS
En måte å gjøre dette på er å bruke html-kodene med cascading style sheets eller CSS.
vi bruker div-taggen i html for å tegne en blokk på siden. På div-taggen kan du bruke border-left eller border-right-egenskapen til å tegne grensene til blokken. Kombinert med høydeegenskapen til div, vil du ende opp med å tegne en vertikal linje med ønsket lengde.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- høyde: høyden kan brukes til å angi lengden på linjen på siden.
- border-left: dette er angi hva slags linje du liker. eksemplet er en solid svart linje med 2 pikseltykkelse. Du kan ha stiplede linjer eller en mye tykkere linje.
- posisjon og venstre: disse to sammen angir hvor på siden du trenger linjen justert horisontalt. Noen av attributtene som vil plassere div riktig kan brukes til å plassere linjen på siden
utgangen av koden ovenfor vises som en solid svart vertikal linje midt på siden.
det er flere forskjellige kombinasjoner som er mulige. Du kan for eksempel bruke egenskapene kantlinje til venstre og kantlinje til høyre sammen for å tegne to vertikale linjer side ved side. Pass på å angi bredden på div hvis du tegner to linjer. Det vil bestemme avstanden mellom de to vertikale linjene.
du kan variere størrelsen eller tykkelsen på linjen ved hjelp av pikselantallet. Nesten alle variasjoner som du kan bruke til å tegne en horisontal linje, kan også brukes til å tegne den vertikale linjen.
Ved hjelp av en container tag som div vil også gi deg muligheten til å tegne en vertikal linje ved siden av en blokk med tekst, hvis det er det du trenger. Ved hjelp av en container tag gir deg fleksibilitet til å tegne ikke bare vertikale linjer, men også horisontale linjer rundt teksten. Å gjøre slik at du kan gjøre noe sånt som dette:
<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>
og du kan gjenbruke disse med klasseattributtet. Det vil gi deg muligheten til å ha konsekvent utseende på tvers av alle websidene dine.
Bruke hr-taggen
HTML-taggen for å sette inn horisontal linje er hr-taggen. Du kan også bruke samme kode for å sette inn den vertikale linjen, men du må fortsatt angi bredden og størrelsen for å formatere linjen. Så, alt du sannsynligvis gjør, bruker hr-taggen i stedet for div-taggen i det tidligere eksemplet.
Likevel kan Det være ganske enkelt å bruke hvis du ikke trenger noen fancy formatering. Du angir attributtet bredde for å angi tykkelsen på linjen og attributtet størrelse for å angi lengden eller høyden på linjen.
<hr width="1" size="300"/>
Bruk av div vil gi deg mye mer fleksibilitet i å kontrollere størrelsen og typen linje du vil tegne, samt for å tegne flere linjer. Vel, du kan tegne den horisontale linjen akkurat på samme måte, ved hjelp av border-top eller border-bottom egenskaper i stedet for venstre og høyre vi hadde brukt.