HTML i CSS su jezici za programiranje weba potrebni za izgled web-lokacije. Počevši izgled, odlučio sam naučiti osnove ove profesije, trebali biste početi s njihovim proučavanjem, jer na njihovoj osnovi moguće je stvoriti jednostavnu stranicu.
U HTML-u i CSS-u, horizontalni izbornik za stranicu je lako izraditi, počevši od pisanja okvira.
Izgradite okvir
Za početak, morate napraviti HTML oznaku. Izbornik je jednostavniji za izradu označenog popisa. Twin Tag, dakle, zahtijeva zatvaranje na kraju popisa. Bolje je odmah dodati razred za sljedeću stilizaciju. Dodaju se uparene stavke
prema broju bodova s povezanim vezama. Primjer:
Okvir za izgradnju
Vodoravni izbornik
Izbornik padajućeg izbornika
Fiksni izbornik
Ovo je osnova, koja je zatim horizontalni izbornik CSS-a, fiksni ili padajući.
Horizontalni izbornik
Nakon što je kôd označen, vrijeme je za početak rada sa stilom. Treba napomenuti da su uparene oznake koje se koriste za zadani okvir blokirane i stoga morate promijeniti tip elementa u niz kako biste stvorili i normalni i padajući horizontalni CSS izbornik. To se može učiniti pomoću svojstva prikaza. Dodaje se stavci:
.menu li {display: inline; } Tako se pretvara u horizontalnu. Ako postoji mnogo podtočaka, mogu se premjestiti u novi redak bez dodavanja navedenih svojstava. U ovom slučaju, koristi se svojstvoza prikazivanje prijelaza i prijenosa teksta. Nowrap sprema tekst u cijelosti, bez crtanja riječi, a pre-wrap pohranjuje praznine u HTML-u i dodaje automatske. .menu li {display: inline; bijeli prostor: nowrap; }
Da biste izbjegli začepljenje niza teksta čvrstim tekstom, možete stvoriti informacije u skupinama i stvoriti dodatni podizbornik koji točno odražava sve što je potrebno. Podizbornik može biti ispušten ili otvoren.
padajući izbornik
Nakon ovladavanja osnovama izrade horizontalnog izbornika, CSS ispada iz njega, podmeniji se mogu rasporediti u vertikalnom popisu. Popis oznaka mora biti višerazinski, dodavati dodatne oznake za označene popise unutar željenog elementa. Sljedeće stavke na popisu moraju biti uvrštene u oznaku:
1
1.1
1.2
2
3
4
] U css. Meniju li se zamjenjuje s ".menu", tako da unutarnji elementi postanu vertikalni. Roditelj selektor dodaje relativni položaj, u kojem se element pomiče s granica roditeljskog bloka, a na dijete - apsolutan (potpuno uklonjen iz toka i koordiniran od najbližeg elementa, a ako ne, onda iz granica preglednika). Elementi s relativnim pozicioniranjem mogu sadržavati dječje elemente s apsolutnim pozicioniranjem iznutra. To znači da prilikom pomicanja bloka s položaja: relativni, fiksni dijelovi ostaju na svojim mjestima unutar njega.
Podrazumijevani dio za ispuštanje uvijek ostaje otvoren, osim ako ga ne dodate elementu prikaza samo kada pomičete pokazivač. Da biste to učiniliprema zadanim se postavkama skriva dodatni popis: .menu & gt; li {display: inline; pozicija: relativna; } menu.second {position: absolute; (Snap podmeni za roditeljski blok) prikaz: nema; (sakrij)}. izbornik & gt; li: hover .second {(pseudo-klasa hover se koristi za prikaz popisa lebdećim prikazom): blok; } Rezultat će biti mali, uredan izbornik.
Fiksni izbornik
Kako bi zadržali stvoreno na otvorenom, svojstvo prikaza s vrijednošću bloka slično je padajućem izborniku, ali bez skrivanja karte. Ako želite, možete pomicati ne samo otvoreni popis, nego i traku izbornika. Kada korisnik okrene tekst prema dolje, izbornik može uvijek ostati na vrhu, što olakšava navigaciju na web-lokaciji. Sličan element ima brojne značajke. Vrlo je sličan apsolutnom, ali je vezan samo za preglednik, ispada iz potoka. Uskladite takvu stavku prikladno s uobičajenim gornjim /donjim, lijevim /desnim svojstvima. Primjer horizontalnog izbornika s padajućim stavkama, fiksiran u pregledniku:
Dodaje svojstvo položaja s vrijednošću fiksnog, nakon čega izbornik ostaje na mjestu prilikom pomicanja. Uz stvaranje takvog izbornika će se nositi čak i početnik. HTML označavanje je jednostavno i praktično. Kako bi ispravno prikazali CSS stilove u pregledniku, vrijedi se sjetiti dizajna stavki u prikazu bloka, dodavanja granica i koordinacijskih elemenata, unutarnje i vanjske uvlake tako da opisani paragrafi nisu nametnutijedni na druge. Često se zaboravlja dodati širinu i visinu elementa. Svojstvo "float" možete koristiti tako da ga "stegnete" na lijevu ili desnu stranu (float: desno;) da biste prikazali željenu stavku izvan vidljivog dijela za daljnju obradu.
