01 na 06
Yadda za a ƙirƙirar Navigation tare da CSS da Babu Hotuna
Kewayawa akan shafukan yanar gizon wani nau'i ne na jerin, kuma tabbas kewayawa kamar jerin tsararru ne. Yana da sauƙi a ƙirƙirar kewayawa tare da CSS, amma CSS 3 yana ba mu wasu kayan aikin da zasu sa su yi la'akari da nicer.
Wannan koyaswa zai dauki ku ta hanyar HTML da CSS da ake buƙata don ƙirƙirar menu na CSS. Danna kan wannan haɗin don ganin yadda za a duba.
Wannan menu na tabbacin ba ya amfani da hotunan , kawai HTML da CSS 2 da CSS 3. Ana iya gyara shi sauƙi don ƙara ƙarin shafuka ko canja rubutun a cikinsu.
Taimako na Bincike
Wannan menu na menu zaiyi aiki a duk manyan masu bincike . Mai bincike na Intanit ba zai nuna sassan kusurwa ba, amma in ba haka ba, zai nuna shafuka kamar Firefox, Safari, Opera, da Chrome.
02 na 06
Rubuta Lissafin Menu
Duk menu da maɓallin kewayawa kawai suna da jerin marasa daidaito. Don haka abu na farko da kake son yi shi ne rubuta jerin jerin hanyoyin zuwa inda kake so kawayar tabbacin tafiya.
Wannan koyaswar tana ɗauka cewa kuna rubutu HTML a cikin editan rubutu kuma kuna san inda za ku sanya HTML don menu akan shafin yanar gizonku.
Rubuta jerinku marasa daidaituwa kamar wannan:
- class = "tablist">
- CSS 3
- id = "halin yanzu"> Shafuka
- Don
- Menus
Za ku lura cewa lambar ta kira abubuwa biyu: class = "tablist" da id = "yanzu". Ana buƙatar na farko. Idan ba ku sanya jerin tablist a jerinku mara kyau ba, shafuka ba za suyi aiki ba. Na biyu shine zaɓi. Sanya id = "a halin yanzu" a kan kowane shafin da kake so a haskaka a wannan shafin. Kullum ina amfani da wannan don haskaka shafin da nake ciki, amma zaka iya amfani da shi don haskaka mafi muhimmanci shafin. Ko zaka iya cire shi gaba daya.
03 na 06
Fara Shirya Takardar Yanki
Kuna iya amfani da takarda na waje ko takardar launi na ciki . Shafin menu na samfurin yana amfani da takardar layi na ciki a
Na farko za muyi amfani da kanta
Wannan shi ne inda muka yi amfani da jerin tabbacin .in HTML. Maimakon yin salo da sunan UL, wanda zai sa duk jerin abubuwan da ba a daɗe a kan shafinku, ya kamata ku yi kawai ɗakin UL. tablist Saboda haka shigarwa ta farko a cikin CSS ya zama:
.tablist {}Ina so in saka a gyaran gyare-gyare (}) a gaban lokaci, saboda haka ban manta da shi daga baya ba.
Duk da yake muna amfani da jerin layi mara kyau don menu na menu, amma ba mu son kowane harsashi ko lambobi masu ɓoyewa. Saboda haka salon farko da ya kamata ka ƙara shi ne. jerin-jerin: babu; Wannan ya gaya wa mai bincike cewa yayin da yake da jerin, yana da lissafi ba tare da tsarin da aka riga aka tsara (kamar harsasai ko lambobi ba).
Sa'an nan kuma, za ka iya saita tsawo na jerinka don daidaita filin da kake son shi ya cika. Na zabi 2m na tsayinta, kamar yadda yake ninka nau'ikan ma'auni, kuma ya ba da rabin rabin im a sama da kuma ƙasa da rubutu na shafin. tsawo: 2m; Amma zaka iya saita girmanka zuwa kowane irin girman da kake so. UL tags za su ɗauki kashi 100% na nisa, don haka sai dai idan kuna so ya zama karami fiye da akwati na yanzu, za ku iya barin nisa daga.
A ƙarshe, idan takardar labarunka ba ta da saiti don lambobin UL da OL, za ka so ka saka su. Wannan na nufin cewa ya kamata ka kashe iyakoki, haɓakanta, da kuma padding a kan UL. Samun: 0; gefe: 0; iyaka: babu; Idan ka riga ka sake saita maɓallin UL, zaka iya canza canje-canje, ƙila, ko iyakoki zuwa wani abu da ya dace da zane.
Your karshe .tablist aji kamata ya yi kama da wannan:
.tablist {style-list: babu; tsawo: 2m; Samun: 0; gefe: 0; iyaka: babu; }04 na 06
Shirya abubuwan Lissafin LI
Da zarar kun yi ladabi da jerin abubuwan da ba ku da kyau, kuna buƙatar yin layi da alamar LI a ciki. In ba haka ba, za su yi aiki kamar jerin daidaitattun kuma kowace tafi zuwa layi na gaba ba tare da sanya shafukanku daidai ba.
Na farko, kafa kayan kayan ku:
.tablist li {}Sa'an nan kuma kuna so ku yi iyo akan shafukanku don su tsara a saman jirgin saman kwance. taso kan ruwa: hagu;
Kuma kar ka manta da a kara wani gefe tsakanin shafuka, saboda haka basu haɗu tare. Hagu-dama: 0.13em;
Your styles ya zama kamar wannan:
.tablist li {float: hagu; Hagu-dama: 0.13em; }05 na 06
Yin Rubutun Labaran kamar Tabs tare da CSS 3
Don yin mafi yawa daga cikin nauyin da aka ɗaga a cikin wannan takarda, Ina sa ido kan hanyoyin da ke cikin jerin marasa daidaito. Masu bincike suna gane cewa haɗin suna haɓaka akan shafin yanar gizo fiye da wasu tags, saboda haka yana da sauƙi don samo masu bincike tsoho don biyan abubuwa kamar yanayin damuwa idan kun haɗa su zuwa tag ɗin alamar (haɗin). Saboda haka, ka fara rubutun kayan kaya:
.tablist ne a {} .tablist a: hover {}Saboda waɗannan shafukan ya kamata su zama kamar shafuka a cikin aikace-aikacen, kuna son dukkanin shafin za a danna, ba kawai rubutun da aka haɗa ba. Don yin wannan, dole ne ka juya A tag daga al'ada " inline " jihar a cikin wani nau'in allon . nuna: toshe; (Idan kuna sha'awar sanin ƙarin bambanci, karanta Block-Level vs. Inline Elements .)
Bayan haka, hanya mai sauƙi don tilasta shafukanku su zama daidaituwa tare da juna, amma har yanzu sassauka don dace da nisa daga cikin rubutun shine don sanya takalma na dama da hagu guda ɗaya. Na yi amfani da dukiyar da aka sare don yin saiti don saita saman da kasa zuwa 0 da dama da hagu zuwa 1m. Farawa: 0 1m;
Na kuma zaɓi ya cire alamar mahaɗin, don haka shafuka ba su da alaƙa kamar hanyoyin haɗi. Amma idan masu sauraron ku na iya rikicewa, ku bar wannan layi. mahada-kayan ado: babu;
Ta hanyar sanya gefen bakin ciki kusa da shafukan, yana sa su kama da shafuka. Na yi amfani da dukiyar da ke kan iyaka don sanya iyakar a kusa da iyakoki hudu: 0.06em m # 000; Sa'an nan kuma amfani da mallakar iyakokin ƙasa don cire shi daga kasa. iyakar iyaka: 0;
Bayan haka na yi wasu gyare-gyare ga font, launi, da launin launi na shafuka. Ka saita waɗannan zuwa sassan da ke daidaita shafinka. font: m 0.88em / 2em arial, geneva, helvetica, sans-serif; launi: # 000; Ƙari-launi: #ccc;
Dukkan hanyoyin da aka sama za su kasance a cikin zaɓaɓɓen .tablist a, da doka don su rinjayi alamar alamomin gaba daya. Sa'an nan kuma don nuna shafuka suna bayyanawa sosai, ya kamata ka ƙara karamin mulki a cikin jihar .tablist a: hover.
Ina so in canza launi na rubutun da bayanan don yin shafin pop lokacin da kake haɗari akan shi. bayanan: # 3cf; launi: #fff;
Kuma na haɗa wani tunatarwa ga masu bincike da cewa ina son hanyar haɗi ta kasance ba zato ba. kayan rubutu: babu; Wata hanya ta kowa ita ce ta juya bayanan layi a lokacin da kake yin linzamin kwamfuta akan shafin. Idan kana son yin wannan, canza shi zuwa kayan ado-rubutu: layi;
Amma Ina CSS 3 yake?
Idan ka kasance da hankali, tabbas ka lura cewa babu wata hanyar CSS da aka yi amfani da ita a cikin takarda. Wannan yana da amfani da aiki a kowane mai bincike na yau, ciki har da Internet Explorer. Amma ba ya sa shafuka suna kama da wani abu fiye da akwatunan shafe. Ta ƙaddamar da radius mai layi na CSS 3 (kuma yana da alaka da takamaiman kira-bincike) za ka iya sanya gefuna da kewaya, don duba kamar shafuka akan babban fayil na manila.
Tsarin da ya kamata ka kara zuwa ga .tablist a cikin wata doka ita ce: -webkit-border-top-right-radius: 0.50em; -didar-gefen-hagu-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; Yankin iyakoki-dama-radius: 0.50em; Ramin ragu na hagu-hagu: 0.50em;
Wadannan su ne tsarin zinare na karshe na rubuta:
.tablist ne a {nunawa: toshe; Farawa: 0 1m; kayan rubutu: babu; iyaka: 0.06em m # 000; iyakar iyaka: 0; font: m 0.88em / 2em arial, geneva, helvetica, sans-serif; launi: # 000; Ƙari-launi: #ccc; / * CSS 3 abubuwa * / webkit-border-top-right-radius: 0.50em; -didar-gefen-hagu-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; Yankin iyakoki-dama-radius: 0.50em; Ramin ragu na hagu-hagu: 0.50em; } .tablist a: hover {baya: # 3cf; launi: #fff; kayan rubutu: babu; }Tare da waɗannan styles, kuna da jerin tabbacin da ke aiki a duk masu bincike da yawa kuma suna kama da shafukan bugawa masu kyau a cikin masu bincike na CSS 3. Shafin na gaba yana ba ku wani zaɓi wanda za ku iya amfani dashi don yin ado da shi har ma fiye.
06 na 06
Nuna Tab na yanzu
A cikin HTML na halitta, UL yana da nau'in lissafin daya tare da ID. Wannan yana ba ka damar ba da LI guda daban daga sauran. Halin da ya fi dacewa shi ne ya sa shafin na yanzu ya tsaya a wasu hanyoyi. Wata hanyar da za ku yi tunanin wannan ita ce cewa kuna so su yi launin toka daga shafukan da ba su da rai. Sai ku canza inda id yake a shafukan daban.
Ina sane da tagin #current A da kuma #current A: Hakan da ya sa kowa ya zama daban-daban. Zaka iya canja launi, launi na baya, har ma da tsawo, nisa da kuma padding na wannan kashi. Yi duk wani canje-canjen da ya dace a zane.
.tablist li # yanzu a {baya-launi: # 777; launi: #fff; } .tablist li # yanzu a: hover {baya: # 39C; }Kuma kuna aikatawa! Kayi kawai ya halicci menu na tabbed don shafin yanar gizonku.