01 di 06
Cume a creazione Cunsigliu in Tabbed cù CSS è No Images
A navigazione nantu à e pagine web hè una forma di una lista, è a navigazione per un ligame hè cum'è una lista horizontale. Hè abbastanza simplice per creà a navigazione spedulate horizontal cù CSS, ma CSS 3 ci deve un pocu di più strumenti per facenu più belli.
Stu tutorialu vi purterà da l'HTML è CSS necessaile per creà un menù pannellu CSS. Cliccate nant'à u ligame per vede cumu si vede.
Stu menù di tavule ùn si usa micca imàgini , nant'à HTML è CSS 2 è CSS 3. Pudete esse editatu facilmente per aghjunghje più tabulati o cambià u testu in elli.
Assistenza di u Navigatore
Stu menù a tabulazione sarà travagliatu in tutti i principali navigatori . Esplorista in Internet ùn amparà e rinforzii inturniati, ma altri, vede cumpareghja cumpareghja cum'è Firefox, Safari, Opera è Chrome.
02 di 06
Write Your Menu List
Tutte menu meni di navigazione è tabulavvi sò veramenti solu una lista desordenada. Cusì u primu uveru vulete fà escrire una lista desordenada di ligami per induve u vulete a vostra navigazione per un ligame per andà.
Questu tutorialu hè chì averghjishi chì vo scrivu u vostru HTML in un editore di testu è chì sapete dunque o ne ellu HTML per u menu in a vostra pagina web.
Write your unordered list like this:
- class = "tablist">
- CSS 3
- id = "currente"> Tabulature
- Per
- Menus
Avete bisognu chì u codice chjama dui e cose: class = "tablist" è id = "current". U primu hè dumandatu . Se ùn avete micca sottumessu a lista di tabulazione nantu à a vostra cartula desordenada, i tabulavigli ùn viaghjanu micca. U sicondu hè optativu. Pujhe l'id = "currente" nantu à quella fasciule chì vulete esse stampatu in questa pagina. Aduprà l'avè aduprà per indica a pagina ch'e aghju intesu, ma pudete usà à puntegà a tabulazione più impurtante. O pudete scàccia solu.
03 di 06
Start Editing Your Style Sheet
Pudete aduprà una carta di stili esterni o una stile di stile interna . A pagina di menzione di menzu usa una stile di stile interna in u
di u documentu.Prima stà u stessu UL
Questu hè dunque usamu a lista di classi. In l'HTML. Piuttostu ch'è stilettu l'etiqueta UL, chì urdinava tutte e listinu desordenatu di a vostra pagina, deve esse l'estilu solu a classe UL. Liste chì u primu accessu in u vostru CSS pò esse:
.tablist {}Mi piace à vultà in u curcu curciutu (}) avanti di u tempu, perchè ùn averaghju micca più tardi.
Mentre noi aduprà una lista di lista unordered per a lista menù di tabulazione, ma ùn avemu micca vede parechje o numerazioni chì si move in sicretu. Cusì u primu stile chì deve aghjunghje hè. liste-style: nimu; Questu hè infurmatu u navigatore chì, mentre ch'ellu sia una lista, hè una lista senza stili predeterminati (cum'è balizii o numeri).
Allora, pudete di definisce l'altitudine di a vostra lista per appellu cù u spaziu chì vulemu chì puderà cumpricà. Aghjustassi 2è per a mo altezza, cum'è quella doppia du grandària tipica standard, è detti a meza l'un'altra è quì sottu u testu di a tabulazione. altu: 2im; Ma pudete puru definisce a vostra larghezza per qualsiasi magnitudine chì vulete. L-UL tag awtomatikament seran il-100% tal-wisa ', hekk jekk inti tixtieq li tkun iżgħar minn dak il-kontenitur attwali, tista' tħalli l-wisa '.
Infine, se a vostra stile di maestru ùn hà micca presets per i labellizati UL è OL, voi vulete mette in. Questu significa chì avete apagate i fruntieri, marghjini è padding sul UL. padding: 0; marghjini: 0; fruntiera: nimu; Se ùn avete resettatu u labellu UL, pudete cambià i marghjini, padding, o cunfini à quella chì cunta cù u vostru design.
A vostra classa finale finalista vi pare cusì:
.tablist {list-style: none; altu: 2im; padding: 0; marghjini: 0; fruntiera: nimu; }04 di 06
Editatu i listessi LI
Una volta chì hà styled a vostra lista desordenada, deve esse stile l'etiquetas LI dentro. In oltre, avè aduprà cum'è una lista standard è ogni muvimentu a l'ultima linea senza misu i vostri tabs correctly.
Prima, custruisce u vostru propiu stiliu:
.tablist li {}Allora vulete flutterà e vostre tabulazione per quessa andonu in u livellu horizontale. float: left;
È ùn ti scurdate di aghjunghje certi margini trà e lee, perchè micca unificà. marginalite: 0.13im;
I vostri stili avissini st'amuri:
.tablist li {float: left; marginalite: 0.13im; }05 di 06
Fà a Tabs As Tabulature CSS 3
Per fà a maiò parte di u pesu pesu in questa stile, apucale i ligami in u listinu desordenatu. I navigatori ricunnosce chì i ligami fan più nantu à una pàgina web chì l'altri tagghi, cusì hè più sèmplice d'acquistà i navigatori anziani per esse cumplissenu cumu cusì l'esternate si aghjunghje à l'tag (links). Allora scrive prima u vostru propiu stiliu:
.tablist li a {} .tablist li a: hover {}Perchè l'sti tabulazione ponu accade cum'è tabulazione in una appiecu, vuleva chì l'area sana di a tabulazione puderà clicà, micca solu u testu in ligame. Per fà questu, avete da cunvertisce una tag da hè statu un statuu " inline " in un elementu di blocu . scuru: blocu; (Sè avete interessatu à sapè più nantu à a diffarenza, leghjite Block-Level vs. Inline Elements ).
Allora, un modu faciliu per forza e vostre tabulazione sò simétrici cù l'altri, ma ancu prusate per fassi in l'larghezza di u testu hè di fà u cumpatitanu right and left the same. Aghju aduprate a proprietà d'uttene padding per definisce a cima è u fondu à 0 è a direcia è esse à 1em. padding: 0 1em;
Aghjustu ancu per sguassà u ligame sottuvita, perchè e li tabs mirani micca menu ligami. Ma se u vostru audju pò esse cunfonditu da quì, abbanduneghja sta linea. ligami: appressu;
Per mischjate una finta fronda versu i tabulavie, li faciani parechji cumparenu. Aghju adupratu a pruprietà dinò di a frontiere per mette u cunfini all'estiru i fruntiera: 0.06em solid # 000; Eppo utilizò a pruprietà di u frontière per sguassà da u fondu. frontière-fondu: 0;
Allora aghju fattu un aghjurnamentu à u fondu, u culore è u culore di fonti di i tabuleti. Determinate quessi à i stili chì incù u vostru situ. font: bold 0.88em / 2em arial, ginevra, helvettica, sans-serif; culore: # 000; culore di culori: #ccc;
Tutti i stili suprani anu in u selettore. Stablist li a, a regula per quessa affettanu i tags in generale. Allora per fà chì e so pezzi più appaghjà clicate, puderete aghjustà un pocu state rule. Stablist li a: verificatu.
Mi piace à cambià u culore di u testu è di u fondu per fà a tabulazione pop quan u cursu. Fondo: # 3cf; culore: #fff;
E aghju inclusu un altru recordatori per i navigatori chì vogliu u ligame per esse micca sottolineati. testu di dicurazioni: nimu; Un altru mètudu cumuni hè di trasfurmà a suntana di novu annantu à u cursu nantu à a tabulazione. Se vulete fà chì, cambia à a dicurazione di teste: sottucattariu;
Ma Dome hè u CSS 3?
Sè vo avete avutu cura, pudete avete nutatu chì ùn anu micca statu CSS 3 stile utilizzati in a stile di carta. Hè u benefiziu di travaglià in qualsiasi navigatore modernu, cumpresu Internet Explorer. Ma ùn faci micca i tabulature chì pareanu à qualcosa più di quadri cadute. Per aghjunghje un strumentu CSS 3 chjamatu cunfini-raghju (è i telefonichi associati di u browser), puderete fuglià l'armeate inturniati, per vede parechje cum'è pezze nantu à carta di manila.
I stili chì deve aghjunghje à u .tablist chì una regula sò: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; frontière-top-right-radius: 0.50em; radiu frontière-top-left-right: 0.50em;
Eccu li reguli di stile finale scrivu:
.tablist li a {display: block; padding: 0 1em; testu di dicurazioni: nimu; frontière: 0.06em solid # 000; frontière-fondu: 0; font: bold 0.88em / 2em arial, ginevra, helvettica, sans-serif; culore: # 000; culore di culori: #ccc; / * CSS 3 elements * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; frontière-top-right-radius: 0.50em; radiu frontière-top-left-right: 0.50em; } .tablist li a: hover {background: # 3cf; culore: #fff; testu di dicurazioni: nimu; }Cù sti stili, avete un menù pannellu chì funziona in tutti i principali navigatori è parechje pezzi stampati in CSS 3 browsers compliant. A pàgina dopu face una opción più chì pudete aduprà per vende a più.
06 di 06
Ritorna a Tabulazione Chjesa
In u HTML creà, a UL hà avutu un listu elementu cù una ID. Questu permette di dà un LI un scicuru differenti da u restu. A situazione più cumuni hè di fà chì a tabulazione currente distingue da alcuna manera. Un'altra manera di pensà à questu hè chì voi à vuler à grisà i fuculi chì ùn sò micca vita. Pudete cambià quandu l'idu hè nantu à e diverse pagine.
U stilu tanto a tag #current è dinò #current A: passànnate sta per chì e duie dui sò una picca diversa. Pudete cambià u culore, culore di fondu, ancu l'altizza, l'anch'elli è u padding di quellu elementu. Fate qualse cambiantifianu sensu in u vostru articulu.
.tablist li # corse a {background-color: # 777; culore: #fff; } .tablist li # corse a: hover {background: # 39C; }E voi finutu! Avete creatu un menu pezzu per u vostru situ web.