Դարձնել մի հորիզոնական մենյուն համար կայքը ինքներդ

Հորիզոնական մենյու գրեթե ցանկացած կայքը - դա կարեւոր մասն է, քանի որ այն կարող է իր տեսքը եւ հարմարավետություն ներգրավելու կամ, ընդհակառակը, վախեցնել հեռու այցելուներին: Եկեք սովորենք, թե ինչպես պետք է ստեղծել տարրական հորիզոնական մենյուի դարձնել այն «կմախքն» է HTML, Վարպետի հիմնական հմտությունները ստեղծել. Դուք կարող եք, անշուշտ, գտնել մի պատրաստի մենյուն, սակայն շատ nicer է սովորել, թե ինչպես պետք է զարգացնել ինքներդ. Դա բավականին զվարճալի.

Սովորեք կատարել մենյուն

Մենք փորձում ենք շեղվել իմաստաբանություն, որոնք կիսում են առաջատար գործիչների դիրքով: Առաջին, դուք պետք է կատարել մի «կմախքի» մեր մենյուների դեպի HTML, սովորել հիմնական հմտություններ, որպեսզի իրենց հորիզոնական ընտրացանկերում: Եւ ապա այն զարդարում, օգտագործելով ոճը թերթերով: Թող մեր հորիզոնական մենյու պարունակում է 5 կետերը: Առաջին տարրը պետք է Վերահղված է էջին. Երկրորդ կետը `« Մեր մասին ». Երրորդ - «Մեր պարգեւներ»: Չորրորդ - «Դա զվարճալի». Հինգերորդ «Հետադարձ կապ»:

HTML կոդ կարծես այս խմբին:

Ով չգիտի, որ: ուլ թեգը համար օգտագործվում է գնդակից, դրա տարրերը սկսվում են li: Li հատկորոշիչները ժառանգելու ոճերի, որոնք կիրառվում են ul.

Ul - թաղամաս տարր է ցուցակում, այն կարող է ձգվել դեպի լայնությամբ: Li է նաեւ թաղամաս:

Այնպես որ, ստեղծել index.html: Մենք հավաքել ենք մեր կոդ: Այս պահին, որ բրաուզերը ցուցադրում է ուղղահայաց, այլ ոչ թե հորիզոնական մենյու. Բայց մենք ձեզ հետ նպատակ է կատարել հորիզոնական մենյուն համար կայքը: Դրա համար մենք պետք է CSS.

Թե ինչ է CSS- ը:

Եթե դուք դեռ պետք է տիրապետեն զարգացմանը կայքերի, դա անհրաժեշտ է ծանոթանալ հայեցակարգին Cascading Style թերթ: Ի դեպ, սրանք այն կանոնները չափագրումի վերամշակման, որոնք կիրառվում են տարբեր տարրերի վրա էջերում վեբ-կայքում: Եթե մենք նկարագրել հատկությունների տարրերի ստանդարտ HTML, դուք պետք է կրկնել մի քանի անգամ, դուք ստանում եք մի կրկնությունից նույն կտոր օրենսգրքի: էջ բեռնվածության ժամանակ վրա օգտագործողի համակարգչում կաճի: Խուսափել այդ, կա մի CSS. Բավական է նկարագրել միայն մեկ անգամ է որոշակի տարր, եւ ապա պարզապես ցույց են տալիս, թե որտեղ պետք է օգտագործել հատկությունների որոշակի ոճով. Դա հնարավոր է, որպեսզի նկարագրությունը ոչ միայն տեքստի էջի մեջ, այլեւ մեկ այլ ֆայլ. Դա հնարավորություն կտա կիրառել նկարագրությունը տարբեր ոճերի բոլոր էջերում կայքում. Դա նաեւ հարմար է փոփոխել որոշ էջեր, փոփոխելով CSS ֆայլը. Style թերթ թույլ է տալիս Ձեզ աշխատել տառատեսակների ավելի պատշաճ մակարդակով, քան HTML, որն օգնում է խուսափել վատթարացումը պատկերները էջերը կայքում.

Օգտագործելով Style Sheets մենյու զարգացման

CSS-կոդը համար ընտրացանկում:

1. # My_1menu {ցուցակը ոճով: none; լիցք: 6; լայնությունը: 800px; margin: auto;}
2. # My_1menu li {բոց: Ձախ, տառատեսակ շեղատառ 18px Arial;}
3. # My_1menu մի {color: # 756; Ցուցադրել: թաղամաս; բարձրություն: 55px; գիծը բարձրությունը: 55px; լիցք: 0px 15px 0px 15px; ֆոնի վրա: #dfc; text-decoration: none;}
4. # My_1menu ա: Հովեր {գույն: #foa; ֆոն: # 788;}

Այժմ եկեք նայում արդյունքում հորիզոնական CSS մենյու.

# My_1menu, այնպես որ ոճը հանձնարարությունը UL- տարր հետ id = my_1menu, ցուցակ ոճը: none - սա հրաման է հանել հետքեր են նախանշված ապրանքների.

լայնությունը: 800px - ի լայնությունը մեր ցանկի 800 պիքսել.

լիցք: 0 - այս հեռացնում լիցք ներսում:

մարժա: ավտո - vyravnivnie հորիզոնական մենյու կենտրոնում մեր էջում.

# My_1menu li - հանձնարարելով ոճեր Li-տարրեր:

բարձրությունը: 55px - մենյու բարձրությունը.

# My_1menu մի: Հովեր - հանձնարարելով ոճեր է տարր, եւ երբ այն induced մուկ.

Մենք չենք նկարագրել է մանրամասնորեն ամեն գիծը, քանի որ ամեն մի ծրագրավորողը կարող է հստակեցնի իր պարամետրերը այստեղ: Այդ հիմքը օգտագործման համար ոճերի ցանկի կայքում: Դուք կարող եք տալ այն ավելի ավարտվել է եւ գեղեցիկ տեսքը, օգտագործելով նկարները: Վերագր տարր բայց, օրինակ, ֆոնային: URL (img1.png) կրկնել-X. Եղիցի ֆոն: URL (img2.png) կրկնել-X համար: Հովեր.

Օգտագործեք ձեր երեւակայությունը, ստեղծագործական նախասիրությունները: Ապա դրա հիման վրա այդ գիտելիքի, թե ինչպես պետք է ստեղծել մի պարզ մենյուն կայքում, դուք կարող եք զարգացնել էջը իր ուրույն դիզայնով: