Bij het creëren van een visueel aantrekkelijke en goed gestructureerde webpagina wordt vaak gebruik gemaakt van horizontale lijnen. Deze regels kunnen helpen verschillende delen van de inhoud van elkaar te scheiden, waardoor het voor gebruikers gemakkelijker wordt om de gepresenteerde informatie te lezen en te begrijpen. In deze handleiding verkennen we twee effectieve methoden om horizontale lijnen in HTML toe te voegen: met behulp van de>
tag- en CSS-eigenschappen.
Verschillende benaderingen om horizontale lijnen toe te voegen in HTML
1. Gebruiken
label:
De Horizontale regel T bij (
)wordt gebruikt om horizontale lijnen in het HTML-document in te voegen om secties van het document van elkaar te scheiden. Het is een lege of ongepaarde tag, wat betekent dat er geen afsluitende tag nodig is.
Voorbeeld: Dit voorbeeld beschrijft de
tag om de horizontale lijn toe te voegen.HTML
Horizontale lijntitel> kop> <body> <h2>Horizontale lijn met verschillende attributensh2><hr width='100%' size='2'> <hr width='100%' size='2' color='blue' noshade> <hr width='100%;' color='red' size='5'>body>html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="Horizontale HTML-lijn met hr-tag"><p>Uitvoer</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>2. CSS-eigenschappen gebruiken:</strong> </b> </h3><p dir='ltr'><span>In deze aanpak zullen we gebruik maken van de</span> <i> <em>rand-stijl</em> </i> <span>Eigendom</span> <i> <em> </em> </i> <span>om de horizontale lijn te maken. We kunnen ofwel de</span> <i> <em>grens-top</em> </i> <span>eigenschap die de stijl van de bovenrand of de</span> <i> <em>grens-bodem</em> </i> <span>eigenschap, die de stijl van de onderrand van een element kan instellen. Beide eigenschappen kunnen worden gebruikt om de horizontale lijn toe te voegen.</span></p> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Dit voorbeeld beschrijft het tekenen van de horizontale lijn met behulp van de</span> <i> <em>rand-stijl</em> </i> <span>Eigendom.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horizontale lijn met behulp van CSS Propertiestitle><style>.horizontale_lijn {breedte: 90%; hoogte: 5px; rand bovenaan: 5px gestippeld zwart; lijnhoogte: 80%; } .line { border-bottom: 5px effen rood; marge bovenaan: 5px; breedte: 90%; } stijl> hoofd> <body> <h2>Horizontale lijn met CSS Propertiesh2><h3>horizontale stippellijnh3><div>div><h3>Effen horizontale lijnh3><div>div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="horizontale lijn met behulp van CSS-voorbeelduitvoer"><p>Uitvoer</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/cpp-string/">Cpp-String</a> </li><li> <a href="/medlife/">Medlife</a> </li><li> <a href="/python-array/">Python-Array</a> </li><li> <a href="/java-constructors/">Java-Constructeurs</a> </li><li> <a href="/groovy-tutorial/">Groovy-Tutorial</a> </li><li> <a href="/linux-command/">Linux-Opdracht</a> </li><li> <a href="/opencv/">Opencv</a> </li><li> <a href="/jdbc/">Jdbc</a> </li><li> <a href="/bts/">Bts</a> </li><li> <a href="/python-oop-concepts/">Python-Oop-Concepten</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Hoe Python op Windows updaten?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Een informaticaportaal voor nerds. Het bevat goed geschreven, goed doordachte en goed uitgelegde artikelen over computerwetenschappen en programmeren, quizzen en vragen over oefenen/competitief programmeren/bedrijfsinterviews.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-update-python-windows"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/greedy/">Hebberig</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-analysis-valley-ashes-great-gatsby-131272">Beste analyse: Valley of Ashes in The Great Gatsby</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/physics/">Natuurkunde</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/strstr-c-c">strstr() in C/C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-string-includes-method">JavaScript-tekenreeks omvat() Methode</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/java-integer-parseint-method">parseint java</a>
</li><li><a href="/footnotes-markdown">voetnoten met afwaarderingen</a>
</li><li><a href="/inorder-traversal">binaire boom in volgorde traversal</a>
</li><li><a href="/java-hashset">wat is hashset-java</a>
</li><li><a href="/gray-code">grijze code</a>
</li><li><a href="/sql-update-with-join">updaten in sql met join</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 Alle Rechten Voorbehouden | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>