01 o le 06
Auala e Fausia ai le Faʻasalaga Faʻatasi ma CSS ma Leai Ata
O le faʻafeiloaʻi i luga o itulau uepesite o se lisi o se lisi, ma o le faʻatautaiga o le taamilosaga e pei o se lisi faʻatulagaina. E faigofie lava le faia o se taʻaloga e faʻatautaia ma le CSS, ae o le CSS 3 e tuʻuina mai ia i tatou ni nai mea faigaluega e avea ma foliga sili atu.
O lenei aʻoaʻoga o le a ave oe e ala i le HTML ma CSS e manaʻomia e fatu ai se lisi o le lisi o le CSS. Kiliki i lena fesoʻotaʻiga e iloa ai pe faapefea ona foliga.
O lenei faʻaogaina e le faʻaaogaina ai ni ata , naʻo HTML ma CSS 2 ma CSS 3. E mafai ona faigofie ona faʻataʻitaʻia e faʻaopoopo atili ai tafaoga pe suia le tusitusiga i totonu.
Fesoasoani Lagolago
O lenei lisi autu o le a galue i totonu o matai tetele . O le a le faʻaalia e le tagata sailiili i luga o le Initaneti ia tulimanu taʻitasi, ae a le o lea, o le a faʻaalia ai nusipepa e pei o Firefox, Safari, Opera, ma Chrome.
02 o le 06
Tusi lau Lisi Lisi
O taʻavale taʻavale uma ma tabs e na o se lisi e le fetaui. O le mea muamua e te manaʻo e fai, o le tusia lea o se lisi le fesoʻotaʻi o sootaga i le mea e te manaʻo ai i lau taʻavale mautinoa e alu.
O lenei aʻoaʻoga e manatu oe o loʻo e tusia lau HTML i totonu o le tusitala o tala ma e te iloa le mea e tuʻu ai le HTML mo lau lisi i lau itulau.
Tusi lau lisi e leai se lisi pei o lenei:
- vasega = "tablist">
- CSS 3
- id = "o loʻo i ai nei"> Tapa
- Aua
- Menus
O le ae matauina o le numera e valaʻau atu i mea e lua: vasega = "tablist" ma id = "o loʻo iai nei". Muamua e manaʻomia . Afai e te le tuʻuina le vasega tablist i luga o lau lisi le lelei, o le a le aoga le tapes. Lua o le filifiliga. Tuu le id = "o loʻo i ai nei" i luga o le laupepa e te manaʻo e faamamafaina i lena itulau. E masani ona ou faʻaaoga lenei mea e faʻamaonia ai le itulau o loʻo oʻu i ai, ae mafai ona e faʻaaogaina e faʻamaonia ai le pito sili ona taua. Pe mafai foi ona e aveesea atoa.
03 o le 06
Amata le Faʻataʻatia o lau Vaevaega
E mafai ona e faʻaaogaina se laupepa i fafo pe o se laupepa i totonu . O le faʻataʻitaʻiga o le itulau o faʻataʻitaʻiga o loʻo faʻaogaina ai se pepa lanu i totonu i le
Muamua O le a tatou Faʻataʻitaʻia le tagata lava ia
O le mea lea tatou te faʻaaoga ai le lisi o le vasega .in le HTML. Nai lo le faʻailogaina o le UL tag, lea o le a faʻaalia ai lisi uma e le ogatasi i luga o lau itulau, e tatau ona e na o le vasega UL e tatau ona fai. tablist O lea la o le uluai pepa tusia i lau CSS e tatau ona:
.tablist {}Ou te manaʻo e tuʻu i le pito i tua o le fusi (}) i luma o le taimi, o lea ou te le galo mulimuli ane.
A o matou faʻaaogaina se lisi lisi le lisi mo le faasologa o lisi lisi, ae matou te le mananao i ni pulu poʻo numera o loʻo fetolofi i totonu. O le mea muamua e tatau ona e faʻaopopoina. lisi-leai: leai; E taʻu mai ai i le masini e ui lava o se lisi, o se lisi e aunoa ma ni mamanu na fuafuaina muamua (pei o pulu poʻo numera).
Ma, e mafai ona e setiina le maualuga o lau lisi e fetaui ma avanoa e te manaʻo e faʻatumu. Sa ou filifili 2m mo loʻu maualuga, aua e faaluaina le tele o le vai papatiso, ma tuuina atu e tusa ma le afa afa i luga ma lalo ifo o le tusiga o le lisi. maualuga: 2em; Ae e mafai ona e faʻatulagaina lou lautele i soo se ituaiga lava e te manaʻo ai. UL tags o le a otometi lava ona ave le 100% o le lautele, o lea sei vagana ua e manao ia laʻititi nai lo le koneteina o loʻo i ai, e mafai ona e lafoaʻi lautele.
I le mea mulimuli, afai e le i ai ni faʻasalalauga mo UL ma OL, o le a e manaʻo e tuʻuina i totonu. O lona uiga e tatau ona e tapeina tuaoi, tafatafa, ma tapuni i lau UL. paʻu: 0; tuaoi: 0; tuaoi: leai; Afai ua uma ona e setiina le UL tag, e mafai ona e suia ia laina, tapuni, poʻo le tuaoi i se mea e fetaui ma lau mamanu.
Lau vasega faaiu .tablist e tatau ona foliga faapenei:
.tablist {lisi-ituaiga: leai; maualuga: 2em; paʻu: 0; tuaoi: 0; tuaoi: leai; }04 o le 06
Faʻasaʻoina o Lisi Lisi Lisi
O le taimi lava e te faʻailogaina ai lau lisi e le ogatasi, e manaʻomia lou faʻatinoga o le LI i totonu. A leai, o le a latou gaoioi e pei o se lisi faʻasologa ma taʻitasi agai atu i le laina e sosoo ai e aunoa ma le tuʻu sao o au 'afā.
Muamua, faatulaga se mea e te faʻaaogaina:
.tablist is {}Ona e manaʻo lea e faaseʻe au 'au' ina ia latou lalaga i luga o le vaalele vaalele. fetolofi: tauagavale;
Ma aua nei galo e faaopoopo nisi o vaitusi i le va o afitusi, o lea latou te le fusia faatasi ai. tafatafa-taumatau: 0.13em;
E tatau ona foliga foliga o lau 'au:
.tablist i {float: left; tafatafa-taumatau: 0.13em; }05 o le 06
Faia o Tape Vaavaai pei o Tapa i le CSS 3
Ina ia faia le tele o le mamafa o le siitiaina i lenei laupepa laupepa, o loʻo ou taulaiina sootaga i totonu o le lisi e le faʻamaonia. E iloa e le au soso e fesoʻotaʻi atili i luga o le 'upega tafaʻilagi nai lo isi faʻamau, o le mea lea e sili atu ona faigofie le faʻaogaina o sailiga matutua i mea e pei o le taufaʻailoga pe afai e te faʻapipiʻi i le taula taula (lusi). O lea ia muamua tusi au mea e fai:
.ablist is a {} .tablist at: hover {}Ona o nei laupepa e tatau ona pei o ni nusipepa i totonu o se talosaga, e te manao e faʻatalolaina le vaega atoa o le lisi, e le naʻo le fesoʻotaʻiga fesoʻotai. Ina ia faia lenei mea, e tatau ona e liliu le A tag mai le tulaga masani o le " inline " i se elemene poloka . faʻaalia: poloka; (Afai e te fia iloa nisi mea e uiga i le eseesega, faitau Block-Level vs. Inline Elements .)
Ma, o se auala faigofie e faʻamalosi ai au 'au e foliga tutusa ma le tasi, ae e faʻamalosi e fetaui ma le lautele o le tusitusiga o le faia lea o le taumatau saʻo ma le tauagavale tutusa. Sa ou faʻaaogaina le mea e faʻaaogaina ai le mea totino e tuʻu i luga ma lalo i le 0 ma le taumatau ma le agavale i le 1m. taʻavale: 0 1m;
Na ou filifili foi e aveese le sootaga o loo lisiina, ina ia foliga mai e leai se sootaga o tafaoga. Ae afai e ono fenumiai lau au maimoa, tuu ese lenei laina. sootaga-teuteuga: leai;
E ala i le tuʻuina o se lauulu lauulu i autafa o faʻamau, e foliga ai latou foliga o ni afifi. Na ou faʻaaogaina le fanua faʻatapulaʻa tuaoi e tuʻu ai le tuaoi faʻataʻamilo i itu uma e fa: 0.06em solid # 000; Ona faʻaaogaina lea o le pito i lalo ole pito i lalo e aveese ai mai le pito i lalo. tuaoi-lalo: 0;
Ona ou faia lea o ni fetuutuunaiga i le vai papatiso, lanu, ma le lanu o le pito i lalo. Faʻatulaga nei mea i sitaili e tutusa ma lau 'upega tafaʻilagi. mamanu: malosi 0.88em / 2al arial, geneva, helvetica, leai-serif; lanu: # 000; lanu-lanu: #ccc;
O ituaiga uma o loʻo taʻua i luga e tatau ona alu i le tagata filifilia .tablist a a, le tulafono ina ia latou aʻafia ai le taula o le taula i le lautele. Ona faʻaalia lea o le faʻaogaina o le nusipepa, e tatau ona faʻaopopo i ai se tulafono a le setete .tablist a: vavalo.
Ou te fiafia e suia le lanu o le tusitusiga ma le talaaga e fai ai le pop pop pe a e faʻaaogaina. talaaga: # 3cf; lanu: #fff;
Ma na ou aofia ai se isi faʻamanatuga i tagata sailiili ou te manaʻo ia tuʻuina atu le fesoʻotaʻiga e aua le faʻamaonia. tusitusiga-teuteuga: leai; O le isi metotia taatele o le toe faʻafoʻiina o le laina i lalo pe ae faʻafefete i luga o le lisi. Afai e te manaʻo e faia lena mea, suia i tusitusiga-teuteuga: vase lalo;
Ae o fea oi ai le CSS 3?
Afai ua e gauai atu, atonu ua e matauina e leai ni CSS 3 sa masani ona faaaoga i le pepa pepa. E sili atu le lelei o le galue i soʻo se mea fou faʻaonapo nei, e aofia ai Internet Explorer. Ae e le mafai e le tape foliga foliga sili atu nai lo fagu sikuea. I le faʻaopopoina o le laina o le CSS 3-fronti-radius (ma e fesoʻotaʻi faʻatasi-telefoni patino) e mafai ona e faʻataʻamiloina itu, e foliga mai pei o faʻamau i luga o se faila manila.
O sitaili e tatau ona e faʻaopopo i le .tablist o se tulafono e: -o le pito i luga-taumatau-matau-radius: 0.50em; -i luga ole pito i luga-agavale-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; laina pito i luga-taumatau: 0.50em; laina pito i luga-agavale-radius: 0.50em;
O faiga mulimuli ia sa ou tusia:
.tablist ei ai {Faʻaaliga: poloka; taʻavale: 0 1m; tusitusiga-teuteuga: leai; tuaoi: 0.06em malosi # 000; tuaoi-lalo: 0; mamanu: malosi 0.88em / 2al arial, geneva, helvetica, leai-serif; lanu: # 000; lanu-lanu: #ccc; / * CSS 3 elemene / / webkit-border-top-right-radius: 0.50em; -i luga ole pito i luga-agavale-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; laina pito i luga-taumatau: 0.50em; laina pito i luga-agavale-radius: 0.50em; } .tablist a: hover {background: # 3cf; lanu: #fff; tusitusiga-teuteuga: leai; }Faatasi ai ma nei sitaili, o loʻo ia te oe se lisi autu e galue i matai tetele uma ma e foliga mai o taʻaloga logo lelei i totonu o le browsers CSS 3. O le isi itulau o loʻo tuʻuina atu ai ia te oe se isi filifiliga se tasi e mafai ona e faʻaaoga e teu ai lava.
06 o le 06
Faʻamalamalama le Lisi Faʻamau
I le HTML na ou fatuina, o le UL e tasi le lisi o le lisi ma se ID. O lenei mea e mafai ai e oe ona tuʻuina atu le LI se tasi mai le isi vaega. O le tulaga sili ona taatele o le faia lea o le lisi o loʻo i ai nei e tu i fafo i nisi auala. O le isi auala e mafaufau ai i lenei mea, e te manao e faʻamaepe ia lepe e le o ola. Ona e suia lea o le id i itulau eseese.
Ou te faia uma le tag #current A ma le #current A: hover sta ina ia e eseese uma. E mafai ona e suia le lanu, lanu o talaaga, e oʻo lava i le maualuga, lautele ma le paʻu o lena elemene. Fai soʻo se suiga e talafeagai i lau mamanu.
.tablist i # nei o se {background-color: # 777; lanu: #fff; } .tablist i # nei a: hover {background: # 39C; }Ma ua e faia! Ua na ona e fatuina se lisi autu mo lau 'upega tafaʻilagi.