01 od 06
Kako kreirati navigacijsku karticu sa CSS i bez slika
Navigacija na web stranicama je oblik liste, a navigacija na kartici je kao horizontalna lista. Prilično je lako napraviti horizontalnu navigaciju pomoću CSS-a, ali CSS 3 nam daje još nekoliko alata kako bi ih izgledali još lepšim.
Ovaj tutorial će vas odvesti kroz HTML i CSS potrebne za kreiranje CSS menija sa karticama. Kliknite na tu vezu kako biste videli kako će izgledati.
Ovaj tabulatorski meni ne koristi slike , samo HTML i CSS 2 i CSS 3. To se lako može uređivati kako bi dodali više kartica ili promenili tekst u njima.
Podrška pregledača
Ovaj meni kartice će raditi u svim glavnim pretraživačima . Internet Explorer neće prikazati zaobljene uglove, ali u suprotnom će pokazati tabulatore kao što su Firefox, Safari, Opera i Chrome.
02 od 06
Napišite listu menija
Svi navigacioni meniji i tabulatori zaista su samo neuređena lista. Dakle, prva stvar koju želite da uradite je da napišete neuređenu listu veza do mesta na kome želite da idete navigacijom na kartici.
Ovaj tutorial pretpostavlja da pišete HTML u tekstualnom editoru i da znate gdje da postavite HTML za svoj meni na vašoj web stranici.
Napišite svoju neuređenu listu ovako:
- class = "tablica">
- CSS 3
- id = "trenutna"> Tabs
- Za
- Meniji
Uočićete da kod naziva dve stvari: class = "tablist" i id = "current". Prvi je potreban . Ako ne stavite klasu tablica na neuređenu listu, tabovi neće raditi. Drugi je neobavezan. Stavite id = "trenutna" na bilo koji kartici koju želite da označite na toj stranici. Obično ovo koristim za označavanje stranice na kojoj se nalazim, ali možete ga koristiti da istaknete najvažniji tabulator. Ili ga možete potpuno ukloniti.
03 od 06
Počnite da uređujete svoj stil liste
Možete koristiti spoljašnji stilski stil ili interni stilski list . Na stranici menija uzorka koristi se interni stilski stil u
dokumenta.Prvo ćemo stilirati UL
Ovde koristimo tablicu klase u HTML-u. Umesto styling UL oznake, koja bi stila sve neuređene liste na vašoj stranici, trebalo bi stajati samo UL klasu. tablica Dakle, prvi unos u CSS-u treba da bude:
.tablist {}Voleo bih da stavim završnu zavrtnju (}) unapred, pa ne zaboravim kasnije.
Dok koristimo neuređenu listu sa listom za listu tabova, ali ne želimo da svi metki ili brojevi padaju. Dakle, prvi stil koji treba dodati jeste. lista-stil: nema; Ovo govori pregledaču da je to spisak bez prethodno definisanih stilova (poput metaka ili brojeva).
Zatim, možete podesiti visinu vaše liste tako da odgovara prostoru koji želite da popunite. Odabrao sam 2em za svoju visinu, jer je to duplo od standardne veličine slova, i daje oko pola em iznad i ispod teksta tab. visina: 2em; Ali možete podesiti širinu na bilo koju veličinu koju želite. UL oznake će automatski preuzeti 100% širine, pa ako ne želite da bude manja od trenutnog kontejnera, možete ostaviti širinu.
Najzad, ako vaš glavni stilski stil nema unapred podešene postavke za UL i OL oznake, onda ćete ih želeti staviti. To znači da biste isključili granice, margine i padding na vašem UL-u. padding: 0; marža: 0; granica: nema; Ako već poništite UL oznaku, možete promeniti margine, padding ili granicu na nešto što odgovara vašem dizajnu.
Vaša poslednja .tablist klasa bi trebala izgledati ovako:
.tablist {list-style: none; visina: 2em; padding: 0; marža: 0; granica: nema; }04 od 06
Uređivanje stavki LI liste
Kada ste stisnuli svoju neuređenu listu, morate u njega oblikovati oznake LI. U suprotnom, oni će se ponašati kao standardna lista i svaki prelazak na sledeću liniju bez pravilnog postavljanja tabova.
Prvo, podesite svoj stil svojstva:
.tablist li {}Onda želite da plutate svoje kartice tako da se kreću na horizontalnoj ravni. float: left;
I ne zaboravite da dodate neku marginu između tabova, tako da se ne spajaju zajedno. margin-right: 0.13em;
Vaši li stilovi bi trebali izgledati ovako:
.tablist li {float: left; margin-right: 0.13em; }05 od 06
Izrada tabsa izgleda kao tabs sa CSS 3
Da bih učinio većinu težih podizanja u ovom listu stilova, usmeravam veze unutar neuređene liste. Browseri prepoznaju da linkovi učine više na web stranici nego druge oznake, pa je lakše starijim pregledačima da se pridržavaju stvari poput stanja lebdenja ako ih priključite na sidrenu oznaku (veze). Dakle, prvo napišite svoj stil svojstva:
.tablist li a {} .tablist li a: hover {}Zbog toga što se ove kartice moraju ponašati kao tabovi u aplikaciji, želite da se celokupna oblast kartice može kliknuti, a ne samo povezan tekst. Da biste to uradili, morate pretvoriti oznaku A iz njenog normalnog " inline " stanja u blok element . prikaz: blok; (Ako ste zainteresovani da saznate više o razlici, pročitajte Block-Level vs. Inline Elements .)
Zatim, jednostavan način prisiljavanja tabsa da budu simetrični jedni s drugima, ali i dalje fleksibilno da odgovara širini teksta je da se desno i levo oblaganje podese na isti način. Koristio sam jačinu stakla za postavljanje gornje i donje strane na 0 i desno i lijevo na 1em. padding: 0 1em;
Takođe sam odlučio da uklonim vezu linka, tako da tabovi izgledaju manje kao veze. Ali, ako vaša publika može biti zbunjena time, ostavite ovu liniju. link-dekoracija: nema;
Postavljanjem tankih granica oko tabova, čini ih da izgledaju kao tabovi. Koristio sam graničnu skraćenu imovinu da postavim granicu na sve četiri strane granice: 0.06m čvrste # 000; I onda je koristio svojstvo graničnog dna kako bi ga uklonio sa dna. granični dno: 0;
Zatim sam napravio neka podešavanja fonta, boje i boje pozadine kartica. Postavite ih na stilove koji odgovaraju vašoj web lokaciji. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; boja: # 000; pozadina: #ccc;
Svi gore navedeni stilovi treba da budu u selekciji .tablist li a, pravilo tako da oni utiču na oznake sidra uopšte. Zatim, kako bi se tabulatori pojavili na više klikova, trebalo bi dodati nekoliko pravila o državama .tablist li a: hover.
Volim promjeniti boju teksta i pozadine kako bi se jezičak pojavio kada mi nadjete. pozadina: # 3cf; boja: #fff;
I uključio sam još jedan podsjetnik na pretraživače da želim da link ne ostane podvučen. tekst-dekoracija: nema; Još jedna uobičajena metoda je da ponovo podesite naglas kada kliknete mišem preko kartice. Ako želite to učiniti, promenite ga u tekstualnu dekoraciju: podvlačite;
Ali gde je CSS 3?
Ako ste obraćali pažnju, verovatno ste primetili da u stilu ne postoji stil CSS 3. Ovo ima prednost u radu u bilo kom modernom pretraživaču, uključujući i Internet Explorer. Ali to ne čini da tabovi izgledaju ništa više od kvadratnih kutija. Dodavanjem graničnog radijusa za poziv u stilu CSS 3 (i njegovim povezanim pozivima za pretraživače) možete napraviti okrugle, da biste više izgledali kao tabovi u folderu manila.
Stilovi koje trebate dodati pravilu .tablist li su: -webkit-granični-top-desni-radijus: 0.50em; -webkit-granični-top-lijevi radijus: 0.50em; -moz-granica-radius-topright: 0.50em; -moz-granica-radijus-topleft: 0.50em; granični top-desni-radijus: 0.50em; granični gornji levi radijus: 0.50em;
To su pravila finalnog stila koju sam napisao:
.tablist li a {display: block; padding: 0 1em; tekst-dekoracija: nema; granica: 0.06m solid # 000; granični dno: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; boja: # 000; pozadina: #ccc; / * CSS 3 elementi * / webkit-granični-top-desni-radijus: 0.50em; -webkit-granični-top-lijevi radijus: 0.50em; -moz-granica-radius-topright: 0.50em; -moz-granica-radijus-topleft: 0.50em; granični top-desni-radijus: 0.50em; granični gornji levi radijus: 0.50em; } .tablist li a: hover {background: # 3cf; boja: #fff; tekst-dekoracija: nema; }Sa ovim stilovima imate tabbed meni koji radi u svim većim pregledačima i izgleda kao lepo odštampane kartice u CSS 3 kompatibilnim pretraživačima. Sledeća stranica vam daje još jednu opciju koju možete iskoristiti da je dodatno obučite.
06 od 06
Označite trenutnu karticu
U HTML-u koji sam kreirao, UL je imao jedan element liste sa ID-om. Ovo vam omogućava da jedan LI doda drugačiji stil od ostalih. Najčešća situacija je da se trenutni tab se izdvaja na neki način. Drugi način razmišljanja o tome je to što želite sivati tabs koji nisu živi. Zatim promenite gde je id na različitim stranicama.
Stajam i oznaku #turrent A, kao i #turrent A: hover sta tako da su oboje malo drugačije. Možete promijeniti boju, boju pozadine, čak i visinu, širinu i padanje tog elementa. Učinite sve promjene koje imaju smisla u vašem dizajnu.
.tablist li # trenutna a {background-color: # 777; boja: #fff; } .tablist li # trenutna a: hover {background: # 39C; }I gotovi ste! Upravo ste napravili tabbed meni za svoju veb lokaciju.