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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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><!--//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="/physics-class-12-cat/">Fizica-Clasa-12</a> </li><li> <a href="/sql-functions/">Sql-Funcții</a> </li><li> <a href="/ssis-tutorial/">Tutorial Ssis</a> </li><li> <a href="/python-pandas/">Python-Panda</a> </li><li> <a href="/data-science/">Știința Datelor</a> </li><li> <a href="/hadoop-tutorial/">Tutorial Hadoop</a> </li><li> <a href="/spring-boot-tutorial/">Tutorial Spring Boot</a> </li><li> <a href="/discord/">Discordie</a> </li><li> <a href="/csharp-operators/">Operatori Csharp</a> </li><li> <a href="/kafka-tutorial/">Tutorial Kafka</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Git Add</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Git Add with Git Tutorial, Git Introduction, Git, Ce este Git, GitHub, Ce este GitHub, Git vs GitHub, Git Mercurial, Instalare Git pentru Windows, Instalare Git pentru Ubuntu, Configurare Git Environment, Instrumente Git pentru linia de comandă, Instrumente Git , etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/git-add"> <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="/convert-cubic-foot-dry-us-gallon">Convertiți piciorul cub în galon american uscat</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/von-neumann-model">Modelul Von Neumann</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/context-free-grammar">Gramatică fără context (CFG)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-period">Ce este o perioadă?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/randint-function-python">Randint() Funcția în Python</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="/an-array-strings-c">matrice de șiruri în limbaj c</a>
</li><li><a href="/difference-between-hashset">hashset vs hashmap</a>
</li><li><a href="/how-iterate-map-java">iterator de hartă java</a>
</li><li><a href="/images-markdown">reducere cu imagini</a>
</li><li><a href="/operating-system-examples">exemple de sisteme de operare</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="//sl.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>