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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/min-heap/">Min-Bunke</a> </li><li> <a href="/python-turtle-programming/">Python Turtle Programmering</a> </li><li> <a href="/java-jsp/">Java-Jsp</a> </li><li> <a href="/analog-communication/">Analog Kommunikation</a> </li><li> <a href="/c-set-function/">C++ Sæt Funktion</a> </li><li> <a href="/converter-tools/">Konverter-Værktøjer</a> </li><li> <a href="/python-math-library/">Python Matematik-Bibliotek</a> </li><li> <a href="/c-input-output/">C-Input-Output</a> </li><li> <a href="/linux-man-pages/">Linux Man Pages</a> </li><li> <a href="/algorithms-misc/">Algoritmer - Diverse</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Hvordan åbner jeg Windows Mine dokumenter eller Dokumenter-mappen?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Sådan åbnes Windows Mine dokumenter eller Dokumenter-mappen med forklaring af inputenhed, outputenhed, hukommelse, CPU, bundkort, computernetværk, virus, software, hardware osv.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-open-windows-my-documents"> <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="/difference-between-array">Forskellen mellem Array og ArrayList</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-rm-linux-delete-file">Linux rm | Linux Slet fil</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-programming-language-tutorial">C Programmeringssprog tutorial</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/caesar-cipher-python">Caesar Cipher i Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mariah-carey-kids">Mariah Carey Kids (Mød hendes tvillinger med Nick Cannon)</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="/bfs-algorithm">bfs søgning</a>
</li><li><a href="/numpy-pad-python">np polstring</a>
</li><li><a href="/binary-search-python">binær søgepython</a>
</li><li><a href="/java-variables">type variabler java</a>
</li><li><a href="/java-convert-string-int">hvordan man konverterer streng til heltal 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 Alle Rettigheder Forbeholdes | <a href="//tr.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>