Z pomocą HTML i CSS programiści mogą zaprezentować swoją pracę, tworząc pasek postępu. Zasadniczo służy do przeglądu postępu obecnego projektu rozwoju lub dowolnego przedmiotu. Ponadto w HTML dostępnych jest wiele metod w celu utworzenia paska postępu za pomocą znacznika „”, który jest wykorzystywany do wyświetlania wskaźnika pokazującego postęp w wykonaniu zadania. Dodatkowo możesz wykonać pasek postępu przez wiele właściwości CSS.

Ten post wyjaśni:

• Co to jest pasek postępu?
• Metoda 1: Jak utworzyć pasek postępu za pomocą znacznika HTML?
• Metoda 2: Jak utworzyć pasek postępu, wykorzystując właściwości CSS?

Co to jest pasek postępu?

Do reprezentowania graficznego elementu sterującego jest stosowany pasek postępu, który jest używany do konceptualizacji statusu ulepszonego komputera.

Metoda 1: Jak utworzyć pasek postępu za pomocą znacznika HTML?

Aby zrobić pasek postępu za pomocą HTML, spójrz na poniższe instrukcje.

Krok 1: Utwórz kontener Div
Najpierw utwórz kontener DIV za pomocą „„Oznacz i określ klasę o nazwie zgodnie z wyborem.

Krok 2: Dodaj nagłówek
Wstaw nagłówek z pomocą „

”Tag i dodaj tekst do nagłówka między znacznikiem nagłówka.

Krok 3: Utwórz pasek postępu
Teraz dodaj „„Tag do tworzenia paska postępu. Podaj także „wartość”Zbieżnego paska postępu i„Max„Atrybut jest wykorzystywany do ustawiania maksymalnego rozmiaru paska postępu:

W trakcie

Można zauważyć, że pomyślnie stworzyliśmy pasek postępu:

Metoda 2: Jak utworzyć pasek postępu, wykorzystując właściwości CSS?

Aby utworzyć pasek postępu w CSS, wypróbuj wspomnianą procedurę.

Krok 1: Zrób kontener DIV
Po pierwsze, zrób kontener DIV za pomocą „”Tag. Dodaj także klasę o określonej nazwie wewnątrz znacznika otwierającego.

Krok 2: Utwórz inny kontener DIV
Następnie utwórz kolejny pojemnik pomiędzy pierwszym kontenerem Div:

Krok 3: Uzyskaj klasę kontenerów Div Div
Uzyskaj dostęp do klasy kontenerowej Div za pomocą selektora kropki i nazwy klasy jako „.ProgressBar-Div”I zastosuj wspomniane nieruchomości:

.ProgressBar-Div
RADIUS BRAVES: 10px;
Wyściółka: 3px;
Margines: 50px;
kolor tła: RGB (12, 4, 2);

Tutaj:

• "Radiusz graniczny”Właściwość określa promień zewnętrznej krawędzi granicy narożnika elementu. Użytkownicy mogą ustawić pojedynczy promień do robienia okrągłych zakrętów.
• "wyściółka”Określa przestrzeń wewnątrz zdefiniowanej granicy wokół elementu.
• "margines„Własność określa przestrzeń poza zdefiniowaną granicą.
• "kolor tła”Jest wykorzystywany do ustawiania koloru dla tła elementu.

Krok 4: Zrób pasek postępu
Uzyskaj dostęp do wewnętrznego kontenera Div i ukształtuj go w następujący sposób:

.ProgressBar-Div> div
kolor tła: RGB (210, 233, 5);
Szerokość: 50%;
Wysokość: 30px;
RADIUS BERDER: 12PX;

W powyższym bloku:

• „„szerokość„Właściwość jest wykorzystywana do ustawiania rozmiaru elementu w poziomie.
• Następny, "wysokość”Jest wykorzystywany do przydzielania wysokości elementu.
• "Radiusz graniczny„Obiekt używany do tworzenia zaokrąglonych zakątków.

Wyjście

Chodziło o tworzenie paska postępu z HTML i CSS.

Wniosek

Aby utworzyć pasek postępu za pomocą HTML i CSS, najpierw stwórz zagnieżdżoną kontener DIV i dodaj „" element. Następnie ukształtuj pierwszy kontener DIV, stosując właściwości CSS, w tym „Radiusz graniczny”,„wyściółka”,„margines”,„tło", I "kolor". Następnie stygnij wewnętrzny div, aby zrobić pasek postępu za pomocą „szerokość”,„wysokość", I "Radiusz graniczny". Ten post wyjaśnił, że pasek postępu z HTML i CSS.