Dreamweaver-da pastga tushadigan qutini qanday qo'shish mumkin

Ushbu tumomentogeek.com sizga veb-sahifada ochiladigan qutini yaratish uchun Adobe Dreamweaver-dan qanday foydalanishni sizga o'rgatadi. Ochiladigan oynalar - veb-sahifangizdagi biror narsa bosilganda "pastga tushadigan" menyu, bu jarayonda qo'shimcha imkoniyatlarni taqdim etadi.
Dreamweaver loyihasini oching. Buning uchun loyiha faylini ikki marta bosing. Agar siz yangi Dreamweaver loyihasini yaratmoqchi bo'lsangiz, o'rniga Dreamweaver dasturini ochasiz, cherting Fayl , ni bosing Yangi , va ekrandagi barcha ko'rsatmalarga amal qiling.
Buyurtma qilingan ro'yxat yarating. Ochiladigan menyuni yaratish uchun sizda kamida bitta o'q nuqtasi bo'lishi kerak. Siz CSS-ni o'chirib o'q nuqtasini yaratishingiz mumkin (ni bosing Ko'rinish menyu punktini tanlang Uslubni namoyish qilish , va ni bosing Displey uslublari agar u belgilansa), siz qo'shmoqchi bo'lgan joyni bosing, oynaning pastki qismidagi o'q nuqtasi belgisini bosing va nuqta nomini yozing. Davom etishdan oldin CSS-ni yoqishingiz kerak.
  • Bu erda nuqta nomi sizning ochiladigan menyuning faollashtiruvchisi bo'lib xizmat qiladi (masalan, ochiladigan menyuni ochish uchun ushlab turadigan tugma).
  • Agar siz ochiladigan menyuga aylantirmoqchi bo'lgan ro'yxat elementi bo'lsa, ushbu qadamni o'tkazib yuboring.
Ro'yxatingizning nomini aniqlang. Ni bosing Kod yorlig'ini tanlang va yoningizda ekanligingizga ishonch hosil qiling Manba kodi sozlang, so'ngra buyurtma qilingan ro'yxat kodini pastga siljiting (u "o'rtasida" bo'ladi) "yorliq va" "teg) va" ni qidiring "yuqoridan yuqorida yorliq" "teg. Qo'shtirnoq ichidagi so'z sizning ro'yxatingizning nomi. [1]
  • Agar siz ismni ko'rmasangiz, tegni joylashtiring (bu erda ism ro'yxatning tanlangan nomiga tegishli) to'g'ridan-to'g'ri yuqorida teg.
O'q nuqtasini olib tashlang. Sizni to'g'ri joyda ekanligingizga ishonch hosil qiling Dizayn yorlig'ini va so'ngra ni bosing CSS Dizayneri oynaning yuqori o'ng burchagidagi yorlig'ini tanlang, so'ngra quyidagilarni bajaring:
  • "Selectors" sarlavhasining o'ng tomonidagi + ni bosing.
  • "Name" sizning ro'yxatingizning nomi bo'lgan "#name ul" kodini kiriting.
  • ↵ Enter ni ikki marta bosing.
  • CSS Dizayner yorlig'ining pastki qismidagi pastga o'ting va list tarzidagi turini bosing.
  • Olingan qalqib chiqadigan menyuda hech birini bosing.
Gorizontal ravishda ko'rsatish uchun buyurtma qilingan ro'yxatni o'zgartiring. Buning uchun:
  • "Selectors" sarlavhasining o'ng tomonidagi + ni bosing.
  • "Name" bu sizning ro'yxatingizning nomi.
  • CSS Designer yorlig'ining pastki qismidagi "float" sarlavhasini toping.
  • Darhol "float" sarlavhasining o'ng tomonidagi chap tugmachani bosing.
Ro'yxatingizga faol yorliq qo'shing. Ni bosing + "Selectors" tugmachasining o'ng tomonidagi tugmachani bosib, kiriting (bu erda "nom" - sizning ro'yxatingizning nomi) va ni bosing ikki marta.
Orqa fon rangini qo'shing. Ni tanlang # ism a agar kerak bo'lsa, elementni tanlang, so'ng yuqorisidagi qutidagi shaklidagi "Fon rangi" yorlig'ini bosing CSS Dizayneri panelini tanlang, fon rangi ni tanlang va foydalanish uchun fon rangini tanlang.
  • Bu sizning ochiladigan ro'yxatingiz foydalanadigan rang.
Ro'yxat elementlaringizni "blok" formatidan foydalaning. Ushbu format, kimdir ro'yxatdagi biror narsaga chertish yoki tegmoqchi bo'lganida, uni aniq matnni tanlash o'rniga uni yuqoridan yoki pastdan tanlash orqali ochib qo'yishini ta'minlaydi:
  • CSS Designer ilovasida sizning # ismingiz tanlanganiga ishonch hosil qiling.
  • Paneldagi "displey" sarlavhasiga pastga aylantiring.
  • "Displey" sarlavhasining o'ng tomonini bosing, so'ng paydo bo'lgan menyuda blokni bosing.
Agar kerak bo'lsa, padding qo'shing. Agar siz ro'yxatdagi narsalar bir-biriga teskari bo'lib qolganini ko'rsangiz, quyidagilarga amal qilib, ular orasida bo'sh joy qoldirishingiz mumkin:
  • CSS Designer ilovasida sizning # ismingiz tanlanganiga ishonch hosil qiling.
  • Paneldagi "padding" sarlavhasiga pastga aylantiring.
  • Yuqori va pastki "px" matn maydonlarini kamida 5 ta o'qish uchun o'zgartiring.
  • Chap va o'ng "px" matn maydonlarini kamida 10 ta o'qish uchun o'zgartiring.
Hover rangini yarating. Bu ochiladigan menyuda sichqoncha kursorini ochganingizda paydo bo'ladigan rang:
  • "Selectors" sarlavhasining o'ng tomonidagi + ni bosing.
  • #Nave a: hover-ni kiriting (bu erda "nom" - sizning ro'yxatingizning nomi) va ↵ Enter ni ikki marta bosing.
  • "Orqa fon rangi" yorlig'ini bosing.
  • Fon rangini tanlang, so'ngra fon rangi uchun ishlatilganidan engilroq rangni tanlang.
CSS-ni o'chirib qo'ying. Ni bosing Ko'rinish menyu punktini tanlang Uslubni namoyish qilish , va ni bosing Displey uslublari qalqib chiquvchi oynada variantni tanlang.
  • Agar "Ko'rsatish uslublari" varianti och bo'lsa, Dreamweaver hujjatining istalgan joyiga cherting va qaytadan urining.
Ochiladigan menyu tarkibini yarating. Buni ochiladigan menyu tugmachasi sifatida ishlatmoqchi bo'lgan o'q nuqtasi ostidagi kichik bandlarni qo'shish orqali qilishingiz mumkin.
  • Ochiladigan menyuga aylantirmoqchi bo'lgan ro'yxat elementining o'ng tomoniga bosing va keyin ↵ Enter ni bosing.
  • Tab ↹ ni bosing.
  • Birinchi ochiladigan menyu elementingiz nomini kiriting, so'ng ↵ Enter ni bosing.
  • Keyingi ochiladigan menyu nomini kiriting, so'ng ↵ Enter ni bosing va kerak bo'lganda takrorlang.
Ochiladigan menyu tarkibini o'q elementiga bog'lab qo'ying. Buning uchun:
  • "Selectors" yonidagi + tugmachasini bosing, keyin #name ul ul deb yozing va ↵ Enter ni ikki marta bosing.
  • Pastga aylantiring va ekranni bosing, so'ngra qalqib chiquvchi menyuda hech birini bosing.
  • Pozitsiyani toping va ustiga bosing, so'ngra qalqib chiqadigan menyuda mutloqni bosing.
Ochiladigan menyuni o'zi yarating. Buning uchun yana bitta selektor qo'shish kerak bo'ladi.
  • "Selectors" yonidagi + tugmachasini bosing, so'ngra #name ul li: hover> ul deb yozing va ↵ Enter ni ikki marta bosing.
  • Displeyni toping va ustiga bosing, so'ng paydo bo'lgan qalqib chiqadigan menyuda blokni bosing.
Ochiladigan menyu tarkibini vertikal ravishda ko'rsatish. Odatiy bo'lib, ochiladigan menyu tarkiblari gorizontal barda ko'rsatiladi, ammo siz ularni quyidagilar orqali vertikal ustunga majburlashingiz mumkin:
  • "Selectors" yonidagi + tugmachasini bosing, keyin #name ul ul li yozing va ↵ Enter ni ikki marta bosing.
  • "Float" sarlavhasini toping.
  • "Float" sarlavhasining o'ng tomonidagi "yo'q" (\) variantni bosing.
Loyihangizni saqlang. Matbuot (Windows) yoki (Mac) buni amalga oshirish uchun.
  • Agar siz ushbu loyiha uchun yangi Dreamweaver faylini yaratgan bo'lsangiz, ismingizni kiritishingiz, saqlash joyini tanlashingiz va faylingizni saqlash uchun Saqlash tugmachasini bosishingiz kerak.
Agar Dreamweaver-ning interfeysi juda murakkab bo'lsa, siz har doim qilishingiz mumkin ochiladigan menyuni yaratish uchun matn muharriridan foydalaning . Siz hatto o'zingizning loyihangizga ochiladigan oynani qo'shish uchun o'z veb-saytingiz kodini Dreamweaver-dan nusxa ko'chirishingiz va matn hujjatiga qo'yishingiz mumkin.
Ehtimol, Dreamweaver ochiladigan menyusini to'g'ri namoyish qilish uchun veb-saytingiz formatini moslashtirishingiz kerak (masalan, ochiladigan menyu elementlari shriftining hajmi).
tumomentogeek.com © 2020