Ჰორიზონტალური მენიუ საიტი თავს

ჰორიზონტალური მენიუ თითქმის ნებისმიერი საიტი - ეს არის მნიშვნელოვანი ნაწილი, როგორც მას შეუძლია თავისი გარეგნობის და გამოყენებადობა მოზიდვა ან, პირიქით, შეშინება სია. ვისწავლოთ თუ როგორ უნდა შექმნათ ელემენტარული ჰორიზონტალური მენიუ: მას "ჩონჩხი" HTML, დაეუფლონ ძირითადი უნარების შექმნა. თქვენ არ შეგიძლიათ რა თქმა უნდა მოვძებნოთ მზად მენიუ, მაგრამ ბევრად უფრო ლამაზი უნდა ვისწავლოთ თუ როგორ უნდა განვითარდეს იგი საკუთარ თავს. ეს არის საკმაოდ სახალისო.

ვისწავლოთ რათა მენიუ

ჩვენ ვცდილობთ არ გადაგვიხვევია სემანტიკა, რაც ვიცავთ წამყვანი ფიგურა განლაგებას. პირველი თქვენ უნდა მიიღოს "ჩონჩხი" ჩვენი მენიუები HTML, ვისწავლოთ ძირითადი უნარ-ჩვევები, რათა საკუთარი ჰორიზონტალური მენიუები. და მაშინ ეს იქნება დაამშვენებს გამოყენებით სტილების. მოდით ჩვენი ჰორიზონტალური მენიუ შეიცავს 5 საკითხი. პირველი პუნქტი უნდა გადამისამართება მთავარ გვერდზე. მეორე ეტაპზე - "ჩვენს შესახებ". მესამე - "ჩვენი ჯილდოები". მეოთხე - "ეს არის fun." მეხუთე - "კონტაქტი".

HTML კოდი ასე გამოიყურება:

ვინ არ იცის: ul tag გამოიყენება ტყვია, მისი ელემენტების დაიწყოს li. Li tags მემკვიდრეობით სტილის, რომლებიც მიმართა ul.

Ul - ბლოკი ელემენტის სიაში, ეს იქნება გადაჭიმული სიგანე. Li ასევე ბლოკი.

ასე რომ, შექმნა index.html. ჩვენ ვაგროვებთ ჩვენი კოდი. ამ ეტაპზე, ბრაუზერი აჩვენებს ვერტიკალური ვიდრე ჰორიზონტალური მენიუ. მაგრამ ჩვენ თქვენთან ერთად მიზანი - რათა ჰორიზონტალური მენიუ საიტზე. ამისათვის ჩვენ გვჭირდება CSS.

რა არის CSS?

თუ თქვენ ჯერ დაეუფლონ განვითარების საიტები, აუცილებელია გაეცნოს კონცეფცია კასკადური სტილების. ფაქტობრივად, ამ წესების გაფორმებით, დამუშავება, რომლებიც გამოიყენება სხვადასხვა ელემენტების გვერდებზე ვებ-გვერდზე. თუ ჩვენ აღწერს თვისებები ელემენტების სტანდარტული HTML, თქვენ უნდა გავიმეოროთ რამდენჯერმე, თქვენ დუბლირებას ერთი და იგივე კოდი. გვერდი დატვირთვის დროს მომხმარებლის კომპიუტერში გაიზრდება. ამის თავიდან ასაცილებლად, არ არის CSS. საკმარისია აღწერს მხოლოდ ერთხელ გარკვეული ელემენტი და შემდეგ უბრალოდ მიუთითოს სად გამოიყენოს თვისებები კონკრეტული სტილის. არ არის გამორიცხული, რათა აღწერა არა მხოლოდ ტექსტის გვერდზე თავად, არამედ სხვა ფაილი. ეს საშუალებას მიმართოს აღწერა სხვადასხვა სტილის ყველა გვერდებზე საიტზე. ეს არის ასევე მოსახერხებელი ცვლილებები ზოგიერთი გვერდები, შეცვლის CSS ფაილი. სტილების საშუალებას გაძლევთ მუშაობა fonts უკეთესი დონეზე, ვიდრე HTML, ეხმარება, რათა თავიდან ავიცილოთ გაუარესების გრაფიკა ვებგვერდზე.

გამოყენება სტილების მენიუში განვითარების

CSS-კოდი მენიუ:

1. # My_1menu {სია სტილის: არცერთი; padding: 6; width: 800px; ზღვარი: auto;}
2. # My_1menu li {float: მარცხენა; font: italic 18px Arial;}
3. # My_1menu {color: # 756; ჩვენება: ბლოკი; სიმაღლე: 55px; ხაზის სიმაღლე: 55px; padding: 0px 15px 0px 15px; background: #dfc; ტექსტის გაფორმება: არცერთი;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

ახლა მოდით შევხედოთ შედეგად ჰორიზონტალური CSS მენიუ.

# My_1menu - ასე არ არის სტილი დავალება UL- ელემენტს id = my_1menu, სია სტილის: none - ეს ბრძანება ამოიღონ ნიშნები მიერ დატოვებული დაგეგმილი საკითხი.

width: 800px - სიგანე მენიუდან 800 pixels.

padding: 0 - ეს ხსნის padding შიგნით.

ზღვარი: auto - vyravnivnie ჰორიზონტალური მენიუ ცენტრში ჩვენი გვერდი.

# My_1menu li - მინიჭების სტილის li-ელემენტებს.

სიმაღლე: 55px - მენიუ სიმაღლე.

# My_1menu a: hover - მინიჭების სტილის ელემენტს და როდესაც ეს გამოწვეული მაუსი.

ჩვენ არ აღწერს დეტალურად ყველა ხაზი, რადგან ყველა დეველოპერი შეგიძლიათ მიუთითოთ მისი პარამეტრების აქ. ეს საფუძველი გამოყენების სტილის მენიუს ნახვა. თქვენ შეგიძლიათ მისცეს მას უფრო მზა და ლამაზი გარეგნობის, გამოყენებით სურათები. მიანიჭეთ ელემენტს, მაგრამ, მაგალითად, background: url (img1.png) ვიმეორებ-x. დაე იყოს background: url (img2.png) ვიმეორებ-x ამისთვის: hover.

გამოიყენეთ თქვენი წარმოსახვის, შემოქმედებითი შეღავათებით. შემდეგ ეფუძნება, რომ ცოდნა, თუ როგორ უნდა შექმნათ მარტივი მენიუს ნახვა, შეგიძლიათ განავითაროს გვერდი თავისი საკუთარი უნიკალური დიზაინი.