01 od 06
Kako stvoriti navigaciju s oznakom CSS i bez slika
Navigacija na web stranicama je oblik popisa, a navigacija s karticama nalik je horizontalnom popisu. Praktično je kreirati horizontalnu navigaciju s karticama pomoću CSS-a, ali CSS 3 nam daje još nekoliko alata kako bi ih izgledali još ljepše.
Ovaj vodič će vas odvesti kroz HTML i CSS potrebne za stvaranje CSS kartice izbornika. Kliknite tu vezu da biste vidjeli kako će izgledati.
Ovaj izbornik s karticama ne koristi slike , samo HTML i CSS 2 i CSS 3. Može se jednostavno uređivati za dodavanje više kartica ili promjenu teksta u njima.
Podrška pregledniku
Ovaj izbornik kartice funkcionira u svim glavnim preglednicima . Internet Explorer neće prikazivati zaobljene kutove, ali inače će prikazati kartice kao što su Firefox, Safari, Opera i Chrome.
02 od 06
Napišite popis izbornika
Svi navigacijski izbornici i kartice zapravo su samo neuredan popis. Dakle, prva stvar koju želite učiniti je napisati neuredan popis veza do mjesta na kojem želite krenuti s karticama.
Ovaj vodič pretpostavlja da svoj HTML unosite u uređivač teksta i da znate gdje postaviti HTML za izbornik na web stranici.
Napišite svoj neuredan popis ovako:
- class = "tablist">
- CSS 3
- id = "current"> Kartice
- Za
- izbornici
Primijetit ćete da kod poziva dvije stvari: class = "tablist" i id = "current". Prva je obavezna . Ako ne stavite klasu tablica na svoj neuredan popis, kartice neće funkcionirati. Druga je opcija. Stavite id = "trenutni" na bilo koju karticu koju želite označiti na toj stranici. Obično ovu opciju koristim za označavanje stranice na kojoj se nalazim, ali možete ga koristiti da biste istaknuli najvažniju karticu. Ili ga možete potpuno ukloniti.
03 od 06
Počnite uređivati svoj stilski list
Možete upotrijebiti ili vanjski stilski stil ili interni stilski list . Stranica izbornika uzorka koristi internu tablicu stila u
Prvo ćemo označiti UL
Ovdje koristimo tablicu klase u HTML-u. Umjesto oblikovanja UL oznake, koja bi oblikovala sve neuređene popise na vašoj stranici, trebali biste stilirati samo UL-razred. tabulator Dakle, prvi unos u svoj CSS trebao bi biti:
.tablist {}Volim staviti završetak kovrčaste braće (}) ispred vremena, tako da ga ne zaboravim kasnije.
Dok koristimo neodređenu oznaku popisa za popis izbornika kartica, ali ne želimo da se metke ili brojevi kreću. Dakle, prvi stil koji trebate dodati jest. Lista stilu: none; To govori pregledniku da je popis, bez popisa, bez prethodno određenih stilova (poput metaka ili brojeva).
Zatim možete postaviti visinu popisa da odgovara prostoru kojem želite ispuniti. Odabrao sam 2em za moju visinu, jer to je dvostruko veća od standardne veličine fonta i daje oko pola em iznad i ispod teksta kartice. visina: 2em; Ali možete postaviti svoju širinu na željenu veličinu. UL oznake automatski će zauzimati 100% širine, pa ako ne želite da bude manji od trenutnog spremnika, možete ostaviti širinu.
Konačno, ako glavni stilski list nema unaprijed postavljene oznake za UL i OL, morat ćete ih staviti. To znači da biste trebali isključiti granice, margine i padove na vašem UL. padding: 0; margin: 0; granica: none; Ako ste već resetirajte UL oznaku, možete promijeniti margine, padding ili granicu na nešto što odgovara vašem dizajnu.
Vaš završni razred trebao bi izgledati ovako:
.tablist {list-style: none; visina: 2em; padding: 0; margin: 0; granica: none; }04 od 06
Uređivanje stavki LI popisa
Nakon što postavite svoj neuredan popis, trebate oblikovati LI oznake unutar nje. U suprotnom, oni će djelovati kao standardni popis i svaki se korak premjestiti na sljedeći red bez ispravnog postavljanja kartica.
Najprije postavite svojstvo stila:
.tablist li {}Zatim želite plutajuće kartice tako da se podudaraju s vodoravnom ravninom. float: lijevo;
I ne zaboravite dodati neke margine između kartica pa se ne spajaju zajedno. margin-right: 0.13em;
Vaši stilovi bi trebali izgledati ovako:
.tablist li {float: lijevo; margin-right: 0.13em; }05 od 06
Izrada kartica izgledaju kao kartice s CSS-om 3
Da biste napravili veći dio teškog podizanja u ovom alatu za stil, ciljam veze na uređenom popisu. Preglednici prepoznaju da veze čine više na web stranici od ostalih oznaka, tako da je lakše dobiti starije preglednike kako bi se pridržavali stvari kao što su stanje lebdeće ako ih priključite na sidrenu oznaku (veze). Zato najprije napišite svojstva stila:
.tablist li a {} .tablist li a: lebdjeti {}Budući da se te kartice trebaju ponašati kao kartice u aplikaciji, želite kliknuti cijelo područje kartice, a ne samo povezani tekst. Da biste to učinili, morate pretvoriti oznaku A iz normalne " inline " države u blokni element . Prikaz: blok; (Ako vas zanima saznati više o razlici, pročitajte Blokiraj i Inline elemente .)
Zatim, jednostavan način za prisiljavanje vaših kartica da budu simetrični jedni s drugima, ali ipak savijanje da odgovara širini teksta je da pravo i lijevo padding isto. Koristio sam stenografski imetak za postavljanje vrha i dna na 0, a desno i lijevo za 1em. padding: 0 1em;
Također sam odlučio ukloniti vezu koja podcrtava, tako da kartice izgledaju manje poput veza. No, ako bi vas publika mogla zbuniti, izostavite ovu liniju. Link-decoration: none;
Stavljanjem tanke granice oko jezičaka čini ih izgleda poput kartica. Koristio sam graničnu skrivenu imovinu kako bih stavio granicu na sve četiri strane granice: 0.06em solid # 000; A zatim je upotrijebio entitet na rubu pri dnu da biste je uklonili s dna. granica dna: 0;
Zatim sam napravio neke prilagodbe fontu, boji i bojama 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 boja: #ccc;
Svi gore navedeni stilovi trebaju biti u izborniku .tablist li, pravilo tako da oni općenito utječu na sidrene oznake. Zatim, da bi se kartice učinile klikljivijima, trebali biste dodati nekoliko pravnih pravila država. Držite lijevu tipku miša.
Volim mijenjati boju teksta i pozadine kako bi kartica popala kada mišem nad njom. Pozadina: # 3cf; boja: #fff;
I ja sam još jednom podsjetio na preglednike da želim da veza ne bude podcrtana. text-decoration: none; Druga uobičajena metoda je ponovno uključivanje podcrta kada miša preko kartice. Ako to želite, promijenite ga u tekst ukras: podcrtano;
Ali gdje je CSS 3?
Ako ste obratili pozornost, vjerojatno ste primijetili da u stilskom listu nije bilo CSS 3 stilova. To ima prednost u radu u bilo kojem modernom pregledniku, uključujući Internet Explorer. No, ne čini kartice izgledaju kao ništa više od kvadrata. Dodavanjem graničnog radijusa CSS 3 poziva u stilu (i pridružene su pozive vezane uz preglednik) možete zaokružiti rubove kako biste izgledali slično karticama na mapi manila.
Stilovi koje trebate dodati pravilu .tablist li su: -webkit-border-top-right-radius: 0.50em; -webkit granica-top-lijeva radijus: 0.50em; -moz nog-radijusa-topright: 0.50em; -moz nog-radijusa-topleft: 0.50em; border-top-pravo-radijus: 0.50em; border-top-lijevo-radius: 0.50em;
Ovo su konačna pravila stila koju sam napisao:
.stabil li a {prikaz: blok; padding: 0 1em; text-decoration: none; granica: 0.06em solid # 000; granica dna: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; Boja: # 000; Pozadina boja: #ccc; / * CSS 3 elementa * / webkit-border-top-right-radius: 0.50em; -webkit granica-top-lijeva radijus: 0.50em; -moz nog-radijusa-topright: 0.50em; -moz nog-radijusa-topleft: 0.50em; border-top-pravo-radijus: 0.50em; border-top-lijevo-radius: 0.50em; }. stablo li a: lebdjeti {pozadina: # 3cf; boja: #fff; text-decoration: none; }Uz ove stilove imate izbornik na karticama koji funkcionira u svim glavnim preglednicima i izgleda kao lijepo otisnute kartice u preglednicima koji zadovoljavaju CSS 3. Sljedeća stranica vam daje još jednu opciju koju možete upotrijebiti za odijevanje još više.
06 od 06
Označite trenutnu karticu
U HTML-u koji sam stvorio, UL je imao jedan element popisa s ID-om. To vam omogućuje da jedan LI drugačiji stil od ostatka. Najčešća situacija je da se trenutna kartica istakne na neki način. Drugi način da to mislite je da želite izrezati kartice koje nisu žive. Zatim promijenite gdje je id na različitim stranicama.
Stilim i #current A oznaku, kao i #current A: hover sta, tako da su oboje malo drugačiji. Možete promijeniti boju, boju pozadine, čak visinu, širinu i padding tog elementa. Učinite što god promjena ima smisla u vašem dizajnu.
.tablist li # current a {background-color: # 777; boja: #fff; } .tablist li # current a: lebdjeti {pozadina: # 39C; }I gotovi ste! Upravo ste izradili izbornik na karti za svoju web stranicu.