HTML asigna la estructura básica de la página web en un sitio web, y se pueden aplicar diferentes tipos de estilo utilizando CSS. También tiene varias propiedades de estilo utilizadas para dibujar diferentes formas, incluidos círculos, cuadrados, rectángulos, líneas, óvalos y muchas más. Además, una línea es la que es el elemento más comúnmente utilizado que se puede agregar en cualquier forma, incluidos los años verticales, así como horizontales en un contenedor.

Esta publicación discutirá específicamente los siguientes métodos:

• Método 1: Cómo dibujar una línea en un DIV usando el "borde" Propiedad?
• Método 2: Cómo dibujar una línea en un DIV usando el "

  ---

  " Etiqueta?

Método 1: Cómo dibujar una línea en un DIV utilizando la propiedad "Border-Bottom"?

Para dibujar una línea en un div, puedes usar el "borde"Propiedad, que esconde todos los lados, excepto el fondo del borde.

Para aplicar este enfoque, consulte los pasos dados.

Paso 1: crear un contenedor Div

Primero, cree un contenedor Div con la ayuda del ""Etiqueta e inserte un"identificación"Atributo con un nombre según su elección.

Paso 2: Agregar encabezado

A continuación, agregue un encabezado utilizando cualquier etiqueta de encabezado de "

" a "

". Por ejemplo, hemos usado el "

"Etiqueta para agregar el encabezado de nivel uno.

Paso 3: crear otro contenedor Div

Ahora, cree otro contenedor DIV siguiendo el mismo procedimiento:

Dibuja una línea

Producción

Paso 4: Estilo "Main-Div" Contenedor

Acceda al contenedor Div utilizando el selector de identificación "#"Y el nombre del"identificación". Luego, aplique las propiedades CSS para un mayor estilo:

#principal-div
Color: RGB (247, 171, 9);
Text-Align: Center;
margen: 50px;

Aquí:

• "colorSe utiliza la propiedad para especificar el color del elemento seleccionado.
• "texto alineado"La propiedad alinea el texto adicional en el"centro".
• "margen"Define el espacio para el exterior del elemento.

Paso 5: Container de estilo "Line-Div"

Luego, acceda al segundo contenedor DIV y aplique la siguiente propiedad CSS para obtener la salida deseada:

.Line-Div
Ancho: 150px;
Altura: 50px;
Posición: Absoluto;
Border-Bottom: 3px rojo sólido

Según el fragmento de código anterior:

• Selecciona el "ancho"Valor para asignar el ancho del área de contenido del elemento.
• "altura"La propiedad define el tamaño del elemento verticalmente.
• "posición"Especifica el tipo de método de posicionamiento utilizado para un elemento
• Por último, pero no menos importante, "borde"Define el ancho, el estilo de línea y el color del borde inferior de una caja.

Se puede observar que hemos agregado con éxito una línea en la parte inferior del DIV:

Método 2: Cómo dibujar una línea en un DIV usando el "

---

" Etiqueta?

En HTML, el "

---

"La etiqueta representa una regla horizontal que define una ruptura temática en la página. Más específicamente, esta etiqueta se puede utilizar para dibujar una línea en un DIV sin usar las propiedades de CSS.

Para dibujar una línea en un recipiente Div utilizando el

---

Etiqueta, pruebe las instrucciones a continuación.

Paso 1: crear un contenedor

Inicialmente, cree un contenedor Div con la ayuda del "" etiqueta. Además, agregue una clase con un nombre dentro de la apertura "". Luego, agregue un encabezado usando el "

" etiqueta.

Paso 2: insertar "

---

"Etiqueta para dibujar una línea

Después de eso, inserte la etiqueta del párrafo "

"Y agregue el"

---

"Etiqueta dentro del

etiqueta. Además, también puede especificar el color dentro de la etiqueta de recursos humanos:

Dibuja una línea

---

Producción

Paso 3: Aplicar propiedades CSS al contenedor "línea"

Entonces, acceda a la "línea"Contenedor utilizando el selector de puntos y el estilo en consecuencia:

.línea
borde: 0;
Altura: 3px;
margen: 50px;

Aquí, hemos aplicado el "altura","ancho" y "margen"Propiedades para el DIV seleccionado.

Producción

Se puede observar que se ha dibujado una línea utilizando el

---

Etiqueta en html.

Conclusión

Para dibujar una línea en un DIV, los usuarios de HTML pueden utilizar el "

---

"Etiqueta o el"borde inferior"Propiedad CSS. En el primer enfoque, la propiedad CSS "borde inferiorPone todos los lados del borde, excepto el fondo del borde. Para el segundo enfoque, debe especificar solo el "

---

"Etiqueta para crear una línea horizontal sin usar propiedades CSS. Esta publicación ha demostrado cómo dibujar una línea en un DIV utilizando dos métodos diferentes.