Visuaalisesti houkuttelevan ja hyvin jäsennellyn verkkosivun luominen edellyttää usein vaakasuuntaisten viivojen käyttöä. Nämä rivit voivat auttaa erottamaan eri sisällön osiot, jolloin käyttäjien on helpompi lukea ja ymmärtää esitettyjä tietoja. Tässä oppaassa tutkimme kahta tehokasta tapaa lisätä vaakasuuntaisia viivoja HTML:ään: käyttämällä>
tagi ja CSS-ominaisuudet.
Erilaisia lähestymistapoja vaakaviivan lisäämiseen HTML:ään
1. Käyttämällä
tag:
The Vaakasuuntainen sääntö t klo (
)käytetään vaakasuuntaisten viivojen lisäämiseen HTML-dokumenttiin asiakirjan osien erottamiseksi. Se on tyhjä tai pariton tagi, mikä tarkoittaa, että sulkevaa tunnistetta ei tarvita.
Esimerkki: Tämä esimerkki kuvaa
-tunniste lisätäksesi vaakaviivan.HTML
Vaakaviiva otsikko> head> <body> <h2>Vaakaviiva käyttämällä erilaisia attribuutteja2><hr width='100%' size='2'> <hr width='100%' size='2' color='blue' noshade> <hr width='100%;' color='red' size='5'>body> html>>></tag> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="HTML-vaakaviiva hr-tunnisteen avulla"><p>Lähtö</p> <h3> <b> <strong>2. CSS-ominaisuuksien käyttäminen:</strong> </b> </h3><p dir='ltr'><span>Tässä lähestymistavassa käytämme</span> <i> <em>rajatyyliin</em> </i> <span>Omaisuus</span> <i> <em> </em> </i> <span>luodaksesi vaakaviivan. Voimme joko käyttää</span> <i> <em>reuna-yläosa</em> </i> <span>ominaisuus, joka määrittää yläreunuksen tyylin tai</span> <i> <em>raja-ala</em> </i> <span>ominaisuus, joka voi määrittää elementin alareunan tyylin. Molempia ominaisuuksia voidaan käyttää vaakaviivan lisäämiseen.</span></p> <p dir='ltr'> <b> <strong>Esimerkki:</strong> </b> <span>Tämä esimerkki kuvaa vaakasuuntaisen viivan piirtämistä käyttämällä</span> <i> <em>rajatyyliin</em> </i> <span>Omaisuus.</span></p>HTML<tag data-text-1=' <html> <head> <title>Vaakaviiva käyttäen CSS Propertiestitle><style>.horizontal_line { leveys: 90%; korkeus: 5px; reunus-yläosa: 5px pilkullinen musta; linjan korkeus: 80 %; } .line { border-bottom: 5px tasainen punainen; marginaali yläreuna: 5px; leveys: 90 %; } style> head> <body> <h2>Vaakasuora viiva käyttämällä CSS Propertiesh2>:ta<h3>katkoviiva vaakaviivah3><div>div><h3>Pelkkä vaakaviivah3><div>div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="vaakasuuntainen viiva CSS-esimerkkitulosteen avulla"><p>Lähtö</p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Luokka</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/spring-boot-tutorial/">Kevään Käynnistyksen Opetusohjelma</a> </li><li> <a href="/python-sorting-exercises/">Python Lajittelu-Harjoitukset</a> </li><li> <a href="/physics-difference-between/">Fysiikka-Ero-Välillä</a> </li><li> <a href="/tally-tutorial/">Tally Opetusohjelma</a> </li><li> <a href="/number-system-maq/">Numerojärjestelmä - Maq</a> </li><li> <a href="/hash/">Hash</a> </li><li> <a href="/python-data-type/">Python-Tietotyyppi</a> </li><li> <a href="/java-calendar-class/">Java-Kalenteriluokka</a> </li><li> <a href="/ruby-tutorial/">Ruby Opetusohjelma</a> </li><li> <a href="/java-list-methods/">Java-Luettelomenetelmät</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Muistinhallinta Javassa</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Muistinhallinta Javassa oho, merkkijono, poikkeukset, monisäikeisyys, kokoelmat, jdbc, rmi, perusteet, ohjelmat, swing, javafx, io-streamit, verkko, pistokkeet, luokat, objektit jne.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/memory-management-java"> <i class="fa fa-external-link"></i> Lue Lisää</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Mielenkiintoisia Artikkeleita</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/insertion-an-avl-tree">Lisäys AVL-puuhun</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-create-dropdown-list-using-javascript">Kuinka luoda pudotusluettelo JavaScriptin avulla?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/largest-semiconductor-companies-world">Maailman suurimmat puolijohdeyritykset</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-string-int-c">Muunna merkkijono int:ksi C:ssä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/whats-highest-new-sat-score-possible-131398">Mikä on korkein mahdollinen uusi SAT-pistemäärä?</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Suosittu Viestiä</h2>
<div class="content">
<ul class="list"> <li><a href="/react-table">reagoi taulukko</a>
</li><li><a href="/java-convert-string-char">merkkijono char javaan</a>
</li><li><a href="/lion-vs-tiger">"mitä eroa on leijonalla ja tiikerillä"</a>
</li><li><a href="/how-go-browser-settings">missä ovat selaimen asetukset</a>
</li><li><a href="/java-string-equals">vastaa metodia java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Kaikki Oikeudet Pidätetään | <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>