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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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><!--//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="/coa-tutorial/">Coa Opetusohjelma</a> </li><li> <a href="/python-basic-programs/">Pythonin Perusohjelmat</a> </li><li> <a href="/c-library/">C-Kirjasto</a> </li><li> <a href="/get-informed/">Hanki Tietoa</a> </li><li> <a href="/python-library/">Python-Kirjasto</a> </li><li> <a href="/macos-tricks/">Macos Temppuja</a> </li><li> <a href="/cpp-data-types/">Cpp-Data-Tyypit</a> </li><li> <a href="/math-concepts/">Math-Käsitteet</a> </li><li> <a href="/hadoop-tutorial/">Hadoop Opetusohjelma</a> </li><li> <a href="/installation-mac/">Asennus Mac:iin</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Boto3 Python-moduuli</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Boto3 Python-moduuli, jossa on opetusohjelma, tkinter, painike, yleiskatsaus, kangas, kehys, ympäristön asetukset, ensimmäinen python-ohjelma jne.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/boto3-python-module"> <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="/what-is-sql">Mikä on SQL?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-program-depth-first-search">Python-ohjelma Depth First -hakuun tai DFS graafille</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-access-index-python-s">Kuinka käyttää indeksiä Python's for Loopissa</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/chemical-elements/">Kemialliset Elementit</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/df-command-linux-unix-with-examples">df-komento Linuxissa/Unixissa esimerkein</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="/collections-java">mikä kokoelma javassa</a>
</li><li><a href="/numpy-where-python">np. missä</a>
</li><li><a href="/alphabet-numbers">"abc" on numeroissa</a>
</li><li><a href="/dfa">deterministiset äärelliset automaatit</a>
</li><li><a href="/java-list-sort-method">lista lajiteltu 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="//hr.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>