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="//changelesschoir.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="/algorithms-backtracking/">Algoritmit-Backtracking</a> </li><li> <a href="/r-tutorial/">R Opetusohjelma</a> </li><li> <a href="/min-heap/">Min-Kasa</a> </li><li> <a href="/java/">Java</a> </li><li> <a href="/coding-problems/">Koodausongelmat</a> </li><li> <a href="/greedy/">Ahne</a> </li><li> <a href="/python-requests/">Python-Pyynnöt</a> </li><li> <a href="/es6-tutorial/">Es6 Opetusohjelma</a> </li><li> <a href="/celebrity/">Julkkis</a> </li><li> <a href="/linux-file-contents/">Linux-Tiedoston Sisältö</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="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">sort() Pythonissa</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Tietojenkäsittelytieteen portaali nörteille. Se sisältää hyvin kirjoitettuja, hyvin ajateltuja ja hyvin selitettyjä tietojenkäsittelytieteen ja ohjelmoinnin artikkeleita, tietokilpailuja ja harjoitus-/kilpailuohjelmointi-/yrityshaastattelukysymyksiä.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/sort-python"> <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="/map-interface-java">Javan karttaliittymä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/floor-ceil-function-python">floor()- ja ceil()-funktio Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/nand-gate">NAND-portti</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/80-colleges-with-full-ride-scholarships-131532">80 korkeakoulua Full Ride -stipendeillä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-star-topology">Mikä on tähtitopologia?</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="/comparison-operators">Oracle sql ei ole sama</a>
</li><li><a href="/java-convert-int-string">kokonaisluku merkkijonoon java</a>
</li><li><a href="/java-string-replace">java korvaa merkkijonossa</a>
</li><li><a href="/sanjay-dutt">sanjay dutt ja</a>
</li><li><a href="/steps-write-execute-script">miten komentosarja suoritetaan linuxissa</a>
</li><li><a href="/how-block-youtube-ads-android">kuinka estää youtube-mainokset Androidissa</a>
</li><li><a href="/java-string-isempty">java isempty</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="//bg.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>