01-ից 06-ը
Ինչպես ստեղծել սեղմված նավարկություն CSS- ով եւ նկարներ չկան
Նավիգացիան վեբ էջերում ցուցակի ձեւն է, եւ թաքցված նավարկությունը նման է հորիզոնական ցուցակին: Պարզապես հեշտ է ստեղծել CSS- ի հորիզոնական էջանիշավորումը, սակայն CSS 3- ը մեզ տալիս է մի քանի գործիք, որպեսզի դրանք ավելի նուրբ լինեն:
Այս ձեռնարկը Ձեզ կտանի HTML- ի եւ CSS- ի միջոցով, որը պետք է ստեղծի CSS- ի էջանշված մենյու: Սեղմեք այս հղումը `տեսնելու, թե ինչպես է այն տեսնելու:
Այս էջանշված մենյուում պատկերներ չեն օգտագործվում, պարզապես HTML եւ CSS 2 եւ CSS 3: Այն կարող է հեշտությամբ խմբագրվել, լրացուցիչ տախտակներ ավելացնել կամ փոխել տեքստը:
Զննարկչի օժանդակություն
Այս ներդիրների ցանկը կաշխատի բոլոր խոշոր բրաուզերում : Internet Explorer- ը չի ցուցադրի կլորացված անկյունները, այլապես, այն կցուցադրի ինչպես Firefox, Safari, Opera եւ Chrome- ներ:
02-ից 06-ը
Գրեք ձեր ցանկի ցանկը
Բոլոր նավիգացիոն բաժինները եւ ներդիրները իսկապես ուղղորդված ցուցակ են: Այսպիսով, առաջին բանը, որ դուք ուզում եք անել, գրեք անուղղակի հղումների ցանկ, որտեղ ցանկանում եք ձեր tabbed navigation- ը:
Այս ձեռնարկը ենթադրում է, որ ձեր HTML- ը գրում եք տեքստային խմբագրիչում, եւ որ դուք գիտեք, թե որտեղ եք տեղադրեք ձեր HTML- ի ձեր մենյուի HTML- ը:
Գրեք ձեր անուղղակի ցուցակն այսպիսին:
- class = "tablist">
- CSS 3
- id = "ընթացիկ"> էջանշաններ
- For
- Մենյուներ
Դուք նկատում եք, որ կոդն անվանում է երկու բան `class =" tablist "եւ id =" current ": Առաջինն անհրաժեշտ է : Եթե դուք չհրապարակված ցուցակում չեք պահում տաբլիստների դասը, ապա ներդիրները չեն աշխատի: Երկրորդը `ընտրովի: Ներդիր id = "ընթացիկ" այն էջի վրա, որը ցանկանում եք ընդգծել այդ էջում: Ես սովորաբար օգտագործում եմ այն էջը, որի վրա ես գտնվում եմ, բայց կարող ես օգտագործել այն կարեւորագույն էջանիշը լուսաբանելու համար: Կամ կարող եք ամբողջությամբ հեռացնել:
03-ից 06-ը
Սկսեք խմբագրել ձեր ոճաթերթիկը
Դուք կարող եք օգտագործել արտաքին ոճը կամ ներքին ոճաթերթիկը : Նմուշի ընտրանքային էջը փաստաթղթի
էջում օգտագործում է ներքին ոճագիր:Նախ, մենք կզարգացնենք UL- ի ինքնուրույնությունը
Սա այն դեպքն է, երբ մենք օգտագործում ենք դասակարգային ցուցակը: HTML- ում: Փոխարենը UL- ի տեքստը ոճավորելը, որը ձեր բոլոր էջում կհամապատասխանի բոլոր վերադասավորված ցուցակներին, դուք պետք է միայն UL դասակարգեք: Այսպիսով ձեր CSS- ում առաջին գրառումն անհրաժեշտ է.
.փակ {}Ինձ դուր է գալիս դանդաղ շաղ տալ (}) ժամանակից շուտ, այնպես որ ես ուշ չեմ մոռանում:
Թեեւ մենք օգտագործում ենք չկարգավորված ցուցակների պիտակը, էջանիշերի ցանկի ցանկի համար, բայց մենք չենք ուզում որեւէ փամփուշտներ կամ թվեր սայթաքել: Այսպիսով, դուք պետք է ավելացնեք առաջին ոճը: ցանկի ոճ `ոչ; Սա պատմում է զննարկիչին, թեեւ դա ցուցակ է, այն ցանկն է, որը նախապես սահմանված ոճեր չէ (նման փամփուշտներ կամ թվեր):
Այնուհետեւ, դուք կարող եք սահմանել ձեր ցուցակի բարձրությունը, որպեսզի համապատասխանի այն այն տարածքին, որը ցանկանում եք այն լրացնել: Ես ընտրեցի 2եմ իմ բարձրության համար, քանի որ այն կրկնակի ստանդարտ տառատեսակ է, եւ տեքստի տեքստից վերեւում եւ ներքեւում տալիս է կես կես ժամ: բարձրությունը `2em; Բայց դուք կարող եք սահմանել ձեր լայնությունը ցանկացած չափի, որը ցանկանում եք: UL- ի պիտակները ավտոմատ կերպով կստանան լայնության 100% -ը, այնպես որ, եթե ցանկանում եք, որ այն ավելի փոքր լինի, քան ներկայիս կոնտեյները, կարող եք թողնել լայնությունը:
Վերջապես, եթե ձեր վարպետ ոճաթերթիկը չունի UL- ի եւ OL- ի պիտակների համար նախատեսված նախադրյալներ, ապա դրանք կցանկանաք տեղադրել դրանք: Սա նշանակում է, որ դուք պետք է անջատեք սահմանները, ծածկույթները եւ լրացրեք ձեր UL- ին: լրացնելով `0; margin: 0; սահման: ոչ; Եթե Դուք արդեն վերականգնել եք UL- ի պիտակը, կարող եք փոխել ծածկույթները, լրացնելը կամ սահմանը, որը համապատասխանում է ձեր դիզայնին:
Ձեր վերջին վերջնական դասակարգը պետք է նման լինի:
.tablist {list-style: none; բարձրությունը `2em; լրացնելով `0; margin: 0; սահման: ոչ; }04-ից 06-ը
Փոփոխել LI ցուցակի տարրերը
Երբ ձեր հստակեցված ցանկը հագեցած է, դուք պետք է ոճը ներդնել LI- ի մեջ: Հակառակ դեպքում, նրանք հանդես կգան որպես ստանդարտ ցուցակ, եւ յուրաքանչյուրը տեղափոխվում է հաջորդ գիծ, առանց ներդիրների ճիշտ տեղադրելու:
Նախ, ստեղծել ձեր ոճային գույքը.
.tablist li {}Այնուհետեւ ուզում եք բարձրանալ ձեր ներդիրները այնպես, որ դրանք հորիզոնական հարթությունում են: float: ձախ;
Եվ մի մոռացեք, որ ներդիրների միջեւ մի հատված ավելացնեք, այնպես որ դրանք միաձուլված չեն: margin-right: 0.13em;
Ձեր ոճի ոճերը պետք է նման լինեն:
.tablist li {float: ձախ; margin-right: 0.13em; }05-ից 06-ը
Ստեղծագործությունների ստեղծումը սցենարների նման է CSS- ով 3
Այս ոճի թերթիկում ծանր բեռնաթափման մեծ մասը գործադրելու համար, ես ուղղորդում եմ անուղղակի ցուցակում գտնվող հղումները: Բրաուզերները գիտակցում են, որ հղումներն ավելի շատ են անում, քան մյուս գրառումները, ուստի ավելի հեշտ է ձեռք բերել հին բրաուզերներ, որպեսզի համապատասխանի սավառնել պետություններին, եթե դրանք կցեք դրանք խարիսխի պիտակի (հղումներ): Այսպիսով, նախ գրեք ձեր ոճային հատկությունները:
{}. {nt:Քանի որ այս ներդիրները պետք է գործեն ներդիրների մեջ, ցանկանում եք, որ ներդիրի ողջ տարածքը լինի սեղմված, ոչ թե կապված տեքստը: Դա անելու համար դուք պետք է փոխեք A tag- ը `նորմալ« ներդիր »վիճակի մեջ մի բլոկի տարր : ցուցադրում `բլոկ; (Եթե ձեզ հետաքրքրում է տարբերության մասին ավելի շատ իմանալը, կարդացեք Block Level- ը Inline Elements- ում :)
Այնուհետեւ, ձեր ներդիրները միմյանց հետ սիմետրիկ դարձնելու հեշտ ճանապարհ է, բայց դեռեւս ճկուն է տեղավորվել տեքստի լայնությունը `ճիշտ եւ ձախ ձգան նույնը: Ես օգտագործել լիցքավորման ստի ստանդարտը, վերին եւ ներքեւը 0-ին, իսկ աջ եւ ձախը `1-ին: padding: 0 1em;
Ես նաեւ որոշեցի հեռացնել հղումը, ընդգծում է, որ ներդիրները պակաս տեսք ունեն նման հղումներով: Բայց եթե ձեր լսարանը կարող է շփոթված լինել, թողեք այս գիծը: հղում-հարդարում `ոչ;
Ներդիրների շուրջ բարակ եզրեր դնելով, դրանք դրանք դնում են էջանիշների նման: Ես օգտագործել սահմանի սլաքի գույքը սահմանը չորս կողմի սահմանի վրա սահմանելու համար. 0.06em solid # 000; Այնուհետեւ օգտագործվեց սահմանի ներքեւի գույքը, որպեսզի այն վերացվի ներքեւից: border-bottom: 0;
Այնուհետեւ ես որոշ փոփոխություններ կատարեցի տառատեսակների, գույնի եւ ներդիրների ֆոնի գույնի վրա: Սահմանեք դրանք դեպի ձեր կայքի համապատասխան ոճերը: font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; գույնը `# 000; background-color: #ccc;
Վերոնշյալ ոճերի բոլորը պետք է գնան ընտրության մեջ: Խնդիրն այն է, որ կանոնն ազդում է խարիսխների պիտակների վրա: Այնուհետեւ ներդիրները ավելի հասանելի դարձնելու համար դուք պետք է մի քանի պետական կանոն ավելացնեք:
Ինձ դուր է գալիս փոխել տեքստի գույնը եւ ֆոնայինը, երբ մկնիկը մկնիկը դնի: ֆոնային: # 3cf; գույնը `#fff;
Եվ ես եւս մեկ հիշեցում էի բրաուզերներին, որ ես ուզում եմ, որ հղումը մնում է չբավարարված: տեքստերի ձեւավորում `ոչ; Մեկ այլ ընդհանուր մեթոդ է, երբ նշվում է ներքեւի մասում, երբ մկնիկը նետում է: Եթե ցանկանում եք դա անել, փոխեք այն տեքստի ձեւավորմանը, ընդգծեք.
Բայց որտեղ է CSS 3- ը:
Եթե դուք ուշադրություն դարձնեք, երեւի նկատեցիք, որ ոճի թերթիկում որեւէ CSS3 ոճ չի եղել: Սա ամենատարածված բրաուզերում, ներառյալ Internet Explorer- ում աշխատելու առավելություն ունի: Բայց դա չի ստեղծում նրբաթիթեղները ոչ ավելի, քան քառակուսի արկղերը: Adding CSS 3 style call border-radius (եւ դրա հետ կապված զննարկիչի կոնկրետ զանգեր) դուք կարող եք կլորացվում եզրեր, որպեսզի ավելի շատ նմանեք մանիլա թղթապանակի էջանիշերը:
Ոճը դուք պետք է ավելացնեք .tablist li- ի կանոնը հետեւյալն է `-webkit-border-top-right-radius: 0.50em; -հրամանատար-սահմանային-վերին-ձախ radius: 0.50em; -մազ-եզրագիծը-ռադիում-վերմակ: 0.50հ; -մոզ-եզրագիծ-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Սրանք իմ վերջին ոճի կանոններն են, որոնք ես գրել եմ.
.հրապարակային ցուցադրություն {display: block; padding: 0 1em; տեքստերի ձեւավորում `ոչ; սահմանը `0.06 գ կոշտ # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; գույնը `# 000; background-color: #ccc; / * CSS 3 տարրեր * / webkit-border-top-right-radius: 0.50em; -հրամանատար-սահմանային-վերին-ձախ radius: 0.50em; -մազ-եզրագիծը-ռադիում-վերմակ: 0.50հ; -մոզ-եզրագիծ-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; գույնը `#fff; տեքստերի ձեւավորում `ոչ; }Այս ոճերով դուք ունեք էջանշված մենյու, որը աշխատում է բոլոր խոշոր բրաուզերում եւ կարծես CSS- ի 3-ի համապատասխան բրաուզերներում գեղեցիկ տպագիր էջանիշեր: Հաջորդ էջը Ձեզ հնարավորություն է տալիս եւս մեկ տարբերակ, որը կարող եք օգտագործել այն ավելի հագցնել:
06-ից 06-ը
Ներկառուցված ներդիրը
HTML- ում իմ ստեղծածում UL- ն ունեցել էր մեկ ցուցակի տարր, ID- ով: Սա թույլ է տալիս Ձեզ մեկ LI- ի տարբեր ոճը մնացածից: Ամենատարածված իրավիճակն այն է, որ ներկայիս ներդիրը որոշակի ձեւով առանձնանա: Սրա մասին մտածելու մեկ այլ ձեւ է այն, որ դուք ցանկանում եք մոխրացնել այն ներդիրները, որոնք ապրում են: Այնուհետեւ փոխեք այն, որտեղ ID- ն տարբեր էջերում է:
Ես ոճում եմ եւ # միաժամանակ A պիտակը, ինչպես նաեւ # ժամը A: hover sta, այնպես որ երկուսն էլ մի փոքր տարբեր են: Դուք կարող եք փոխել գույնը, ֆոնի գույնը, նույնիսկ այդ տարրի բարձրությունը, լայնությունը եւ լիցքավորումը: Կատարեք ցանկացած փոփոխություն ձեր նախագծման մեջ:
.tablist li # ընթացիկ {background-color: # 777; գույնը `#fff; } .tablist li # ընթացիկ ա: hover {background: # 39C; }Եվ դու արել ես: Դուք պարզապես ստեղծել եք էջանշված մենյու Ձեր կայքի համար: