HTML przydziela podstawową strukturę strony internetowej na stronie internetowej, a różne rodzaje stylizacji można zastosować, stosując CSS. Ma również różne właściwości stylistyczne używane do rysowania różnych kształtów, w tym koła, kwadraty, prostokąty, linie, owale i wiele innych. Ponadto linia jest taka, która jest najczęściej używanym elementem, który można dodać w dowolnej formie, w tym zarówno pionowo, jak i poziomo w pojemniku.

Ten post będzie szczegółowo omówić następujące metody:

• Metoda 1: Jak narysować linię w div za pomocą „Bottom graniczny" Nieruchomość?
• Metoda 2: Jak narysować linię w div za pomocą „

  ---

  ”Tag?

Metoda 1: Jak narysować linię w div za pomocą właściwości „brzeg”?

Aby narysować linię w div, możesz użyć „Bottom graniczny„Własność, która ukrywa wszystkie strony oprócz dna granicy.

Aby zastosować to podejście, sprawdź podane kroki.

Krok 1: Utwórz kontener Div

Najpierw stwórz kontener DIV za pomocą „”Tag i wstaw„ „ID”Atrybut z nazwą zgodnie z twoim wyborem.

Krok 2: Dodaj nagłówek

Następnie dodaj nagłówek, używając dowolnego znacznika nagłówka z „

" Do "

". Na przykład użyliśmy „

”Tag do dodania nagłówka poziomu pierwszego.

Krok 3: Utwórz inny kontener DIV

Teraz utwórz inny kontener DIV, postępując zgodnie z tą samą procedurą:

Narysuj linię

Wyjście

Krok 4: Stylowy pojemnik „Main-Div”

Uzyskaj dostęp do kontenera Div za pomocą selektora identyfikatora „#”I nazwa„ID". Następnie zastosuj właściwości CSS do dalszego stylizacji:

#Main-Div
Kolor: RGB (247, 171, 9);
Text-Align: Center;
Margines: 50px;

Tutaj:

• "kolor„Właściwość jest wykorzystywana do określenia koloru wybranego elementu.
• "tekst-align”Właściwość wyrównuje dodany tekst w„Centrum".
• "margines„Definiuje przestrzeń dla elementu na zewnątrz.

Krok 5: Style pojemnik „Line-Div”

Następnie uzyskaj dostęp do drugiego kontenera Div i zastosuj następującą właściwość CSS, aby uzyskać pożądane dane wyjściowe:

.Linia-Div
szerokość: 150px;
Wysokość: 50px;
Pozycja: absolutna;
Bottom graniczny: 3px stały czerwony

Zgodnie z powyższym fragmentem kodu:

• Ustaw "szerokość„Wartość przydzielania szerokości obszaru zawartości elementu.
• "wysokość„Właściwość określa rozmiar elementu pionowo.
• "pozycja”Określa rodzaj metody pozycjonowania zastosowanej dla elementu
• Wreszcie „”Bottom graniczny”Określa szerokość, styl linii i kolor dolnej granicy pudełka.

Można zauważyć, że pomyślnie dodaliśmy linię na dole Div:

Metoda 2: Jak narysować linię w div za pomocą „

---

”Tag?

W HTML „The”

---

”Tag reprezentuje zasadę poziomą, która definiuje przerwę tematyczną na stronie. Mówiąc dokładniej, ten znacznik można wykorzystać do rysowania linii w div bez użycia właściwości CSS.

Narysować linię w pojemniku Div za pomocą

---

tag, wypróbuj poniższe instrukcje.

Krok 1: Utwórz pojemnik

Początkowo stwórz kontener DIV za pomocą „”Tag. Dodaj także klasę o nazwie wewnątrz otworu „”. Następnie dodaj nagłówek za pomocą „

”Tag.

Krok 2: Wstaw „

---

„Tag, aby narysować linię

Następnie wstaw akapit „

”I dodaj„

---

”Tag wewnątrz

etykietka. Ponadto możesz również określić kolor wewnątrz znacznika HR:

Narysuj linię

---

Wyjście

Krok 3: Zastosuj właściwości CSS do pojemnika „linii”

Następnie uzyskaj dostęp do „linia„Kontener za pomocą selektora kropki i stylizuje go odpowiednio:

.linia
granica: 0;
Wysokość: 3px;
Margines: 50px;

Tutaj zastosowaliśmy „wysokość”,„szerokość" I "margines„Właściwości wybranych div.

Wyjście

Można zauważyć, że linia została narysowana za pomocą

---

Tag w html.

Wniosek

Aby narysować linię w div, użytkownicy HTML mogą albo skorzystać z „

---

”Tag lub„Dolna granica„Własność CSS. W pierwszym podejściu nieruchomość CSS „Dolna granica„Ukrywa wszystkie strony granicy, z wyjątkiem dna granicy. W przypadku drugiego podejścia musisz określić tylko „

---

„Tag do tworzenia linii poziomej bez użycia właściwości CSS. Ten post pokazał, jak narysować linię w div, używając dwóch różnych metod.