HTML assegna la struttura della pagina Web di base in un sito Web e possono essere applicati diversi tipi di stile utilizzando CSS. Ha anche varie proprietà di styling utilizzate per disegnare forme diverse, tra cui cerchi, quadrati, rettangoli, linee, ovali e molti altri. Inoltre, una linea è quella che è l'elemento più comunemente utilizzato che può essere aggiunto in qualsiasi forma, inclusi verticalmente che orizzontalmente in un contenitore.

Questo post discuterà specificamente i seguenti metodi:

• Metodo 1: come tracciare una linea in un div usando il "Border-Bottom" Proprietà?
• Metodo 2: come tracciare una linea in un div usando il "

  ---

  "Tag?

Metodo 1: come tracciare una linea in un div usando la proprietà "bordo"?

Per tracciare una linea in un div, puoi usare il "Border-Bottom"Proprietà, che nasconde tutti i lati tranne il fondo del bordo.

Per applicare questo approccio, controlla i passaggi dati.

Passaggio 1: crea un contenitore di div

Innanzitutto, crea un contenitore di div con l'aiuto di ""Tag e inserire un"id"Attributo con un nome secondo la tua scelta.

Passaggio 2: aggiungi l'intestazione

Successivamente, aggiungi un'intestazione utilizzando qualsiasi etichetta di intestazione da "

" A "

". Ad esempio, abbiamo usato il "

"Tag per l'aggiunta della intestazione di livello uno.

Passaggio 3: crea un altro contenitore di div

Ora, crea un altro contenitore Div seguendo la stessa procedura:

Disegna una linea

Produzione

Passaggio 4: contenitore "Main-Div"

Accedi al contenitore Div utilizzando il selettore ID "#"E il nome del"id". Quindi, applica le proprietà CSS per ulteriori styling:

#main-div
Colore: RGB (247, 171, 9);
Testo-align: centro;
Margine: 50px;

Qui:

• "colore"La proprietà viene utilizzata per specificare il colore dell'elemento selezionato.
• "allineamento"La proprietà allinea il testo aggiunto in"centro".
• "margine"Definisce lo spazio per l'elemento esterno.

Passaggio 5: contenitore "line-div" di stile

Quindi, accedi al secondo contenitore Div e applica la seguente proprietà CSS per ottenere l'output desiderato:

.Line-div
larghezza: 150px;
Altezza: 50px;
Posizione: assoluto;
Border-Bottom: 3px Rosso solido

Secondo lo snippet di codice sopra:

• Impostare il "larghezza"Valore per allocare la larghezza dell'area del contenuto dell'elemento.
• "altezza"La proprietà definisce la dimensione dell'elemento verticalmente.
• "posizione"Specifica il tipo di metodo di posizionamento utilizzato per un elemento
• Ultimo, ma non per importanza, "Border-Bottom"Definisce la larghezza, lo stile di linea e il colore del bordo inferiore di una scatola.

Si può osservare che abbiamo aggiunto con successo una linea nella parte inferiore del div:

Metodo 2: come tracciare una linea in un div usando il "

---

"Tag?

In HTML, il "

---

"Tag rappresenta una regola orizzontale che definisce una pausa tematica nella pagina. Più specificamente, questo tag può essere utilizzato per disegnare una linea in un div senza usare le proprietà CSS.

Per disegnare una linea in un contenitore di div usando il

---

tag, prova le istruzioni qui sotto.

Passaggio 1: creare un contenitore

Inizialmente, crea un contenitore div con l'aiuto di ""Tag. Inoltre, aggiungi una classe con un nome all'interno dell'apertura "". Quindi, aggiungi un intestazione usando "

"Tag.

Passaggio 2: inserire "

---

"Tag per disegnare una riga

Successivamente, inserire il tag paragrafo "

"E aggiungi il"

---

"Tag all'interno del

etichetta. Inoltre, puoi anche specificare il colore all'interno del tag HR:

Disegna una linea

---

Produzione

Passaggio 3: applicare le proprietà CSS al contenitore "linea"

Quindi, accedi al "linea"Container usando il selettore punti e modellalo di conseguenza:

.linea
Bordo: 0;
Altezza: 3px;
Margine: 50px;

Qui, abbiamo applicato il "altezza","larghezza" E "margine"Proprietà al div selezionato.

Produzione

Si può osservare che una linea è stata tracciata usando il

---

Tag in HTML.

Conclusione

Per tracciare una linea in un div, gli utenti HTML possono utilizzare il "

---

Tag o il "Borth-Border"Proprietà CSS. Nel primo approccio, la proprietà CSS "Borth-Border"Nasconde tutti i lati del bordo tranne il fondo del bordo. Per il secondo approccio, è necessario specificare solo il "

---

"Tag per la creazione di una linea orizzontale senza usare le proprietà CSS. Questo post ha dimostrato come tracciare una linea in un div usando due metodi diversi.