HTML va CSS tillarida ochiladigan menyularni yaratish

Muallif: Lewis Jackson
Yaratilish Sanasi: 13 Mayl 2021
Yangilanish Sanasi: 1 Iyul 2024
Anonim
HTML va CSS tillarida ochiladigan menyularni yaratish - Maslahatlar
HTML va CSS tillarida ochiladigan menyularni yaratish - Maslahatlar

Tarkib

Ushbu wikiHow sizga HTML va CSS kodlari yordamida veb-saytingizda ochiladigan menyularni yaratishni o'rgatadi. Mehmon sichqonchani ko'rsatgichini belgilangan tugma ustiga olib borganda ochiladigan menyu paydo bo'ladi; Keyin ular ushbu parametr veb-saytiga o'tish uchun elementlardan birini bosishlari mumkin.

Qadamlar

  1. HTML matn muharririni oching. Siz oddiy matn muharriri (Notepad, TextEdit) yoki yanada takomillashtirilgan (Notepad ++) dan foydalanishingiz mumkin.
    • Notepad ++ ga o'tishga qaror qilsangiz, tanlashingiz kerak HTML menyuning "H" qismidan Til Davom etishdan oldin oynaning yuqori qismida (til).

  2. Hujjat uchun sarlavha kiriting. Hujjatning qolgan qismida ishlatilishi kerak bo'lgan kod turini belgilaydigan kod:
  3. Ochiladigan menyu yarating. Ochilgan menyuning o'lchamini va rangini ko'rsatish uchun quyidagi kodni kiriting, "#" ni ishlatmoqchi bo'lgan parametr bilan almashtirishni unutmang (son qancha ko'p bo'lsa, ochiladigan menyu shunchalik katta bo'ladi). Shuningdek, biz "fon-rang" fon rangini va "rang" rangini kerakli rang (yoki HTML rang kodi) bilan almashtirishimiz mumkin:

  4. Ochilgan menyuda havolalarni almashtirishni xohlayotganingizni ko'rsating. Keyin menyuga havolalarni qo'shganingiz uchun ularni ochiladigan menyuda quyidagi kodni kiritishingiz mumkin:
  5. Ochilgan menyu ko'rinishini yaratadi. Quyidagi kod veb-sahifadagi boshqa elementlar bilan birlashtirilgan holatni o'z ichiga olgan ochiladigan menyuning o'lchamini va rangini belgilaydi. "Min-width" bo'limidagi "#" raqamini kerakli raqam bilan almashtirishni unutmang (masalan, 250) va "background-color" (fon rangi) sarlavhasini ma'lum rangga yoki HTML kodga o'zgartiring:

  6. Ochilgan menyu tarkibiga tafsilotlarni qo'shing. Quyidagi kod ichidagi matn rangini va ochiladigan menyu tugmachasining hajmini aniqlaydi. "#" Ni menyu tugmachasining o'lchamini belgilaydigan piksellar soniga almashtirishni unutmang:
  7. Sichqoncha ko'rsatgichi ochiladigan menyuga qo'yilganda qanday o'zgarishini tahrir qiladi. Sichqoncha ko'rsatgichini menyu tugmachasi ustiga qo'yganda ba'zi ranglarni o'zgartirish kerak. "Fon-rang" chizig'i ochiladigan menyuda biror narsani tanlaganingizda o'zgargan rangni aks ettiradi, ikkinchi "fon-rang" menyu tugmachasi o'zgaradigan rangdir. Ideal holda, ushbu ikkala rang ham tanlanmagan paytdan ko'ra engilroq bo'lishi kerak:
  8. CSS bo'limini yoping. Hujjatning CSS qismi bilan ishingiz tugaganligini ko'rsatish uchun quyidagi kodni kiriting:
  9. Menyu tugmachasi uchun nom yarating. Quyidagi kodni kiriting, lekin "Ism" ni ochiladigan menyu tugmasi nomi bilan almashtirishni unutmang (masalan: Menyu):
  10. Menyuga havolalar qo'shing. Ochilgan menyudagi har bir narsa, mavjud veb-saytdagi sahifa yoki tashqi veb-sayt bo'lsin, biron bir narsaga bog'lanadi. O'zingizning tanlovingizni quyidagi kodni kiritib, ochiladigan menyuga qo'shing https://www.website.com havola manzili bilan (qavslarni saqlang) va "Ism" ni havola nomi bilan almashtiring.
  11. Hujjatni yopish. Hujjatni yopish uchun quyidagi teglarni kiriting va ochiladigan menyu kodining oxirini ko'rsating:
  12. Ko'rib chiqish kodi ochiladigan menyuni belgilaydi. Parcha quyidagicha ko'rinadi: Reklama

Maslahat

  • Veb-saytga joylashtirishdan oldin har doim kodni ko'rib chiqing.
  • Yuqoridagi ko'rsatmalar sichqonchani ko'rsatgichini menyu tugmachasi ustiga qo'yganda ishlaydigan ochiladigan menyular uchun mo'ljallangan. Agar siz faqat chertganingizda chertadigan ochiladigan menyu yaratmoqchi bo'lsangiz, unda JavaScript-dan foydalanishingiz kerak.

Ogohlantirish

  • HTML ranglari "qora" yoki "yashil" kabi teglardan foydalanganda juda cheklangan. Siz foydalanuvchilarga maxsus ranglarni yaratish va ulardan foydalanish imkoniyatini beradigan HTML rang kodlari generatorini tekshirishingiz mumkin.