Sayt o'zingiz uchun gorizontal menyu qilish

Gorizontal menyu deyarli har qanday sayt bor - u jalb yoki, aksincha, mehmonlarga yuz qo'rqitish uchun uning ko'rinishi va mavjudligini mumkin kabi, muhim bir qismi hisoblanadi. ning boshlang'ich gorizontal menyu yaratish uchun, qanday qilib bilib olaylik: yaratish asosiy ko'nikmalarini egallash, HTML uchun u "skeleti" qilish. Siz, albatta, bir tayyor menyusi topishingiz mumkin, lekin juda yaxshi, uni o'zingiz rivojlantirish o'rganish. Bu go'zal qiziqarli bo'ldi.

Menyuni qilishni o'rganish

Biz tuzumining etakchi namoyandalari amal semantik, chetlashgan harakat. Birinchidan, siz HTML bizning menyuda uchun "skeleti" qilish o'z gorizontal menyularga qilish asosiy ko'nikmalar o'rganish kerak. Va keyin u uslublar jadvallarini foydalanib, bezatadi. Bizning gorizontal menyu 5 ma'lumotlar mavjud bo'lsin. birinchi element saytiga kirasiz. Ikkinchi nuqta - "Biz haqimizda". uchinchi - "Bizning mukofot". To'rtinchidan - "Bu qiziqarli bo'ldi." Beshinchi - "Biz bilan bog'laning".

HTML-kod bu kabi ko'rinadi:

bilmaydi kim: ul yorlig'i uchun ishlatiladi o'q, uning elementlari li bilan boshlanadi. Li teglar ul qo'llaniladi tarzini meros.

Ul - ro'yxatini blok element, u kengligi cho'zdi bo'ladi. Li, shuningdek, bir blok bo'ladi.

Shunday qilib, bir index.html yaratish. Biz kodni to'plash. Bu nuqtada, brauzer o'rniga gorizontal menyu ortiq vertikal ko'rsatadi. Lekin siz gol bilan biz - sayt uchun gorizontal menyu qilish uchun. Buning uchun biz CSS kerak.

CSS nima?

Agar saytlar rivojlanishiga egallash hali bor bo'lsa, u Cascading Style Sheets tushunchasi bilan tanishish zarur. Aslida, bu veb-sayt sahifalarida turli elementlar qo'llaniladi formatlash, qayta ishlash uchun qoidalar bor. Biz standart HTML elementlarning xususiyatlarini tasvirlab bo'lsangiz, siz kod xil qismlarga bir takrorlanishini olish, bu bir necha marta takrorlash kerak bo'ladi. foydalanuvchining kompyuterda sahifa yuk vaqt o'sadi. Buni oldini olish uchun, bir CSS bor. Bu faqat bir marta muayyan elementi tasvirlash uchun kifoya, keyin oddiygina qaerda muayyan uslub xususiyatlarini foydalanish ko'rsatadi. Bu sahifada o'zi matni, balki boshqa faylda nafaqat tavsifi qilish mumkin. Bu sayt barcha sahifalarida turli uslublari tavsifi qo'llash imkonini beradi. Bu CSS-fayl o'zgartirish, ba'zi sahifalarni o'zgartirish uchun ham qulay hisoblanadi. Style barg siz sayt grafik sahifalarini yomonlashuviga oldini olish uchun yordam, HTML ko'ra yaxshiroq darajada shriftlar bilan ishlash imkonini beradi.

menyu rivojlantirish uchun uslublar sahifalar orqali

menyusida uchun CSS-kod:

1. # My_1menu {ro'yxati-style: none; padding: 6; width: 800 x; margin: auto;}
2. # My_1menu li {float: chapga; Shriftning: kursiv 18px Arial;}
3. # My_1menu bir {color: # 756; ko'rsatish: Blok; balandligi: 55px; Moddama-balandligi: 55px; padding: 0px 15px 0px 15px; fon: #dfc; text-decoration: none;}
4. # My_1menu a: hover {rangi: #foa; background: # 788;}

Endi natijasida gorizontal CSS menyusida qaraylik.

- rejalashtirilgan ob'ektlar qoldirgan izlar olib tashlash uchun ushbu buyruq hech: - # My_1menu shunday id = my_1menu, ro'yxat-uslubi bilan ul element uchun uslubi tayinlash bor.

width: 800 x - bizning menyusida kengligi 800 piksel bo'lgan.

padding: 0 - bu ichida to'lg'azish olib tashlanadi.

margin: auto - bizning sahifada markazida gorizontal menyusi vyravnivnie.

# My_1menu li - uslublar li-elementlar tayinlash.

balandligi: 55px - menyu balandligi.

# My_1menu a: hover - element uchun jihozlardan tayinlash va uni paydo bo'ladi sichqoncha.

har dasturchi bu yerda uning parametrlarini tanlashingiz mumkin, biz, batafsil har chizig'ini tasvirlab bo'lmaydi. veb-saytida menyusida tarzini foydalanish uchun, bu asos. Siz suratga foydalanib, yana bir to'liq va chiroyli ko'rinish berish mumkin. misol, fon uchun, elementi belgilash lekin: url (img1.png) takrorlash-x. takror-X a uchun url (img2.png): hover fon bo'lsin.

Sizning tasavvur, ijodiy afzalliklariga foydalaning. So'ngra veb-saytida oddiy menyusi yaratish uchun qanday ekanini bilim asosida, siz o'ziga xos dizayni bilan bir sahifa rivojlantirish mumkin.