01 of 06
Sida loo abuuro Nabadgelyo Taaban leh CSS iyo Sawirro la'aan
Nidaamyada bogagga shabakadda waa liisto liisto ah, oo loox-gooyeyna waa sida liiska taxanaha ah. Waa sahlan tahay in la abuuro cagajugleyn cagaji leh CSS, laakiin CSS 3 wuxuu na siinayaa dhowr qalab oo dheeraad ah si looga dhigo inay u eegaan xataa xitaa.
Tababarkani wuxuu kaa qaadi doonaa HTML iyo CSS loo baahan yahay si loo abuuro menu CSS-ka. Riix halkan si aad u aragto sida ay u eegi doonto.
Moodhkan buuggu wuxuu adeegsanayaa muuqaal , kaliya HTML iyo CSS 2 iyo CSS 3. Waxaa si fudud loogu diyaarin karaa in lagu daro tabsiyo badan ama beddelaya qoraalka iyaga.
Taageerada Browser
Tani waxay ka shaqeyn doontaa dhammaan dijitaalada waaweyn . Internet Explorer ma muujin doono geesaha wareegsan, laakiin haddii kale, waxay muujinaysaa tabsiyada sida Firefox, Safari, Opera, iyo Chrome.
02 of 06
Qor Liiska Gurigaaga
Dhamaan rukummada navigation iyo tabs oo runtii waa liis aan ku tiirsaneyn. Sidaa daraadeed waxa ugu horreeya ee aad rabto inaad sameyso waa inaad ku qortaa liis aan ku tiirsaneyn xiriirka aad ku xiran tahay meesha aad rabto in aad safar gaaban ku tagto.
Casharadani waxay ku fekereysaa in aad qoraalkaaga ku qorayso tifaftiraha qoraalka iyo inaad ogtahay meesha aad dhigto HTML-kaaga ku yaala bogga internetka.
Ku qor liistadaada aanad raacsanayn sidan:
- class = "tablist">
- CSS 3
- id = "hada"> Tabs
- Wixii
- Menus
Waxaad ogaan doontaa in xeerku ku dhawaaqayo laba waxyaalood: fasalka = "liiska" iyo id = "hadda". Marka hore waa loo baahan yahay . Haddii aadan dhigin liistada liisaska liiskaaga aan la xariira, tabsasku ma shaqeyn doono. Midda labaad waa ikhtiyaari. Ku dheji id = "hada" wixii kuxiga aad jeceshahay in lagu muujiyo boggaas. Inta badan waxaan isticmaalaa tan si aan u muujiyo bogga aan ku jiro, laakiin waad isticmaali kartaa si aad u muujiso tabta ugu muhiimsan. Ama waxaad ka saari kartaa gabi ahaanba.
03 of 06
Bilaabi Editing Your Sheet Sheet
Waxaad isticmaali kartaa warqad dibadda ah ama xaashi gudaha ah . Bogga tusaalaha ee tusaalaha waxay isticmaalaysaa warqad ku taal gudaha
ee dokumentiga.Marka hore waxaan isku dayi doonaa UL
Tani waa halka aan ku isticmaaleyno liiska fasalka. Halkii ay ka dhigan tahay qoraalka UL, kaas oo ku qori lahaa dhammaan liisaska aan la xariira ee boggaaga, waa in aad ku habboon tahay fasalka UL-da. liistada liiska Haddaba marka ugu horeysa ee CSS-gaagaagu waa inuu ahaadaa:
.tablist {}Waxaan jecelahay in aan ku dhejiyo bareemka cirifka ah (}) waqti kahor, sidaas darteed ma iloobin markale.
Inkastoo aan isticmaaleyno liiska liiska aan la raacsaneyn ee liistada liiska tabka, laakiin ma dooneyno wax rasaas ama nambaro ku dhex jira. Sidaas daraadeed qaabka hore waa inaad ku darto. qaabka liiska: midna; Tani waxay sheegaysaa barta shabakada in kastoo ay liisto, waa liis aan lahayn qaabab hore loo go'aamiyey (sida rasaas ama lambaro).
Kadib, waxaad dhigi kartaa dhererka liiskaaga si aad u dhigto meesha aad rabto inaad buuxiso. Waxaan doortay 2em dhererkaygayga, maaddaama ay labalaabayso cabbirka cabbirka caadiga ah, waxaanay ku dhawaad kala badh ka dhigtaa oo ka hooseeysaa qoraalka miiska. dhererka: 2em; Hase yeeshee, waxaad ballaadhin kartaa xajmigaaga wax kasta oo aad jeceshahay. UL tagsigu wuxuu si toos ah u qaadi doonaa boqolkiiba 100 ballaaran, sidaas darteed haddii aad rabto inay ka yaraato weelka hadda jira, waad ka bixi kartaa ballaadhinta.
Ugu dambeyntii, haddii xaashidaada xirfadeed ee aadan haysanin UL iyo OL tags, waxaad rabi laheyd inaad geliso. Taas macnaheedu waa inaad xirto xuduudaha, marginsiyada, iyo kaadidaada UL. caarada: 0; margin: 0; xuduudda: midna; Haddii aad horey u soo celisay tagitaanka UL, waxaad bedeli kartaa margooyinka, cidhifka, ama xuduudaha wax ku habboon qaabeyntaada.
Fasalka ugu dambeeya ee fasalkaaga waa inuu u ekaado sidan:
.waxaad ku qortaa liistada liiska: midna; dhererka: 2em; caarada: 0; margin: 0; xuduudda: midna; }04 06
Editing liiska LI liiska
Marka aad liisto liistadaada aanad ku xidhnayn, waxaad u baahan tahay inaad ku dhajiso qoraallada LI gudaha. Haddii kale, waxay u dhaqmi doonaan sida liiska caadiga ah oo kasta oo u guuraya xariiqda xiga iyadoo aanad si sax ah u dhigin saxannadaada.
Marka hore, samee hantida gurigaaga:
.waxaad kuKadibna waxaad rabtaa in aad ku daboolatid tabahaaga si ay ugu fariistaan diyaaradda jiifka ah. float: bidix;
Ha ilaawin inaad ku darto margin inta u dhaxaysa badhanka, sidaa darteed iskuma duwin. margin-xaq: 0.13em;
Hababkaada lihi waa inay u ekaataa sidan:
.waxaad ku jirtaa {float: bidix; margin-xaq: 0.13em; }05 oo 06
Sameynta Tabs Muraayadaha Muuqaalka leh CSS 3
Si aad u qaadato inta badan culeyska culus ee xaashida qaabkan, waxaan diiradda saarayaa xiriirrada ku jira liiska aan la socon. Dareemayaashu waxay garawsan yihiin in isku xirnaanta ay ka badan tahay bogga internetka marka loo eego qoraalka kale, sidaas awgeed way fududahay in la helo boodhadhiyaal waawayn oo u hoggaansamaya waxyaabo ay ka mid yihiin hover-yada haddii aad ku soo dhejiso tiirarka. Marka ugu horeysa qor qoraalkaaga qaabka:
.waxaad ku jirtaa liiska {.} liistada liiska: hover {}Sababtoo ah tabsiyadu waa inay u dhaqmaan sida muraayadaha codsiga, waxaad rabtaa bedka dhamaanteed ee tabka inay noqdaan kuwo la dajin karo, ma ahan kaliya qoraalka la xidhiidha. Si arrintan loo sameeyo, waa inaad ku beddeshaa "A" ka ah "caadiga ah " gobolka oo ku jira qayb xaddidan . bandhigid: xannibaad; (Haddii aad xiiseyneyso inaad ogaato wax dheeraad ah oo ku saabsan faraqa, akhri Block-Level iyo Inline Elements .)
Kadibna, hab sahlan oo lagu garto tabahaaga si ay u noqoto mid isku mid ah, laakiin wali waa dabacsan tahay inuu ku ekaado dhererka qoraalka waa in la sameeyo midabka saxda ah iyo kan bidixda. Waxaan u isticmaalay dhismaha sheyga si aan u dhigo dusha sare iyo hoose ilaa 0 iyo midig iyo bidix ilaa 1am. dharka: 0 1em;
Waxaan sidoo kale doortay in ay ka saaraan link hoosta, si ay tabs yar u egyahay sida xiriirka. Laakiin haddii dhagaystayaashaada laga yaabo inay ku wareeraan, taasi ka baxso. link-decoration: none;
Markaad xuddun khafiif ah ku hareereyso hareeraha, waxay u egtahay inay u egtahay tabs. Waxaan u isticmaali jiray hantida xuduudka ah ee xuduudda ah ee xuduudaha dhammaan afarta dhinac: 0.06m xoog leh # 000; Ka dibna wuxuu isticmaalaa hantida xuduudda hoose si uu uga saaro hoosta. xuduudda-hoose: 0;
Kadibna waxaan wax ka bedelay qaabka font, color, iyo midabyada hoose ee tabs. U samee kuwan qaababka u dhigma boggaaga. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; midabka: # 000; midabka asalka ah: #ccc;
Dhammaan qaababka kor ku xusan waa inay u tagaan kormeeraha .tabixi a a, qawaani si ay saameyn ugu yeeshaan qoraalka guud ahaan. Ka dib si aad u sameyso tabsu u muuqato mid la riixi karo, waa inaad ku dartaa xukun dawlad goboleedyo yar yar.
Waxaan jecelahay inaan bedelo midabka qoraalka iyo asalka si aad u sameyso muraayada markaad mooddo. asalka: # 3cf; midabka: #fff;
Oo waxaan ku darey xusuusin kale ee daalacashada ah in aan rabo in isku xirka aan la sii hoos dhigin. qoraalka-qurxinta: midna; Qaab kale oo caadi ah waa inaad dib u soo celiso hoosta marka aad riixaysid miiska. Haddii aad rabto inaad sidaan sameyso, u beddel qaabka-qurxinta: hoosta;
Laakiin halkee CSS 3?
Haddii aad dareenka bixisay, waxaa laga yaabaa inaad ogaatay in aysan jirin wax CSS 3 ah oo loo isticmaalo xaashida qaabka. Tani waxay leedahay faa'iido ay ka shaqeynayso browser kasta oo casri ah, oo ay ku jiraan Internet Explorer. Hase yeeshee ma dhigi muraayaduhu waxay u eg yihiin wax ka badan sanduuqyada labajibbaaran. Marka lagu daro CSS 3 style call-radius-(oo ay la xiriirto wicitaano gaar ah oo browser ah) waxaad samayn kartaa geesaha wareegsan, si aad u eegto more sida tabs on a folder manila.
Noocyada aad ku dari karto liistada liistada ee liistada waa: -waxbarro-sare-dhinaca midig-midig: 0.50em; -waxbarro-xadka dhinaca-bidix- 0.50em; -moz-border-radius-soil: 0.50em; -moz-border-radius-topleft: 0.50em; xajmiga ugu sareeya-dhinaca midig: 0.50em; xuduudaha sare-dhinaca-bidix: 0.50em;
Kuwani waa shuruucda ugu dambeysa ee aan qoray:
.waxaad ku qortaa sawir: block; dharka: 0 1em; qoraalka-qurxinta: midna; xuduudda: 0,00em solid # 000; xuduudda-hoose: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; midabka: # 000; midabka asalka ah: #ccc; / * CSS 3 istiraatiijiyadeed * / webkit-cirifka-sare-radius: 0.50em; -waxbarro-xadka dhinaca-bidix- 0.50em; -moz-border-radius-soil: 0.50em; -moz-border-radius-topleft: 0.50em; xajmiga ugu sareeya-dhinaca midig: 0.50em; xuduudaha sare-dhinaca-bidix: 0.50em; } .waxaad ku qortaa: Hover (asalka): # 3cf; midabka: #fff; qoraalka-qurxinta: midna; }Iyada oo qaababka noocaas ah, waxaad haysataa liis ciqaab ah oo ka shaqeeya dhamaan dookheyaal waaweyn oo u eg sida tabbarrada wanaagsan ee daabacan ee CSS 3 boodhadhaha ku habboon. Bogga xiga wuxuu ku siinayaa hal doorasho dheeraad ah oo aad isticmaali karto si aad ugu labisto.
06 of 06
Tilmaamida Tabarka hadda
In HTML aan abuuray, UL wuxuu lahaa hal liis ay ku qoran tahay ID. Tani waxay kuu ogolaaneysaa inaad siiso LI nooc ka duwan qaabka kale. Xaaladda ugu caansan waxay tahay in la sameeyo muraayadda hadda taagan si ka duwan. Siyaabo kale oo aad uga fekereyso tani waa inaad rabto inaad ka soo baxdo tabsiyada aan nooleyn. Ka dib markaad beddesho meesha uu idu ku yaal boggaga kala duwan.
Anigu waxaan jecelahay labadaba calaamadda A-da iyo sidoo kale # A-da: A hover durugsan si labada labaduba u kala duwan yihiin. Waxaad bedeli kartaa midabka, midabka asalka ah, xitaa dhererka, ballaca iyo dhererka qaybtaas. Samee isbeddel kasta oo macquul ah ee qaabayntaada.
.waxaad ku qortaa # hadda midabkaaga midabkiisu yahay: # 777; midabka: #fff; } .waxaad ku qortaa # hadda jira: hover {asalka: # 39C; }Oo adigu waad samaysay! Waxaad kaliya abuurtay liis ku qoran oo loogu talagalay boggaaga.