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="//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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/spring-boot-tutorial/">Tutorial Spring Boot</a> </li><li> <a href="/celebrity/">Celebritate</a> </li><li> <a href="/minecraft-guide/">Ghid Minecraft</a> </li><li> <a href="/get-advice/">Obțineți Sfaturi</a> </li><li> <a href="/temples/">Temple</a> </li><li> <a href="/cpp-iterator/">Cpp-Iterator</a> </li><li> <a href="/photoshop-tutorial/">Tutorial Photoshop</a> </li><li> <a href="/nginx-tutorial/">Tutorial Nginx</a> </li><li> <a href="/python-tkinter/">Python-Tkinter</a> </li><li> <a href="/java-awt-events/">Java Awt Și Evenimente</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">Motor sincron</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Motor sincron cu blog, ce este quora, ce este yandex, pagina de contact, motor de căutare duckduckgo, jurnal motor de căutare, facebook, google chrome, firefox etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/synchronous-motor"> <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="/operator-functions-in-python-set-1">Funcții operator în Python | Setul 1</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/expert-strategy-guide-1311268">Ghid de strategie expert: Întrebarea SAT a zilei</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/constructors-python">Constructori în Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/perl-tutorial/">Tutorial Perl</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/periodic-table-elements">Tabelul periodic al elementelor</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="/how-open-json-file">citește fișierele json</a>
</li><li><a href="/java-xor">java xor</a>
</li><li><a href="/moore-machine">exemple de mașină Moore</a>
</li><li><a href="/add-elements-array-java">adăugarea java la o matrice</a>
</li><li><a href="/java-convert-string-int">parse string la int</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="//sv.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>
</body>
</html>