HTML teglaridan foydalanib, siz o'qlari bo'lgan ikki turdagi ro'yxatlarni yaratishingiz mumkin: raqamlangan va markirovka qilingan. Odatiy bo'lib, ko'pchilik brauzerlar markirovka qilingan ro'yxat belgilarini doira shaklida va raqamlangan ro'yxat belgilarini tartib bilan ko'rsatadi. CSS standart markerlarning ko'rinishini o'zgartirish imkoniyatini beradi. Keyinchalik, biz har xil turdagi markerlar bilan misollarni ko'rsatamiz, ularning yordami bilan siz ro'yxatlaringizning ko'rinishini o'zgartirishingiz mumkin.
CSS-da markerning standart ko'rinishini o'zgartirish uchun standartni almashtirmoqchi bo'lgan marker turiga o'rnatilgan list-style-type xususiyatidan foydalaning.
Raqamlangan ro'yxatlar uchun o'qlarning ayrim turlarini ko'rsatadigan misol:
CSS xususiyati:
ro'yxat uslubi turi:
Natija:
Ol#mening ro'yxatim (
ro'yxat uslubi turi: kasrli ;
}
Natijani ko'rish uchun istalgan xususiyat qiymatini bosing
Belgilangan ro'yxatlar uchun faqat uchta turdagi markerlar mavjud bo'lib, ularni doira, disk va kvadrat qiymatlari yordamida belgilash mumkin:
None qiymatidan foydalanib, siz ro'yxatdagi elementlardan markerlarni olib tashlashingiz mumkin, lekin chap chekinish hali ham saqlanib qoladi:
Agar standart markerlarning hech biri sizga mos kelmasa, CSS ularni istalgan tasvir bilan almashtirish imkoniyatini beradi, bu sizga ro'yxat uslubidagi rasm xususiyatiga yordam beradi, uning qiymatida siz tanlangan rasmga yo'lni ko'rsatishingiz kerak.
Rasm avtomatik ravishda ro'yxatga moslash uchun masshtablanmasligi va o'z o'lchamida ko'rsatilishini hisobga oling, shuning uchun siz o'lchamiga mos keladigan rasmni tanlashingiz yoki mavjudni tahrirlashingiz, uni qisqartirish yoki kattalashtirishingiz kerak bo'ladi. kerakli o'lcham:
Roʻyxat elementlaridan oʻqlarni olib tashlaganingizda, brauzerning standart chap toʻldirish hajmini ham olib tashlashingiz yoki kamaytirishingiz mumkin. To'ldirishni to'liq olib tashlash uchun siz to'ldirishni sozlash imkonini beruvchi padding-left xususiyatidan foydalanishingiz kerak bo'ladi:
Misolda, biz chap tomondagi chekinishni butunlay olib tashladik, shuning uchun ro'yxat elementlari endi brauzer oynasining chetiga mos tushadi. Va misoldan ko'rinib turibdiki, markirovka qilingan ro'yxat aniq mo'ljallangan tarzda ko'rsatiladi, ammo raqamlangan ro'yxatda markerlar yo'q. Buning sababi markerlarning o'zida - sukut bo'yicha, markerlar ro'yxat elementlari tarkibiga kirmaydi, shuning uchun agar siz chap chiziqni olib tashlasangiz, ular elementlarning mazmuni bilan birga harakat qilmaydi.
Ro'yxat uslubidagi joylashuv xususiyati o'qning ro'yxat elementlari ichida yoki tashqarisida joylashishini belgilaydi. Bu xususiyat ikkita qiymatni qabul qilishi mumkin:
Endi siz oldingi misolni qayta yozishingiz mumkin, shunda chap tomondagi chekinish olib tashlanadi, ammo markerlar brauzerning chetidan chiqmaydi:
Misolda, ro'yxat elementlarining chegaralarini vizual ravishda ko'rsatish uchun har bir ro'yxat elementiga chegara qo'shilgan.
Muloqot oynasidan foydalanish Roʻyxat Siz quyidagi markirovka qilingan roʻyxat parametrlarini oʻzgartirishingiz mumkin:
Kompyuterda o'rnatilgan shriftlardan istalgan belgiga marker belgisi.
Protrusionning o'lchami.
O'q belgisi va matn orasidagi masofa.
Hizalama.
Ushbu maqsadlar uchun siz menyuga kirishingiz kerak Format - Ro'yxat va tugmani bosing O'zgartirish, shundan so'ng dialog oynasi ochiladi Belgilangan ro'yxatni tahrirlash, shaklda keltirilgan. 4.25.
Guruch. 4.25. Dialog oynasi Belgilangan ro'yxatni tahrirlash
Quyida uning variantlari ro'yxati keltirilgan:
|
Variantlar |
Maqsad |
|
Marker belgisi |
|
|
Tanlangan belgi uchun turli shriftlar uchun variantlarni taklif qiladi |
|
|
Marker belgisi variantini tanlash imkonini beradi |
|
|
Marker pozitsiyasi |
|
|
Matnning chap chegarasiga nisbatan markerning tekislanishi va joylashishini aniqlaydi |
|
|
Matndan joylashuv |
|
|
Markerning o'ng chetidan matn boshigacha bo'lgan chekinish miqdorini o'rnatadi |
|
|
Roʻyxatga oʻzgartirish kiritilgandan keyin qanday koʻrinishini vizual baholash imkonini beradi |
|
Yorliqda raqamlangan ro'yxatlar yaratilgan Raqamlangan(4.24-rasm). Agar tavsiya etilgan raqamlangan ro'yxat formatlari ma'lum bir hujjat dizayni uchun mos bo'lmasa, tugmani bosish orqali o'zingizning ro'yxat formatingizni yaratishingiz mumkin. O'zgartirish dialog oynasida Roʻyxat tabda Raqamlangan. Bu dialog oynasini ochadi O'zgartirishraqamlanganro'yxati(4.26-rasm).
Guruch. 4.26. Dialog oynasi Raqamlangan ro'yxatni tahrirlash
Quyida ushbu dialog oynasida raqamlangan ro'yxat formatini o'zgartirish imkonini beruvchi variantlar keltirilgan.
|
Variant |
Maqsad |
|
|
Raqam formati |
||
|
Raqamlash |
Ro'yxat uchun raqam uslubini tanlaydi |
|
|
Ro'yxatdagi raqamlash qaysi raqamdan boshlanishi kerakligini belgilaydi |
||
|
Roʻyxatdagi raqamlar va raqamlardan oldin va keyin istalgan matn uchun shrift tanlash imkonini beradi Shrift yorligʻini ochadi. |
||
|
Raqam pozitsiyasi |
||
|
Hizalama |
Roʻyxatni tekislashni oʻrnatadi |
|
|
Raqamning hizalanishi va o'rnini belgilaydi |
||
|
Matn pozitsiyasi |
||
|
Raqamning o'ng chetidan matn boshigacha bo'lgan masofani o'rnatadi |
||
|
Hujjatga qo'shilishidan oldin kiritilgan barcha o'zgarishlarni ko'rish imkonini beradi |
||
Roʻyxatlarning murakkabroq turlari koʻp turdagi hujjatlarda uchraydi. Bular deyiladi ko'p darajali ro'yxatlar. Ular, shuningdek, belgilar yoki raqamlashdan, ba'zan esa ikkalasining kombinatsiyasidan foydalanadilar. Ammo ularning oldingi ro'yxat turlaridan asosiy farqi bir nechta darajalarning mavjudligidir. Darajaga qarab, har bir paragrafga belgi yoki raqam beriladi.
Guruch. 4.27. Tab Ko'p darajali dialog oynalari Roʻyxat.
Ko'p darajali ro'yxatlar oddiy ro'yxatlardan chekinishlar mavjudligi bilan farq qiladi. Bunday ro'yxatning darajasi sifatida ma'lum bir chekinish olinadi.
Ko'p darajali ro'yxatni yaratish faqat dialog oynasi yordamida mumkin Roʻyxat. Bundan tashqari, darajalarni ijrochining o'zi o'rnatib, ma'lum chegaralarni o'rnatadi. Word chekinishlarni tahlil qiladi va ularning hajmiga qarab ularni raqamlaydi, darajalarni yaratadi.
Ko'p darajali ro'yxatning turli darajalari uchun o'zgartirilgan raqamlash formatlarini yaratishingiz mumkin, lekin har bir hujjat uchun faqat bitta ko'p darajali ro'yxat formatiga ruxsat beriladi.
Ko'p darajali ro'yxatni yaratish uchun siz quyidagi amallarni bajarishingiz kerak:
1. Ro'yxat sifatida formatlanishi kerak bo'lgan hujjatning bir qismini aniqlang.
2. Tugma yordamida har bir abzas uchun chekinishlar yarating Chiziqni oshiring asboblar panelida Formatlash(siz chekinishlarni yaratishda yorliqlardan foydalana olmaysiz).
3. Tanlangan matn fragmentini tanlang.
4. Jamoani tanlang Format–Roʻyxat. Muloqot oynasida Roʻyxat yorlig'iga o'ting Ko'p darajali(4.27-rasm).
5. Taklif etilgan variantlardan ko'p darajali ro'yxatning kerakli turini tanlang. bosing KELISHDIKMI.
Microsoft Word-da ro'yxat yaratish juda oddiy va bir necha marta bosish kifoya qiladi. Bundan tashqari, dastur terayotganda faqat markerli yoki raqamlangan ro'yxat yaratishga emas, balki allaqachon terilgan matnni ro'yxatga aylantirishga ham imkon beradi.
Ushbu maqolada biz Word-da ro'yxatni qanday tuzishni batafsil ko'rib chiqamiz.
Agar siz faqat markirovka qilingan ro'yxat sifatida formatlanishi kerak bo'lgan matnni chop etishni rejalashtirmoqchi bo'lsangiz, quyidagi amallarni bajaring:
1. Kursorni ro'yxatning birinchi elementi bo'lishi kerak bo'lgan qatorning boshiga qo'ying.
2. Guruhda "Paragraf", yorliqda joylashgan "Uy", tugmasini bosing "Marklangan ro'yxat".
3. Yangi ro'yxatdagi birinchi elementni kiriting, tugmasini bosing “KIRISH”.
4. Har birining oxiriga bosish orqali keyingi barcha nuqtalarni kiriting “KIRISH”(nuqta yoki nuqta-verguldan keyin). Oxirgi elementni kiritishni tugatgandan so'ng, ikki marta bosing “KIRISH” yoki bosing “KIRISH”, undan keyin "BackSpace" oʻqlar roʻyxatini yaratish rejimidan chiqish va odatdagidek yozishni davom ettirish uchun.
Shubhasiz, kelajakdagi ro'yxatdagi har bir element alohida satrda bo'lishi kerak. Agar sizning matningiz hali qatorlarga bo'linmagan bo'lsa, buni bajaring:
1. Kursorni kelajakdagi ro'yxatning birinchi elementi bo'lishi kerak bo'lgan so'z, ibora yoki jumlaning oxiriga qo'ying.
2. bosing “KIRISH”.
3. Quyidagi barcha elementlar uchun bir xil amalni takrorlang.
4. Ro'yxat bo'lishi kerak bo'lgan matn qismini tanlang.
5. Yorliqdagi tez kirish panelida "Uy" tugmasini bosing "Marklangan ro'yxat"(guruh "Paragraf").
Belgilangan ro'yxatni emas, balki raqamlangan ro'yxatni yaratishingiz kerak bo'lsa, tugmani bosing "Raqamli ro'yxat" guruhda joylashgan "Paragraf" tabda "Uy".
Yaratilgan raqamlangan ro'yxatni chapga yoki o'ngga siljitish mumkin, shuning uchun uning "chuqurligi" (darajasi) o'zgaradi.
1. Siz yaratgan markerli ro'yxatni tanlang.
"Marklangan ro'yxat".
3. Ochiladigan menyudan tanlang "Ro'yxat darajasini o'zgartirish".
4. O'zingiz yaratgan markerli ro'yxat uchun o'rnatmoqchi bo'lgan darajani tanlang.
Eslatma: Darajaning o'zgarishi bilan ro'yxatdagi belgilar ham o'zgaradi. Belgilangan ro'yxatning uslubini qanday o'zgartirish kerakligini quyida aytib beramiz (birinchi navbatda o'qlar turi).
Xuddi shunday harakatni kalitlar yordamida bajarish mumkin va bu holda markerlarning turi o'zgarmaydi.
Eslatma: Skrinshotdagi qizil o'q markirovka qilingan ro'yxat uchun boshlang'ich yorlig'ini ko'rsatadi.
Darajasini o'zgartirmoqchi bo'lgan ro'yxatni tanlang va quyidagilardan birini bajaring:
Eslatma: Bir marta bosish (yoki tugmalar) ro'yxatni bir tab to'xtash joyiga siljitadi. “SHIFT+TAB” kombinatsiyasi faqat roʻyxat sahifaning chap chetidan kamida bir tab toʻxtashi uzoqda boʻlsa ishlaydi.
Agar kerak bo'lsa, siz ko'p darajali markirovka qilingan ro'yxatni yaratishingiz mumkin. Buni qanday qilish haqida bizning maqolamizdan ko'proq bilib olishingiz mumkin.
Har bir ro'yxat elementining boshida o'rnatilgan standart markerdan tashqari, uni belgilash uchun MS Word da mavjud bo'lgan boshqa belgilardan ham foydalanishingiz mumkin.
1. O'zgartirmoqchi bo'lgan markirovka qilingan ro'yxatni tanlang.
2. Tugmaning o'ng tomonida joylashgan o'qni bosing "Marklangan ro'yxat".
3. Ochiladigan menyudan tegishli marker uslubini tanlang.
4. Ro'yxatdagi markerlar o'zgartiriladi.
Agar biron sababga ko'ra standart marker uslublari sizni qoniqtirmasa, dasturda mavjud bo'lgan har qanday belgilar yoki kompyuterdan qo'shilishi yoki Internetdan yuklab olinishi mumkin bo'lgan rasmni belgilash uchun foydalanishingiz mumkin.
Maqolada raqamlanmagan ro'yxat uchun ma'lum bir markerni o'rnatishga imkon beradigan bir nechta usullar keltirilgan, shuningdek ularning afzalliklari va kamchiliklari ko'rsatilgan.
Agar siz biron bir saytni tahlil qilsangiz, kontentda ko'pincha turli xil ro'yxatlar mavjudligini bilib olishingiz mumkin: menyular, mahsulotlar ro'yxati va boshqalar. HTML kodida teg raqamlangan ro'yxat uchun, teg esa markirovka qilingan ro'yxat uchun javobgardir. ro'yxati.
Shuni ham ta'kidlash kerakki, amalda markirovka qilingan ro'yxatlar ancha keng tarqalgan, ammo ularning bitta kichik kamchiliklari bor. Ro'yxatdagi marker siz foydalanayotgan brauzerga qarab boshqacha ko'rinadi. Jiddiy dizayner uchun bu muammo.
Ushbu salbiy ta'sirni bartaraf etish uchun ro'yxat uslubi xususiyatidan foydalanib marker chiqishini bekor qilishingiz kerak:
ol, ul (roʻyxat uslubi: yoʻq; )
Bu noyob markerlar va belgilar bilan ro'yxatni shakllantirishni boshlaydi. Quyida brauzerlarda o'ziga xos va izchil bo'lgan ro'yxat elementi piktogrammalarini taqdim etishning eng keng tarqalgan usullari keltirilgan.
Ro'yxat uchun markerni belgilashning eng keng tarqalgan va oddiy usuli fon tasviridan (fon xususiyatidan) foydalanishdir. Usul uslublar jadvalida ro'yxat elementlari uchun fon tasvirini, shuningdek, yangi marker uchun joy ajratadigan to'ldirish xususiyatini belgilashga asoslangan. Quyida kod misoli keltirilgan:
ul ( ro'yxat uslubi: hech biri; ) li( fon: url (tasvirga yo'l) takrorlanmaydi; to'ldirish - chap: 20px; )
Ushbu usul o'zining o'ziga xosligi bilan quvonadi, chunki u rasm shaklida mutlaqo har qanday markerni o'rnatishga imkon beradi. Quyida bizning kodimiz brauzerda qanday ko'rinishi:
Ushbu usulning asosiy ijobiy tomoni shundaki, u 100% o'zaro faoliyat brauzerga mos keladi, ammo shunga qaramay, kichik kamchilik mavjud. Rasmdan foydalanish serverga qo'shimcha qo'ng'iroqdir.
Agar dizayn shartlari imkon bersa, rasmsiz qilishingiz mumkin bo'lgan variant mavjud. Ro'yxat eng oddiy elementlar, masalan, kvadrat ( ) yoki o'q ( →) bilan belgilangan asosiy tarkibni loyihalashda bunga ko'pincha ruxsat beriladi. Shunday qilib, biz har qanday mos keladigan maxsus belgi marker sifatida harakat qila oladigan nuqtaga keldik.
Keyinchalik, ro'yxat elementlariga maxsus belgilarni qanday kiritish kerakligi haqida savol tug'iladi. Tabiiyki, qo'lda emas, aks holda bu juda cho'zilgan va zerikarli jarayon bo'ladi, bundan tashqari, u ham ko'p mehnat talab qiladi. Pseudo-element bu vaziyatdan chiqishimizga yordam beradi oldin, ulardan foydalanish ma'lum bir selektorga bog'langan, bu bizga maxsus belgilardan markerlarni belgilash jarayonini avtomatlashtirishga imkon beradi. Ushbu yechim IE uchun yozilishini hisobga olgan holda ko'pgina brauzerlar uchun javob beradi ifoda.
Quyida chiziqcha bilan markirovka qilingan ro'yxatni yaratadigan kod misoli keltirilgan:
li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: before( kontent: " \201 3" ; }
Amalda biz quyidagi rasmni olamiz:
Haqiqiy sharoitda xakerlar shartli izohlar bilan bog'liqligini eslatib o'taman.
Ushbu usuldan foydalanganda asosiy narsa kerakli belgining kodlanishini bilishdir. Shuni ham ta'kidlash kerakki, ifodalash uchun maxsus belgilar raqamli kombinatsiya yoki mnemonik kod sifatida yoziladi. Kontent xususiyatiga kelsak, bu holda birinchi navbatda qiya chiziq qo'yiladi, keyin esa o'n oltilik kod yoziladi.
Yuqoridagi usul har doim ham afsonaviy IEda to'g'ri ishlamaydi (hackga qaramay). Aniqrog'i, ushbu brauzer uchun "tayoqchalar" to'liq ishlab chiqilmagan. Keyinchalik samarali usul asoslangan insertAdjacentHTML, quyida ushbu usul uchun kod mavjud:
li( //z-indeks: ifoda(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }
Ba'zi kvadrat markerlar ba'zi CSS xususiyatlaridan foydalangan holda chizilishi mumkin. Masalan, rangli plombali kvadrat background-color xususiyatidan, ramka shaklidagi kvadrat esa border xususiyatidan foydalanib chiziladi (darvoqe, plombali kvadratni shu tarzda chizish mumkin). . CSS faylidagi misol yozuvi:
li( //z-indeks: ifoda (runtimeStyle.zIndex = 1, bu. innerHTML = "" + bu. innerHTML) /* e6 va 7 uchun hack */) li: oldin, . listMarkerBackColor( fon-rang: #539127; kenglik: 7px; balandlik: 7px; kontent: "" ; float: chap; chekka: 6px 6px 0 0; toshib ketish: yashirin; ) html . listMarkerBackColor( chekka o'ng: 1px; /* IE6 da kichik xatolikni tuzating */ }
Shunday qilib, CSS xususiyatlari bilan chizilgan marker amalda shunday ko'rinadi:
Ushbu usul ko'pincha veb-saytda non bo'laklarini yaratishda qo'llaniladi. Nima haqida gapirayotganimizni bilmaganlar uchun quyidagi misolga qarang.
Bunday holda, har bir havola bir-biridan maxsus belgi bilan ajratiladi, lekin birinchi elementdan oldin hech qanday maxsus belgi bo'lmasligi kerak. Bunda bizga pseudo-klass yordam beradi birinchi farzand, bu ro'yxatning faqat birinchi elementiga kirish imkonini beradi. Kodda bu shunday ko'rinishi kerak
HTML
< ul> < li>< a href= "#" >uy < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>target= "_blank" dan foydalanilganda yaroqli kod
li: oldin (kontent: " \21 92" ; ) li: birinchi bola: oldin (kontent: "" ; )
Shuni ham ta'kidlash joizki, ushbu uslub nafaqat non bo'laklari uchun, balki dizayn qisqartmasidan kelib chiqqan holda oddiy markirovka qilingan ro'yxatlar uchun ham qo'llaniladi.
| 6.0+ | 4.0+ | 9.5+ | 3.0+ | 3.0+ | - | - |
Xulosa qilib aytadigan bo'lsak, oldingi psevdoelementdan foydalanish asosiy tarkibda asosli va oqilona ekanligini ta'kidlashimiz mumkin, chunki ro'yxatlarni loyihalash uchun maxsus talablar yo'q. Bu, o'z navbatida, rasmdan foydalanish variantiga nisbatan serverdagi yukni kamaytiradi. Va agar siz asosiy tarkibda juda ko'p markirovka qilingan ro'yxatlar bo'lishi mumkinligini ta'kidlasangiz, farq yanada sezilarli bo'lishi mumkin. Lekin rasmlar marker dizayn echimlari nuqtai nazaridan katta foyda keltiradi.
HTML yoki CSS-dan foydalanib, siz uchta turdagi markerlardan birini o'rnatishingiz mumkin: disk (nuqta), doira (doira), kvadrat (kvadrat). Ushbu qiymatlarni UL yoki LI selektori uchun belgilangan ro'yxat uslubi tipidagi uslub parametriga qo'shishingiz kerak.
O'zingizning marker belgisini tanlash va o'rnatish oldingi psevdo-element orqali juda noyob tarzda sodir bo'ladi. Birinchidan, ro'yxat uslubi turi atributini none ga o'rnatish orqali o'qlarni butunlay olib tashlashingiz kerak, so'ngra ikki nuqta bilan ajratilgan holda LI selektoriga oldingi psevdoelementni qo'shing. Belgining chiqishi o'zi kontent parametri yordamida amalga oshiriladi, uning qiymati Unicode-da kerakli matn yoki belgilar kodi.
Ushbu misol standart markerni yashiradi va uning o'rniga + belgisi qo'shiladi.
Izoh
Oldingi psevdo-element Internet Explorer-da ishlamaydi, shuning uchun Internet Explorer-da mahalliy markerlar ko'rinmaydi.
Ba'zi bir murakkab belgini marker sifatida o'rnatish uchun menyuni tanlash orqali Microsoft Word dasturidan foydalanishingiz mumkin Qo'shish > Belgi... Shundan so'ng, rasmda ko'rsatilganidek, oyna ochiladi. 1.
Guruch. 1. Microsoft Word dasturida belgi tanlash
Rasmda rang bilan ta'kidlangan belgilar kodi kontent parametri sifatida kiritilishi kerak, uning oldiga chiziq qo'shiladi. Masalan, berilgan belgi uchun tarkibni belgilashingiz kerak: "\25aa" .
