HTML tildeler den grunnleggende websidestrukturen på et nettsted, og forskjellige typer styling kan brukes ved å bruke CSS. Den har også forskjellige stylingegenskaper som brukes til å tegne forskjellige former, inkludert sirkler, firkanter, rektangler, linjer, ovaler og mange flere. Videre er en linje en som er det mest utnyttede elementet som kan legges til i hvilken som helst form, inkludert vertikalt, så vel som horisontalt i en beholder.

Dette innlegget vil spesifikt diskutere følgende metoder:

• Metode 1: Hvordan tegne en linje i en div ved hjelp av “Border-Bottom”Eiendom?
• Metode 2: Hvordan tegne en linje i en div ved hjelp av “

  ---

  " Stikkord?

Metode 1: Hvordan tegne en linje i en div ved hjelp av egenskapen “Border-Bottom”?

For å tegne en linje i en div, kan du bruke “Border-Bottom”Eiendom, som skjuler alle sider bortsett fra grensens bunn.

For å bruke denne tilnærmingen, sjekk ut de gitte trinnene.

Trinn 1: Lag en div container

Først må du lage en DIV -beholder ved hjelp av "”Merk og sett inn en“id”Attributt med et navn i henhold til ditt valg.

Trinn 2: Legg til overskrift

Neste, legg til en overskrift ved å bruke en hvilken som helst overskriftskode fra "

" til "

”. For eksempel har vi brukt "

”Tag for å legge til nivå en overskrift.

Trinn 3: Lag en annen div container

Lag nå en annen DIV -beholder ved å følge samme prosedyre:

Tegn en linje

Produksjon

Trinn 4: Stil “Main-Div” -beholder

Få tilgang til DIV -beholderen ved å bruke ID -velgeren “#”Og navnet på“id”. Bruk deretter CSS -egenskapene for videre styling:

#main-div
Farge: RGB (247, 171, 9);
tekst-align: sentrum;
Margin: 50px;

Her:

• “farge”Eiendom brukes til å spesifisere fargen på det valgte elementet.
• “Tekstalign”Eiendom justerer den ekstra teksten i“senter”.
• “margin”Definerer plass for elementet utenfor.

Trinn 5: Stil “Line-div” -beholder

Få tilgang til den andre DIV -beholderen og bruk følgende CSS -egenskap for å få ønsket utgang:

.Line-div
Bredde: 150px;
Høyde: 50px;
Posisjon: Absolutt;
Border-Bottom: 3px solid rød

I henhold til ovennevnte kodebit:

• Sett "bredde”Verdi for å tildele bredden på elementinnholdsområdet.
• “høyde”Eiendom definerer elementstørrelsen vertikalt.
• “posisjon”Angir hvilken type posisjonsmetode som brukes for et element
• Sist men ikke minst, "Border-Bottom”Definerer bredden, linjestilen og fargen på bunnen av en boks.

Det kan observeres at vi har lagt til en linje i bunnen av div:

Metode 2: Hvordan tegne en linje i en div ved hjelp av “

---

" Stikkord?

I HTML, “

---

”Tag representerer en horisontal regel som definerer et tematisk brudd på siden. Mer spesifikt kan denne taggen brukes til å tegne en linje i en div uten å bruke CSS -egenskapene.

Å tegne en linje i en div container ved hjelp av

---

Tag, prøv instruksjonene nedenfor.

Trinn 1: Lag en beholder

Opprinnelig lage en div -container ved hjelp av "" stikkord. Legg også til en klasse med et navn inne i "" åpningen. Legg deretter til en overskrift ved å bruke "

" stikkord.

Trinn 2: Sett inn “

---

”Tag for å tegne en linje

Etter det, sett inn avsnitts -taggen “

”Og legg til“

---

”Tag inni

stikkord. Dessuten kan du også spesifisere fargen inne i HR -taggen:

Tegn en linje

---

Produksjon

Trinn 3: Bruk CSS -egenskaper på “Linje” -beholder

Få tilgang til “linje”Container ved hjelp av DOT -velgeren og stil den deretter:

.linje
Grense: 0;
Høyde: 3px;
Margin: 50px;

Her har vi brukt “høyde”,“bredde”Og“margin”Egenskaper til den valgte div.

Produksjon

Det kan observeres at en linje er trukket ved hjelp av

---

Tag i HTML.

Konklusjon

For å tegne en linje i en div, kan HTML -brukere enten bruke "

---

”Tag eller“Bunnsbegrenset”CSS -eiendom. I den første tilnærmingen, CSS -eiendommen “Bunnsbegrenset”Skjuler alle sider av grensen bortsett fra bunnen av grensen. For den andre tilnærmingen må du bare spesifisere "

---

”Tag for å lage en horisontal linje uten å bruke CSS -egenskaper. Dette innlegget har vist hvordan du tegner en linje i en div ved hjelp av to forskjellige metoder.