Crearea unei pagini web atractive din punct de vedere vizual și bine structurat implică adesea utilizarea de linii orizontale. Aceste rânduri pot ajuta la separarea diferitelor secțiuni de conținut, facilitând citirea și înțelegerea informațiilor prezentate de către utilizatori. În acest ghid, vom explora două metode eficiente de a adăuga linii orizontale în HTML: folosind>
normalizare în baza de date
etichete și proprietăți CSS.
Diferite abordări pentru a adăuga o linie orizontală în HTML
1. Folosind
etichetă:
The Regula orizontală t la (
)este folosit pentru a insera linii orizontale în documentul HTML pentru a separa secțiuni ale documentului. Este o etichetă goală sau neîmperecheată, ceea ce înseamnă că nu este nevoie de eticheta de închidere.
Exemplu: Acest exemplu descrie
eticheta pentru a adăuga linia orizontală.HTML
Titlul liniei orizontale> cap> <body> <h2>Linie orizontală folosind diverse atributesh2><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>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="Linie orizontală HTML folosind eticheta hr"><p>Ieșire</p> <h3> <b> <strong>2. Utilizarea proprietăților CSS:</strong> </b> </h3><p dir='ltr'><span>În această abordare, vom folosi</span> <i> <em>stil de chenar</em> </i> <span>Proprietate</span> <i> <em> </em> </i> <span>pentru a crea linia orizontală. Putem folosi fie</span> <i> <em>border-top</em> </i> <span>proprietate care specifică stilul chenarului superior sau al</span> <i> <em>chenar-de jos</em> </i> <span>proprietate, care poate seta stilul marginii de jos a unui element. Ambele proprietăți pot fi folosite pentru a adăuga linia orizontală.</span></p> <p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Acest exemplu descrie desenul liniei orizontale folosind</span> <i> <em>stil de bordura</em> </i> <span>Proprietate.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Linie orizontală folosind CSS Propertiestitle><style>.linie_orizontală { lățime: 90%; înălțime: 5px; chenar-sus: 5px negru punctat; înălțimea liniei: 80%; } .line { border-bottom: 5px continu red; margine-sus: 5px; latime: 90%; } stil> cap> <body> <h2>Linie orizontală folosind CSS Propertiesh2><h3>linie orizontală punctatăh3><div>div><h3>Linie orizontală simplăh3><div>div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="linie orizontală folosind exemplu de ieșire CSS"><p>Ieșire</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/c-functions/">C-Funcții</a> </li><li> <a href="/python-exceptions/">Python-Excepții</a> </li><li> <a href="/oracle-tutorial/">Tutorial Oracle</a> </li><li> <a href="/definitions/">Definiții</a> </li><li> <a href="/android-tutorial/">Tutorial Android</a> </li><li> <a href="/data-structures-algorithms-qna/">Structuri De Date Și Algoritmi-Qna</a> </li><li> <a href="/vba-tutorial/">Tutorial Vba</a> </li><li> <a href="/c-arrays/">C-Matrice</a> </li><li> <a href="/cpp-operator-overloading/">Cpp-Operator-Supraîncărcare</a> </li><li> <a href="/permutation/">Permutare</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">Omite lista în Structura datelor</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Omite lista în Structura de date cu Introducere, Analiză asimptotică, Matrice, Pointer, Structură, Listă legată individual, Listă dublu legată, Grafic, Arbore, Arborele B, Arborele B+, Arborele Avl etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/skip-list-data-structure"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/relation-between-frequency">Relația dintre frecvență și lungime de undă</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-requests-python">Cum se instalează cereri în Python - Pentru Windows, Linux, Mac</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-are-college-prep-courses-131564">Ce sunt cursurile și cursurile de pregătire pentru colegiu?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-160cm-feet">Ce înseamnă 160 cm în picioare?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/line-command">Linie de comandă</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/mysql-not-equal">nu este egal cu mysql</a>
</li><li><a href="/how-access-android-settings-menu">deschide meniul de setări</a>
</li><li><a href="/objects-classes-java">obiect java</a>
</li><li><a href="/hardcover-vs-paperback">cartonată vs broșată</a>
</li><li><a href="/java-string-compareto">metoda de comparare java</a>
</li><li><a href="/how-convert-byte-array-string-java">matrice de octeți în șir de caractere java</a>
</li><li><a href="/java-map-interface">harta in 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 Toate Drepturile Rezervate | <a href="//techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>