01 saka 06
Carane Nggawe Navigasi Tabbed karo CSS lan Ora Ana Gambar
Navigasi ing kaca web minangka wangun dhaptar, lan navigasi tab kaya daftar horisontal. Iku cukup gampang kanggo nggawe navigasi tab horisontal karo CSS, nanging CSS 3 menehi kita sawetara alat liyane kanggo nggawe wong katon malah luwih apik.
Tutorial iki bakal nggawa sampeyan liwat HTML lan CSS sing dibutuhake kanggo nggawe menu tabbed CSS. Klik link kasebut kanggo ndeleng carane bakal katon.
Menu tab iki ora nganggo gambar , mung HTML lan CSS 2 lan CSS 3. Bisa diundhuh kanthi gampang kanggo nambah tab liyane utawa ngganti teks kasebut.
Dukungan Browser
Menu tab iki bakal bisa digunakake ing kabeh browser utama . Penjelajah internet ora bakal nuduhake sudhut bunder, nanging uga, bakal nuduhake tab kaya Firefox, Safari, Opera, lan Chrome.
02 saka 06
Tulis Daftar Menu
Kabeh menu lan tab navigasi pancene mung daftar tanpa aturan. Dadi, bab pisanan sing pengin dilakoni yaiku nulis dhaptar pranala tanpa urutan menyang ngendi sampeyan pengin navigasi tab.
Tutorial iki assuming yen sampeyan nulis HTML ing editor teks lan sampeyan ngerti ngendi kanggo nyetel HTML kanggo menu ing kaca web.
Tulis daftar tanpa urutan kaya iki:
- kelas = "tablist">
- CSS 3
- id = "current"> Tabs
- Kanggo
- Menus
Sampeyan bakal sok dong mirsani sing kode kasebut nyebat kalih bab: class = "tablist" and id = "current". Pisanan kudu . Yen sampeyan ora nyimpen daftar tablist ing dhaftar tanpa aturan, tab ora bisa digunakake. Kapindho iku pilihan. Sijine id = "current" ing tab kang sampeyan bakal disorot ing kaca kasebut. Aku biasane nggunakake iki kanggo nyorot kaca sing aku urip, nanging sampeyan bisa nggunakake aplikasi kasebut kanggo nyorot tab paling penting. Utawa sampeyan bisa mbusak kabeh.
03 saka 06
Mulai Ngowahi Gaya Panjenengan Lembar
Sampeyan bisa nggunakake salah siji sheet gaya utawa internal style sheet . Kaca menu sampel nggunakake pola gaya internal ing
dokumen.Pisanan Kita bakal Gaya UL dhewe
Iki ngendi kita nggunakake tablist kelas. Ing HTML. Tinimbang ngganti tag UL, sing bakal nampilake kabeh dhaptar tanpa urutan ing kaca sampeyan, sampeyan kudu gaya mung kelas UL. tablist Dadi entri pisanan ing CSS sampeyan kudu:
.tablist {}Aku seneng nyelehake ing njerone pungkasan kriting (}) sadurunge, supaya aku ora lali mengko.
Nalika kita nggunakake label dhaptar unordered kanggo dhaptar menu tab, nanging kita ora pengin sembarang peluru utawa nomer creeping. Supaya gaya pisanan sampeyan kudu nambah punika. gaya-gaya: none; Iki nuduhake browser sing nalika iku daftar, iku daftar tanpa gaya sing wis ditemtokake (kayata peluru utawa nomer).
Banjur, sampeyan bisa nyetel dhuwure dhaftar supaya cocog karo spasi sing pengin diketik. Aku milih 2em kanggo dhuwure, kayane sing ukuran dobel standar, lan menehi sekitar setengah em ing ndhuwur lan ngisor teks tab. dhuwur: 2em; Nanging sampeyan bisa nyetel jembaré menyang ukuran apa wae sing sampeyan seneng. UL tags kanthi otomatis bakal njupuk 100% saka jembar, dadi yen sampeyan pengin luwih cilik tinimbang sing saiki, sampeyan bisa ninggalke metu.
Pungkasan, yen sheet gaya master ora duwe prasetel kanggo label UL lan OL, sampeyan bakal pengin nglebokna. Iki tegese sampeyan kudu mateni wates, pinggiran, lan padding ing UL. padding: 0; margin: 0; wates: ora; Yen sampeyan wis ngreset tag UL, sampeyan bisa ngganti pinggiran, padding, utawa wates menyang bab sing cocok karo desain sampeyan.
Kelas final sampeyan kudu katon kaya iki:
.tablist {list-style: none; dhuwur: 2em; padding: 0; margin: 0; wates: ora; }04 saka 06
Nyunting Item Dhaftar LI
Sawise sampeyan nemtokake daftar tanpa urutan, sampeyan kudu ngetik tag LI ing njero. Yen ora, bakal padha tumindak kaya dhaptar standar lan saben pindhah menyang baris sabanjure tanpa nempatake tab kanthi bener.
Pisanan, nyetel properti gaya sampeyan:
.tablist li {}Banjur sampeyan pengin ngambang tab sampeyan supaya bisa mlaku ing bidang horisontal. ngambang: kiwa;
Lan aja lali nambah wates antarane tab, supaya ora nggabung. margin-right: 0.13em;
Gaya liyo sampeyan kudu katon kaya iki:
.tablist li {float: left; margin-right: 0.13em; }05 saka 06
Nggawe Tab Deleng Kaya Tab karo CSS 3
Kanggo nindakake akehe pengangkatan abot ing sheet gaya iki, aku nyasarake pranala ing daftar tanpa urutan. Browser ngenali manawa pranala luwih akeh ing kaca web tinimbang label liyane, saengga luwih gampang nemu browser lawas kanggo mematuhi samubarang sing kaya-kaya nyatakake yen sampeyan masang menyang tag anchor (pranala). Dadi dhisik nulis sifat gaya sampeyan:
.tablist li a {} .tablist li a: hover {}Amarga tab iki kudu tumindak kaya tab ing aplikasi, sampeyan pengin kabeh area tab bisa diklik, ora mung teks sing disambung. Kanggo nindakake iki, sampeyan kudu ngowahi label A saka kondisi normal " inline " dadi unsur blok . tampilan: blok; (Yen sampeyan kepengin ngerti liyane babagan prabédan, maca Block-Level vs. Elline Inline .)
Banjur, cara sing gampang kanggo meksa tab sampeyan dadi simetris karo siji, nanging isih bisa mlompong kanggo nyayangke lebar teks kanggo nggawe padding tengen lan kiwa sing padha. Aku nggunakake padding shorthand properti kanggo nyetel ndhuwur lan ngisor 0 lan tengen lan kiwa kanggo 1em. padding: 0 1em;
Aku uga milih ngilangi pranala kasebut, supaya tab katon kurang kaya pranala. Nanging yen pamirsa bisa bingung karo kuwi, ninggalake baris iki. link-dekorasi: ora ana;
Dening panggolekan pinggiran sing tipis ngubengi tab, iku ndadekake dheweke katon kaya tab. Aku migunakake wewatesan tapel wates kanggo mbatesi tapel wates ing kabeh papat sisi: 0.06em solid # 000; Lan banjur digunakake properti wates-ngisor kanggo nyopot saka ngisor. border-bottom: 0;
Banjur aku nggawe sawetara pangaturan ing font, werna, lan werna latar mburi tab. Nyetel iki menyang gaya sing cocog karo situs sampeyan. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; werna: # 000; latar mburi-werna: #ccc;
Kabeh gaya ing ndhuwur kudu dilebokake ing pemilih. Keterangan umum, aturan supaya bisa mangaruhi tag jangkar ing umum. Banjur kanggo nggawe tab katon luwih bisa diklik, sampeyan kudu nambahake sawetara aturan negara .tablist neng: hover.
Aku seneng ngowahi warna teks lan latar mburi kanggo nggawe tab pop nalika sampeyan mouse. latar mburi: # 3cf; werna: #fff;
Lan aku kalebu pangeling liyane kanggo browser sing aku pengin link tetep tetep ora dituduhake. teks-dekorasi: ora ana; Cara umum liyane yaiku nguripake garis ngisor nalika sampeyan mouse ing tab. Yen sampeyan pengin nggawe, ngganti menyang teks-dekorasi: nggaris;
Nanging ing ngendi CSS 3?
Yen sampeyan wis ngrungokake, sampeyan wis ngelingake yen ora ana gaya CSS 3 sing digunakake ing sheet gaya. Iki duwe kauntungan saka nggarap browser modern, kalebu Internet Explorer. Nanging ora nggawe tab katon kaya luwih saka kotak kothak. Kanthi nambahake watesan radius watesan CSS 3 (lan kasebut telpon khusus kanggo browser) sampeyan bisa nggawe sudhut dibunderaké, katon kaya tab ing folder manila.
Gaya sampeyan kudu ditambahake menyang .tablist ing aturan yaiku: -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; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Iki minangka aturan gaya final sing aku tulis:
.tablist li a {display: block; padding: 0 1em; teks-dekorasi: ora ana; wates: 0.06em padat # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; werna: # 000; latar mburi-werna: #ccc; / * CSS 3 unsur * / 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; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; werna: #fff; teks-dekorasi: ora ana; }Kanthi gaya iki, sampeyan duwe menu tab sing dianggo ing kabeh browser utama lan katon kaya tab cetak ing CSS 3 browser sing kompatibel. Kaca sabanjuré menehi sampeyan siji opsi liyane sing bisa digunakake kanggo nyatu malah luwih.
06 saka 06
Sorot Tab Saiki
Ing HTML aku digawe, UL nduweni siji dhaftar unsur karo ID. Iki ngidini sampeyan menehi siji gaya LI beda saka liyane. Situasi sing paling umum yaiku kanggo nggawe tab saiki metu ing sawetara cara. Cara liya kanggo mikir iki yaiku yen sampeyan pengin kelabu metu tab sing ora urip. Sampeyan banjur ngganti endi id ing kaca sing beda-beda.
Aku gaya loro #current A tag uga #current A: hover sta supaya loro-lorone beda. Sampeyan bisa ngganti werna, werna latar mburi, malah dhuwur, jembar lan padding saka unsur kasebut. Nggawe owah-owahan apa wae sing nggawe raos ing rancangan sampeyan.
.tablist li # current a {background-color: # 777; werna: #fff; } .tablist li # current a: hover {background: # 39C; }Sampeyan wis rampung! Sampeyan wis nggawe menu tab kanggo situs web sampeyan.