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="/python-regex-programs/">Python Regex-Ohjelmat</a> </li><li> <a href="/law-us/">Laki Usa</a> </li><li> <a href="/pytorch-tutorial/">Pytorch Opetusohjelma</a> </li><li> <a href="/salesforce-tutorial/">Salesforce Opetusohjelma</a> </li><li> <a href="/c-strings-programs/">C Strings -Ohjelmat</a> </li><li> <a href="/csharp-collections-namespace/">Csarp-Collections-Namespace</a> </li><li> <a href="/computer-gk/">Tietokone Gk</a> </li><li> <a href="/csharp-dictionary-class/">Csharp-Sanakirjaluokka</a> </li><li> <a href="/gmail/">Gmail</a> </li><li> <a href="/physics/">Fysiikka</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">Python-Pyynnöt</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Python-Pyynnöt</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-requests/"> <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="/how-use-sql">IN:n käyttäminen SQL:ssä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/geography-class-8-cat/">Maantiede-Luokka-8</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/true-story-david-ghantt-131478">Tositarina David Ghanttista ja Loomis Fargo Heististä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/queue">Jonottaa</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-convert-string-boolean">Java Muunna merkkijono loogisiksi</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="/java-arrays">matriisi javassa</a>
</li><li><a href="/java-lambda-expressions">lambda-toiminto java</a>
</li><li><a href="/java-ascii-table">ascii-taulukko java</a>
</li><li><a href="/java-if-else-statement">jos muuten silmukka javassa</a>
</li><li><a href="/1-million-numbers">1 miljoona numeroina</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="//sv.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>