01 no 06
Kā izveidot tabulēšanas navigāciju ar CSS un bez attēliem
Tīmekļa vietņu navigācija ir saraksta forma, un navigācija ar tabulēšanas palīdzību ir kā horizontāls saraksts. Diezgan viegli ir izveidot horizontālu cilnes navigāciju ar CSS, bet CSS 3 dod mums vēl dažus rīkus, lai padarītu tos patīkamākus.
Šajā apmācībā tiks izmantots HTML un CSS, kas vajadzīgs, lai izveidotu CSS cilnes izvēlni. Noklikšķiniet uz šīs saites, lai redzētu, kā tas izskatīsies.
Šajā cilnes izvēlnē netiek izmantoti attēli , tikai HTML un CSS 2 un CSS 3. To var viegli rediģēt, lai pievienotu citas cilnes vai mainītu to tekstu.
Pārlūkprogrammas atbalsts
Šī cilnes izvēlne darbosies visās galvenajās pārlūkprogrammās . Internet Explorer nerādīs noapaļotos stūrus, bet pretējā gadījumā tā parādīs cilnes, tāpat kā Firefox, Safari, Opera un Chrome.
02 no 06
Uzrakstiet savu izvēlņu sarakstu
Visas navigācijas izvēlnes un cilnes patiešām ir tikai neierobežots saraksts. Tāpēc pirmā lieta, ko vēlaties izdarīt, ir uzrakstīt nepielāgotu saišu sarakstu, uz kuru vēlaties pārvietoties ar tabulēšanas palīdzību.
Šī apmācība ir pieņēmums, ka jūs rakstāt savu HTML teksta redaktoru, un jūs zināt, kur ievietot jūsu vietnes HTML izvēlni savā tīmekļa lapā.
Uzrakstiet savu neierobežotu sarakstu šādi:
- class = "tablist">
- CSS 3
- id = "pašreizējais"> cilnes
- Par
- Izvēlnes
Jūs ievērosiet, ka kods izsauc divas lietas: class = "tablist" un id = "current". Pirmais ir vajadzīgs . Ja jūs neievietojat cilnes tabulu savā neierobežotā sarakstā, cilnes nedarbosies. Otrais ir neobligāts. Ielieciet id = "pašreizējo" uz jebkuru cilni, kuru vēlaties atzīmēt šajā lapā. Es to parasti izmantoju, lai iezīmētu lapu, kurā esmu ieslēgts, bet to varat izmantot, lai iezīmētu svarīgāko cilni. Vai arī jūs varat to pilnībā noņemt.
03 no 06
Sāciet rediģēt savu stila lapu
Jūs varat izmantot vai nu ārēju stilu lapu vai iekšējo stilu lapu . Izlases izvēlnes lappusē tiek izmantota iekšējā stilu lapa dokumenta
.Vispirms mēs stilu pati UL
Šeit mēs izmantojam tabulas tabulu. HTML. Tā vietā, lai noturētu UL tagu, kas jūsu lapā izveidotu visus nepareizos sarakstus, jums vajadzētu veidot tikai UL klasi. tablist Tāpēc pirmajam ierakstam jūsu CSS jābūt:
.tablist {}Man patīk likt gala cirtainu lencēm ()) pirms laika, tāpēc es to neaizmirsīšu vēlāk.
Lai gan cilnes izvēlņu sarakstā mēs izmantojam nepareizu saraksta tagu, bet mēs nevēlamies, lai ieliekamās bultiņas vai skaitļi iekļūtu. Tādēļ pirmais stils, kuru jums vajadzētu pievienot, ir. saraksta stils: nav; Tas norāda pārlūkam, ka, lai gan tas ir saraksts, tas ir saraksts ar iepriekš nenoteiktiem stiliem (piemēram, lodes vai ciparus).
Pēc tam varat iestatīt sava saraksta augstumu, lai tas atbilstu atstarpei, kuru vēlaties aizpildīt. Es izvēlējos 2em manu augstumu, jo tas ir dubultā standarta fonta izmērs un dod aptuveni pusi em virs un zem cilnē esošā teksta. augstums: 2em; Bet jūs varat iestatīt savu platumu neatkarīgi no tā, kādu izmēru vēlaties. UL tagi automātiski aizņems 100% platuma, tādēļ, ja vēlaties, ka tas ir mazāks par pašreizējo konteineru, varat atstāt platumu.
Visbeidzot, ja jūsu galvenajā stila lappusē nav UL un OL tagu iestatījumu, jūs vēlaties to ievietot. Tas nozīmē, ka jums vajadzētu izslēgt robežas, malas un polsterējumu jūsu UL. polsterējums: 0; starpība: 0; robeža: nav; Ja jau ir atiestatījis UL tagu, varat mainīt malas, polsterus vai robežas līdz kaut ko, kas atbilst jūsu dizainam.
Jūsu gala tabulas tabulai vajadzētu izskatīties šādi:
.tablist {list-style: nav; augstums: 2em; polsterējums: 0; starpība: 0; robeža: nav; }04 no 06
LI saraksta vienumu rediģēšana
Kad esat veidojis savu neierobežotu sarakstu, jums ir jāizveido tajā LI marķējums. Pretējā gadījumā viņi darbosies kā standarta saraksts, un katrs pāriet uz nākamo rindiņu, nepareizi ievietojot cilnes.
Vispirms izveidojiet stila īpašumu:
.tablist li {}Tad jūs vēlaties peldēt savas cilnes, lai tās ierindotos horizontālā plaknē. pludiņš: pa kreisi;
Un neaizmirstiet pievienot starpnozaru starp cilnēm, lai tie netiktu apvienoti kopā. starpība pa labi: 0.13em;
Jūsu stilam jābūt šādam:
.tablist li {peldēt: pa kreisi; starpība pa labi: 0.13em; }05 no 06
Padarīt cilnes izskatīties cilnēm ar CSS 3
Lai veiktu lielāko daļu smago celšanas šajā stilā, es mērķē uz saitēm neierobežotā sarakstā. Pārlūkprogrammas atpazīst, ka saites vietnē vairāk nekā citas atzīmes, tāpēc vecākiem pārlūkiem ir vieglāk ievērot lietas, piemēram, novietot valstis, ja tās pievienojat enkura tagam (saites). Tātad vispirms rakstīt savu stilu īpašības:
.tablist li a () .tablist li a: hover ()Tā kā šīm cilnēm lietotnē jārīkojas kā cilnēm, jūs vēlaties, lai visi cilnes apgabali būtu noklikšķināmi, nevis tikai saistīto tekstu. Lai to paveiktu, jums ir jāpārvērš A tag no tā parastā " inline " stāvokļa bloķēšanas elementā . displejs: bloks; (Ja jūs interesē uzzināt vairāk par atšķirību, izlasiet Block-Level un Inline Elements .)
Tad vienkāršs veids, kā piespiest cilnēm būt simetriskam viens ar otru, bet tomēr flex, lai ietilptu teksta platumā, ir padarīt labo un kreiso polsterējumu vienādi. Es izmantoju polsterējošo stenogrāfisko īpašību, lai iestatītu augšējo un apakšējo malu uz 0 un labo un kreiso uz 1em. polsterējums: 0 1em;
Es arī izvēlējos noņemt saiti, uz kuras tiek atzīmētas, tādēļ cilnes izskatās mazāk kā saites. Bet, ja jūsu auditorija varētu sajaukt ar to, atstājiet šo pozīciju. saites apdare: nav;
Ievietojot plānas malas ap cilnes, tas padara tos par cilnēm. Es izmantoju robežas stenogrāfijas īpašumu, lai novietotu robežu ap visām četrām malām: 0.06em solid # 000; Un pēc tam izmantoja robežas apakšdaļu, lai noņemtu to no apakšas. robežas-apakšā: 0;
Tad es izdarīju dažus pielāgojumus ciļņu fonta, krāsas un fona krāsai. Iestatiet šos stilus, kas atbilst jūsu vietnei. fonts: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; krāsa: # 000; fona krāsa: #ccc;
Visiem iepriekš minētajiem stiliem vajadzētu būt atlasītājam .tablist li a, noteikums, lai tie vispār ietekmētu enkura tagus. Pēc tam, lai padarītu cilnes šķiet vairāk klikšķināmas, jums vajadzētu pievienot dažas valsts noteikums. Tablist li a: hover.
Man patīk mainīt teksta un fona krāsu, lai padarītu cilni pop, kad peli peli pār to. fons: # 3cf; krāsa: #fff;
Un es iekļāvu vēl vienu pārlūku atgādinājumu, ka es vēlos, lai saite netiktu uzsvērta. teksta apdare: nav; Vēl viena izplatīta metode ir pārvērst pasvītrojumu, kad peli pāri cilnē. Ja vēlaties to izdarīt, mainiet to teksta apdarei: pasvītrojiet;
Bet kur ir CSS 3?
Ja esat pievērsis uzmanību, iespējams, pamanījāt, ka stila lapā nav izmantoti CSS 3 stili. Tā priekšrocība ir strādāt jebkurā mūsdienu pārlūkprogrammā, tostarp pārlūkprogrammā Internet Explorer. Bet tas nedara, ka cilnes izskatās nekas vairāk kā kvadrātveida kastes. Pievienojot CSS 3 stila zvana malu rādiusu (un tam ir saistīti ar pārlūkprogrammu saistītie zvani), jūs varat padarīt malas noapaļotām, lai tās izskatās vairāk kā cilnēm manilas mapē.
Stili, kas jums jāpievieno likumam .tablist, ir: -webkit-robeža-augšējā labā rādiuss: 0.50em; -webkit-robeža-top-left-rādiuss: 0.50em; -moz-robeža-rādiuss-topright: 0.50em; -moz-robeža-rādiuss-topleft: 0.50em; robeža-augšējā labā rādiuss: 0.50em; robeža-augšējā kreisajā rādiusā: 0.50em;
Šie ir pēdējie stila noteikumi, kurus es rakstīju:
.tablist li a (displejs: bloks; polsterējums: 0 1em; teksta apdare: nav; robeža: 0.06em cietais # 000; robežas-apakšā: 0; fonts: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; krāsa: # 000; fona krāsa: #ccc; / * CSS 3 elementi * / webkit-robeža-augšējais labais rādiuss: 0.50em; -webkit-robeža-top-left-rādiuss: 0.50em; -moz-robeža-rādiuss-topright: 0.50em; -moz-robeža-rādiuss-topleft: 0.50em; robeža-augšējā labā rādiuss: 0.50em; robeža-augšējā kreisajā rādiusā: 0.50em; } .tablist li a: hover {background: # 3cf; krāsa: #fff; teksta apdare: nav; }Izmantojot šos stilus, jums ir cilnes izvēlne, kas darbojas visās galvenajās pārlūkprogrammās un izskatās kā jauka drukātā cilne CSS 3 atbilstošās pārlūkprogrammās. Nākamajā lappusē tiek parādīts vēl viens variants, ko varat izmantot, lai vēl vairāk saģērbtu.
06 no 06
Iezīmējiet pašreizējo cilni
HTML izveidotajā UL sarakstā bija viens elements ar ID. Tas ļauj jums piešķirt vienam LI citu stilu no pārējiem. Visizplatītākā situācija ir kaut kādā veidā padarīt pašreizējo cilni izceltu. Vēl viens veids, kā domāt par to, ir tas, ka vēlaties pelēkt cilnes, kas nav dzīvotas. Pēc tam mainiet vietni, kur id atrodas dažādās lapās.
Es veidoju gan # pašreizējo tagu, gan #current A: hover statusu, lai abi būtu nedaudz atšķirīgi. Jūs varat mainīt krāsu, fona krāsu, pat šī elementa augstumu, platumu un polsterējumu. Veiciet izmaiņas, kas ir jēgas jūsu dizainā.
.tablist li # pašreizējais {fona krāsa: # 777; krāsa: #fff; } .tablist ## pašreizējais a: hover {background: # 39C; }Un jūs esat pabeidzis! Jūs tikko izveidojāt cilnes izvēlni savai vietnei.