HTML i CSS to języki programowania wymagane dla układu strony. Ponieważ koder postanowił nauczyć się podstaw zawodu powinien rozpocząć studiów, ponieważ na ich podstawie można stworzyć prostą stronę internetową.
W HTML i CSS, poziome menu witryny jest łatwe do zbudowania, poczynając od napisania frameworka.
Zbuduj framework
Na początek musisz zrobić znacznik HTML. Menu jest łatwiejsze do stworzenia listy oznaczonej tagami. Tag Twin wymaga zatem zamknięcia na końcu listy. Lepiej natychmiast dodać klasę do następnej stylizacji. Są dodawane sparowane przedmioty
przez liczbę punktów z linkami. Przykład:
ramy budynków
poziome menu
menu rozwijane
Stała
Okazuje się podłożu, które następnie wykonane poziome menu CSS Stałe lub spadku w dół.
Menu poziome
Po oznaczeniu kodu należy rozpocząć pracę ze stylem. Zauważ, że nawet znaczniki wykorzystywane do ramy domyślnie jest to blok, a tym samym do tworzenia zarówno konwencjonalne i poziome menu rozwijanych CSS należy zmienić typ elementu zamówienia. Można to zrobić za pomocą właściwości wyświetlania. Zostaje dodany do pozycji:
.menu li {display: inline; } Więc zmienia się w poziomą. Jeśli istnieje wiele punktów podrzędnych, mogą przejść do nowej linii bez dodawania określonych właściwości. W tym przypadku używana jest właściwośćdo wyświetlania przejść i transmisji tekstu. Nowrap przechowuje tekst w całości, bez dzielenia wyrazów, a pre-wrap przechowuje luki w kodzie HTML i dodaje automatyczne. .menu li {display: inline; white-space: nowrap; }
Aby uniknąć zatykania tekstu ciągłego, możesz tworzyć informacje w grupach i tworzyć dodatkowe podmenu, które dokładnie odda wszystko, co jest potrzebne. Podmenu można upuścić lub otworzyć.
menu rozwijanego
Po opanowaniu podstaw budowania poziome menu CSS rozwijane z podmenu możliwe jest wydawanie listę pionową. Lista znaczników musi być wielopoziomowa, dodaj dodatkowe znaczniki dla list z etykietami wewnątrz pożądanego elementu. W znacznik powinien być dołączony następujących elementów liniowych
, 1
: 1,1
: 1,2
,
2
,
3
,
4 [24 ] W css .menu li jest zamieniane na ".menu> li", aby wewnętrzne elementy stały się pionowe. Dodać rodzicielskiej wyboru względnego położenia, w którym element jest przesunięty od granic jednostki nadrzędnej i dziecko - bezwzględne (w pełni usuwane ze strumienia i koordynuje następnego elementu, a w przypadku ich braku, przeglądarka granice). Elementy ze względnym pozycjonowaniem mogą zawierać elementy podrzędne z absolutnym pozycjonowaniem w środku. Oznacza to, że gdy jednostka z position: relative części pozostają stałe w swoich miejscach w nim.
Norma upadków jest zawsze otwarty, jeśli nie dodawać wyświetlanie elementu tylko, gdy kursor myszy. Aby to zrobićdodatkowa lista jest domyślnie ukryta: .menu & gt; li {display: inline; pozycja: względna; } menu.second {position: absolute; (podmenu przyciągania do bloku rodzica): brak; (ukryj)} .menu & gt; li: hover .second {(element wyświetlający pseudo-klasę służy do wyświetlania listy po najechaniu kursorem) display: block; } Rezultatem będzie małe, zgrabne menu.
Naprawiono menu
Aby zachować utworzone w open, właściwość wyświetlania z wartością bloku jest podobna do menu rozwijanego, ale bez ukrywania mapy. W razie potrzeby możesz zablokować nie tylko listę otwartą, ale także pasek menu podczas przewijania strony. Gdy użytkownik wyrzuci tekst, menu zawsze pozostaje na wierzchu, co ułatwia nawigację na stronie. Podobny element ma wiele funkcji. Jest bardzo podobny do absolutnego, ale jest związany tylko z przeglądarką, wypada ze strumienia. Koordynuj taki element wygodnie ze zwykłymi właściwościami góra /dół, lewo /prawo. Przykład menu poziomego z rozwijanymi pozycjami, ustalonymi w przeglądarce:
Dodaje właściwość pozycji z wartością stałą, po której menu pozostaje na miejscu podczas przewijania. Dzięki stworzeniu takiego menu poradzi sobie nawet początkujący. Znaczniki HTML są łatwe i wygodne. Aby poprawnie wyświetlać style CSS w przeglądarce, warto pamiętać o projektowaniu elementów w widoku blokowym, dodając ramki i elementy koordynujące, wewnętrzne i zewnętrzne wcięcia, aby opisane akapity nie były narzuconena siebie nawzajem. Często zapomina się dodać szerokość i wysokość elementu. Możesz użyć właściwości float, "ściskając" ją po lewej lub prawej stronie (float: right;), aby wyświetlić pożądany element poza widoczną częścią do dalszego przetwarzania.
