At skabe en visuelt tiltalende og velstruktureret webside involverer ofte brugen af vandrette linjer. Disse linjer kan hjælpe med at adskille forskellige sektioner af indhold, hvilket gør det lettere for brugerne at læse og forstå de præsenterede oplysninger. I denne vejledning vil vi udforske to effektive metoder til at tilføje vandrette linjer i HTML: ved hjælp af>
tag- og CSS-egenskaber.
Forskellige tilgange til at tilføje vandret linje i HTML
1. Brug
tag:
Det Vandret regel t kl (
)bruges til at indsætte vandrette linjer i HTML-dokumentet for at adskille sektioner af dokumentet. Det er et tomt eller uparret tag, hvilket betyder, at der ikke er behov for det afsluttende tag.
Eksempel: Dette eksempel beskriver
tag for at tilføje den vandrette linje.
liste streng javaHTML
Vandret linje titel> hoved> <body> <h2>Vandret linje ved hjælp af forskellige attributtersh2><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>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="HTML vandret linje ved hjælp af hr tag"><p>Produktion</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-date-string">konverter dato til streng</a>
</blockquote> <h3> <b> <strong>2. Brug af CSS-egenskaber:</strong> </b> </h3><p dir='ltr'><span>I denne tilgang vil vi bruge</span> <i> <em>grænse-stil</em> </i> <span>Ejendom</span> <i> <em> </em> </i> <span>for at skabe den vandrette linje. Vi kan enten bruge</span> <i> <em>border-top</em> </i> <span>egenskab, der angiver stilen for den øverste kant eller</span> <i> <em>grænse-bund</em> </i> <span>egenskab, som kan indstille stilen for den nederste kant af et element. Begge egenskaber kan bruges til at tilføje den vandrette linje.</span></p> <p dir='ltr'> <b> <strong>Eksempel:</strong> </b> <span>Dette eksempel beskriver tegningen af den vandrette linje ved hjælp af</span> <i> <em>grænse-stil</em> </i> <span>Ejendom.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vandret linje ved hjælp af CSS Propertiestitle><style>.horizontal_line { width: 90%; højde: 5px; border-top: 5px prikket sort; linjehøjde: 80%; } .line { border-bottom: 5px fast rød; margin-top: 5px; bredde: 90%; } stil> hoved> <body> <h2>Vandret linje ved hjælp af CSS Propertiesh2><h3>stiplet vandret linieh3><div>div><h3>Almindelig vandret linieh3><div>div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="horisontal linje ved hjælp af CSS eksempel output"><p>Produktion</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/html-dom/">Html-Dom</a> </li><li> <a href="/cheat-sheet/">Snydeark</a> </li><li> <a href="/google-docs/">Google Docs</a> </li><li> <a href="/exponents-maq/">Eksponenter - Maq</a> </li><li> <a href="/list/">Liste Af</a> </li><li> <a href="/apache-ant-tutorial/">Tutorial Til Apache-Myre</a> </li><li> <a href="/blogs/">Blogs</a> </li><li> <a href="/graph-basics/">Graf-Grundlæggende</a> </li><li> <a href="/r-dataframe-function/">R Dataframe-Funktion</a> </li><li> <a href="/moores-voting-algorithm/">Moores Stemmealgoritme</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">Sådan låser du formler i Excel</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> En datalogiportal for nørder. Den indeholder velskrevne, gennemtænkte og velforklarede datalogi- og programmeringsartikler, quizzer og spørgsmål om praksis/konkurrencedygtig programmering/virksomhedsinterview.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-lock-formulas-excel"> <i class="fa fa-external-link"></i> Læs Mere</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/when-do-sat-scores-come-out-131506">Hvornår udkommer SAT-score? Frigivelsesplan for SAT Score</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-sort-characters-string-javascript">Sådan sorteres tegn i en streng i JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-supervised">Forskellen mellem superviseret og uovervåget læring</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/geometry-definition">Geometri – Definition, eksempler, 2D- og 3D-former og applikationer</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dsa-tutorials/">Dsa Tutorials</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">Populære Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-valueof">java værdi af streng</a>
</li><li><a href="/fibonacci-series-java">fibonacci-serien i java</a>
</li><li><a href="/java-thread-destroy-method">tråd.ødelægge</a>
</li><li><a href="/what-is-bash">Bourne-igen-skal</a>
</li><li><a href="/how-create-dropdown-list-using-javascript">javascript til dropdown</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 Rettigheder Forbeholdes | <a href="//lv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>