Jak utworzyć pasek wyszukiwania w HTML
Różne komponenty tworzą strony internetowe aplikacji, takie jak ładowarka, paski nawigacyjne, paski wyszukiwania i inne. Właściwości CSS są wykorzystywane do stylizacji tych komponentów. Mówiąc dokładniej, komponent, który jest prawie obowiązkowy dla każdej aplikacji, jest „Pasek wyszukiwania". Paski wyszukiwania służą do lepszej dostępności użytkownikom w sposób, w jaki użytkownicy wyszukują komponenty zamiast przeglądać całą stronę internetową.
Ten post będzie prowadził:
- Co to jest pasek wyszukiwania?
- Jak utworzyć pasek wyszukiwania w HTML?
- Jak dodać właściwość przejściową do przycisku paska wyszukiwania?
Co to jest pasek wyszukiwania?
Pasek wyszukiwania jest graficznym elementem sterowania dowolnej aplikacji. Składa się głównie z jedno-linii pola tekstowego i przycisku. Działa w taki sposób, że użytkownik wpisuje informacje w polu wejściowym do wyszukiwania, a następnie naciska przycisk, aby uzyskać wyniki.
Jak utworzyć pasek wyszukiwania w HTML?
Po pierwsze, dodaj element DIV z klasą „Wyszukiwanie-main". Dodaj kolejny tag div z nazwą klasy „Poszukiwanie paska„Wewnątrz tego div. Następnie umieść w nim znacznik wejściowy i znacznik przycisku. Znacznik wejściowy jest powiązany z atrybutami „typ”Z wartością jako„tekst”I„symbol zastępczy”Służy do pokazania tekstu w polu wejściowym.
Oto kod HTML:
CSS
W CSS wykorzystywane są różne właściwości do stylizowania paska wyszukiwania. Omów je jeden po drugim!
Styl wszystkie rodzaje elementów
*
Margines: 0;
Wyściółka: 0;
Rozmiar pola: granica;
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;
Symbol gwiazdki „*” służy do reprezentowania wszystkich rodzajów elementów, a jeśli następuje dowolny element, klasa lub identyfikatory, będzie reprezentował całą tę określoną nazwę w całym dokumencie.
- "margines”Własność o wartości 0 nie zapewni miejsca wokół żadnego elementu.
- "wyściółka”Z wartością 0 określa, że nie przypisuje się miejsca wokół zawartości.
- "rozmiar pudełka”Z wartością graniczną obejmuje wyściółkę i granicę do całkowitej wysokości i szerokości elementu.
- "rodzina czcionek”Jest wykorzystywany do wyboru czcionki wszystkich elementów.
Element „Body” stylu
ciało
kolor tła: Darkslaterey;
Kolor tła sekcji całego ciała jest ustawiony na „Darkslaterey" kolor.
Styl „wyszukiwanie” div
.wyszukiwanie
kolor tła: RGBA (0, 0, 0, 0.159);
maksymalna szerokość: 700px;
Margines: 150px Auto;
Wysokość: 400px;
Radiusz graniczny: 30px;
Element z wyszukiwaniem atrybutów klasowych ma różne właściwości opisane poniżej:
- "maksymalna szerokość”Określa maksymalny limit szerokości.
- "wysokość”Określa całkowitą wysokość Div na 400px.
- "Radiusz graniczny”Zapewnia promień 30px wokół elementu DIV.
- „„kolor tła" I "margines„Właściwości działają jak omówiono powyżej.
Styl „Search-Bar” div
.Poszukiwanie-bar
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;
Wysokość: 100%;
Div Search-Bar jest stylizowany z właściwościami CSS, które omówiono poniżej:
- "wyświetlacz„Property Flex jest wykorzystywane do wykonania responsywnego elastycznego układu Div.
- "justify-content”Wyrównuje elastyczne elementy Div poziomo.
- "Wyrównanie”Ustawia wyrównanie elastycznych elementów pionowo.
- "wysokość„Własność występuje jak wyjaśniono powyżej.
Element stylu „wejściowy”
.Wejście do wyszukiwania
granica: 1px stały RGB (47, 63, 63);
Wyściółka: 20px 30px;
Rozmiar czcionki: 24px;
kolor tła: RGB (85, 104, 104);
Kolor: #ffffff;
Zarys: Brak;
Pole wejściowe Div paska wyszukiwania podano właściwości, które zostały wyjaśnione poniżej:
- "granica„Właściwość ustawia granicę wokół pola wejściowego z szerokością, stylem liniowym i kolorem.
- "rozmiar czcionki„Właściwość określa rozmiar czcionki tekstu.
- "kolor”Definiuje kolor tekstu pola wejściowego.
- "zarys„Właściwość o wartości 0 nie ustawi linii wokół granicy elementu, głównie po kliknięciu.
- „„wyściółka" I "kolor tła”Właściwości działają jak podano powyżej.
Styl zastępczy
.Wyszukiwarka wpisu :: zastępca
Kolor: #dadada;
Atrybut zastępcy pola wejściowego Div paska wyszukiwania jest przypisany do „kolor„Nieruchomość #dadada. Zastosuje kolor do tekstu zastępczego.
Przycisk stylu
.przycisk wyszukiwania baru
granica: 1px stały RGB (47, 63, 63);
Wyściółka: 20px 30px;
Rozmiar czcionki: 22px;
kolor tła: RGB (12, 33, 33);
Kolor: #A3A3A3;
Kursor: wskaźnik;
Margin-left: 10px;
Właściwości elementu przycisku Div Search-Bar zostały wyjaśnione poniżej:
- "kursor„Właściwość określa styl kursora myszy podczas wskazywania przycisku.
- "margines lewic”Dodamy trochę miejsca w lewo od przycisku.
- Wszystkie pozostałe właściwości działają tak samo.
Wykonując wyżej wymieniony kod, otrzymamy wynik, jak pokazano na poniższym obrazku:
Jak wiemy, właściwości przejściowe i animacyjne na przedmiotach sprawiają, że są bardziej interaktywne i zabawne. Tak więc następna sekcja opisuje dodanie przejścia do przycisku wyszukiwania.
Jak dodać właściwość przejściową do przycisku paska wyszukiwania?
Dodaj właściwość przejścia z zestawem wartości jako „Wszystkie 0.3s łatwość" do ".Przycisk Poszukiwania paska”, Gdzie wszystkie wskazują wszystkie właściwości, 0.3s wskazuje na czas przejścia, a łatwość oznacza powolny start, a potem szybki i kończy się powoli:
przejście: wszystkie 0.3s łatwość;
Teraz, aby przejść na przycisk na zawisie, element przycisku jest stylizowany jak wspomniany w poniższym bloku kodu.
Przycisk stylu na zawisie
.Przycisk wyszukiwania: Hover
Transform: Translatey (-5px);
Element przycisku jest stylizowany przy użyciu transformacji właściwości z wartością „tłumaczenie (-5px)”Co oznacza na podnoszeniu myszy, przycisk porusza się w pozycji pionowej.
Dodany efekt można zobaczyć na poniższym obrazku:
To wspaniale! Interaktywne pasek wyszukiwania jest z powodzeniem utworzone w HTML za pomocą CSS.
Wniosek
W HTML pasek wyszukiwania składa się głównie z pola wejściowego i przycisku, użycia i elementów. Komponenty internetowe mogą być stylizowane jako interaktywne, zapewniając właściwości animacji i przejścia, jak wspomniano. Ten blog wyjaśnił, jak utworzyć pasek wyszukiwania w HTML z dokładnym przykładem.