Vazifa
Ro'yxatdagi markerlarning ko'rinishini yashirish.
Yechim
Shu maqsadda list-style-type uslubi xususiyati none qiymati bilan ishlatiladi. U 1-misolda ko'rsatilganidek, UL yoki LI selektoriga qo'shilishi kerak.
1-misol: o'qlarsiz ro'yxat
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Shimoliy
- Janubiy
- G'arbiy
- Sharq
Ushbu misolning natijasi rasmda ko'rsatilgan. 1.
Guruch. 1. O'qlarsiz ro'yxat
Ro'yxatda markerlar ko'rsatilmasa ham, matn hali ham o'ngga siljiydi. Ro'yxat elementlarining o'rnini nazorat qilish uchun ushbu misoldagi UL selektoriga chekka-chap va to'ldirish-chap xususiyatlari qo'shilgan. Turli xil brauzerlarda bir xil natijani ko'rsatish uchun bitta o'rniga ikkita xususiyat talab qilinadi.
Bu erda HTML yordamida yaratilishi tasvirlangan ro'yxatlar uchun quyidagi CSS qoidalari taqdim etiladi.
ro'yxat uslubi turi
HTML kodidagi type atributi o'rniga o'q yoki ro'yxat raqamlashni belgilaydi. Belgilangan ro'yxatlar uchun mulk qiymatlari quyidagilar bo'lishi mumkin:
- disk- doira, sukut bo'yicha o'rnatiladi.
- doira- doira.
- kvadrat- kvadrat.
Raqamlangan ro'yxatlar uchun xususiyatga odatda quyidagi qiymatlar beriladi:
- kasr- Arab raqamlari, standart qiymat.
- pastki rim- kichik rim raqamlari.
- yuqori rimlik- bosh rim raqamlari.
- pastki alfa- kichik lotin harflari.
- yuqori alfa- katta lotin harflari.
Bundan tashqari, har qanday ro'yxat turi uchun list-style-type xususiyatini none ga o'rnatish mumkin, bu esa markerni butunlay olib tashlaydi.
Boshqa qiymatlar raqamlangan ro'yxatlar uchun mavjud, masalan cjk-ideografik ideografik raqamlashni o'rnatadi, arman- an'anaviy arman va o'nlik-boshlovchi-nol raqamlashni rim raqamlarida o'rnatadi, lekin bosh nol bilan: 01, 02, 03... 09, ammo amalda bu va shunga o'xshash qiymatlar juda kamdan-kam qo'llaniladi.
Quyidagi misolda uchta ro'yxat ko'rsatilgan: an'anaviy armancha raqamlangan raqamlangan ro'yxat, doira bilan markerli ro'yxat va ideografik raqamlangan elementlar bilan raqamlangan ro'yxat.
- Birinchi nuqta
- Ikkinchi nuqta
- Uchinchi nuqta
- Birinchi nuqta
- Ikkinchi nuqta
- Uchinchi nuqta
- Birinchi nuqta
- Ikkinchi nuqta
- Uchinchi nuqta
Natija.
Markerlarning rangi xususiyat tomonidan ko'rsatilgan ro'yxatdagi matn rangiga mos keladi rang.
ro'yxat uslubidagi tasvir
O'zingizning rasmingizni ro'yxat belgisi sifatida o'rnatishga imkon beradi. Misol uchun, agar ro'yxat sahifasini o'z ichiga olgan papkada fayl mavjud bo'lsa marker.png, siz foydalanmoqchi bo'lganingizda, dizayn kodi quyidagicha bo'ladi:
Ul (ro'yxat uslubidagi rasm: url("marker.png"); )
ro'yxat uslubidagi pozitsiya
Markerning o'rnini aniqlaydi: yoki u ro'yxat elementining chegarasidan tashqarida joylashgan ( ro'yxat uslubidagi pozitsiya: tashqarida) yoki matn uning atrofiga o'raladi ( ro'yxat uslubidagi pozitsiya: ichkarida).
Quyidagi misol bu qiymatlar orasidagi farqni ko'rsatadi. Birinchi holda, marker ro'yxatning ichida bo'ladi, ikkinchi holatda u ro'yxatning tashqarisiga joylashtiriladi.
- Faqat ichki va tashqi o'rtasidagi farqga qarang.
- Ichkarida, marker to'g'ridan-to'g'ri ro'yxatga mos keladi, uning chegaralaridan tashqariga chiqmasdan va tartibga aralashmasdan. Matn uning atrofida oqadi, marker ichkarida joylashganga o'xshaydi.
- Tashqi qiymat markerni ro'yxat tashqarisiga o'tkazadi.
Natijada quyidagi sahifa yaratiladi:
ro'yxat uslubi
Roʻyxatdagi barcha uchta xususiyatni bitta qatorga yozib, kodingizni qisqartirish imkonini beradi. Qoidalar bo'sh joy bilan ajratilgan holda yoziladi:
Ul (ro'yxat uslubi: ichki kvadrat; )
Keling, uchta ro'yxatli sahifa misolini ko'rib chiqaylik. Birinchisi 01, 02 formatidagi raqamlar bilan raqamlangan, ikkinchisi maxsus rasm bilan belgilangan (sahifa bilan papkada fayl marker.png), uchinchi ro'yxatning markeri o'chirilgan.
HTML kodi quyida keltirilgan.
- Birinchi nuqta
- Ikkinchi nuqta
- Uchinchi nuqta
- Birinchi nuqta
- Ikkinchi nuqta
- Uchinchi nuqta
- Birinchi nuqta
- Ikkinchi nuqta
- Uchinchi nuqta
Brauzer quyidagi sahifani ko'rsatadi.
Bugungi kunda ular ishlatmaydigan deyarli bitta sayt yo'q HTML ro'yxatlari (
- tartiblangan ro'yxatni ifodalaydi,
- Uy
- Blog
- Haqida
- Aloqa
- Java
- .NET
- Toronto 2004
- Pekin 2008
- London 2012
- Rio-de-Janeyro 2016
- Google
- Picasa
- Feedburner
- Youtube
- Microsoft
- Corel korporatsiyasi
- Zignallar
- ByteTaxi
- Yahoo!
- Xoopit
- BuzzTracker
- MyBlogLog
- Lorem ipsum dolor sit amet, ...
Fusce sit amet... - Aenean placerat lectus tristique...
Vivamus interdum... - Mauris eget sapien arcu, vitae...
Phasellus neque risus... - Phasellus feugiat lacus...
Duis rhoncus... - Birinchi qatordagi element
- Ikkinchi qatordagi element
- Uchinchi qatorli element
- To'rtinchi qatorli element
- Uy
- Blog
- Haqida
- Aloqa
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Ro'yxat elementi
- Birinchi nuqta.
- Ikkinchi nuqta.
- Uchinchi nuqta.
- Birinchi nuqta.
- Ikkinchi nuqta.
- Uchinchi nuqta.
- Birinchi nuqta.
- Ikkinchi nuqta.
- Uchinchi nuqta.
- , qizil hoshiya bilan hoshiyalangan. Bu kutilmagan natijalarga olib kelishi mumkin, masalan, biz to'ldirishni qayta o'rnatamiz
-
.
- Birinchi nuqta.
- Ikkinchi nuqta.
- Uchinchi nuqta.
- . Bu uni hal qiladi bu muammo. list-style-position xossasi aynan shu maqsadda.
Ro'yxat uslubi-pozitsiya xususiyati markerning blokga nisbatan o'rnini o'rnatadi
- . Bu xususiyat ikkita ma'noga ega:
Standart qiymat tashqarida.
Keling, ushbu xususiyatni misolimizga qo'llaymiz va blokga markerlarni joylashtiramiz
- bu xususiyatni ichkariga o'rnatish orqali.
Ro'yxat uslubidagi joylashuv xususiyati. - Birinchi nuqta.
- Ikkinchi nuqta.
- Uchinchi nuqta.
Mana bizda nima bor:
5-rasm. List-style-position xossasi.Ro'yxat belgilari endi blok ichiga joylashtirilgan
-
.
ro'yxat uslubidagi xususiyat
Ro'yxat uslubidagi xususiyat - bu oldingi uchta xususiyatning qiymatlaridan foydalanishga imkon beruvchi qisqartma shakl.
Misol: marker bilan rasm yarating va markerni ro'yxat elementi blokiga joylashtiring.
Ro'yxat uslubidagi xususiyat. - Birinchi nuqta.
- Ikkinchi nuqta.
- Uchinchi nuqta.
Mana natija:
6-rasm. Ro'yxat uslubidagi xususiyat.Biz bitta ro'yxat uslubida ikkita qiymatni belgiladik: markerning joylashuvi va markerning grafik faylining yo'li.
Ro'yxat uslubi xususiyati ko'pincha, hatto bitta qiymatni o'rnatish uchun ishlatiladi. Bu qisqa va yozish oson.
Tegishli CSS retseptlari
- CSS-da ochiladigan menyuni qanday qilish kerak, soyalar bilan murakkab misol.
Biz allaqachon ro'yxat va ma'lumotlarni tizimlashtirish uchun juda yaxshi vosita kabi muhim element bilan tanishdik. Biroq, faqat HTML yordamida tuzilgan ro'yxatlar dizayn jihatidan juda yomon va inson ko'ziga yoqmaydi.
Ushbu bobda biz CSS xususiyatlaridan foydalangan holda ro'yxatlar bilan bir oz sehr qilamiz. Shunday qilib, biz ro'yxat uslubi haqida gaplashamiz, keyin trening uchun teglar haqida asosiy ma'lumotlar kerak bo'ladi:
Xo'sh, agar u allaqachon boshingizda yangi bo'lsa, boshlaylik!
Ro'yxatdagi marker turi.
Esingizda bo'lsa, sof HTMLda ro'yxatdagi marker turi atribut bilan aniqlangan turi va uning mumkin bo'lgan qiymatlaridan biri, CSS-da bu vazifa mulk tomonidan qabul qilinadi: ro'yxat uslubi turi Bu, o'z navbatida, bir vaqtning o'zida butun ro'yxat uchun ham, uning alohida "modda" uchun ham marker turini aniqlaydigan o'zining standart qiymatlariga ega.
Qiymatlar ro'yxat uslubi turi:
- disk- Disk. (uchun birlamchi
- doira- Bo'shliq doira.
- kvadrat- Kvadrat.
- kasr- Arab raqamlari. (standart. uchun
- pastki rim- Kichik rim raqamlari.
- pastki alfa- Kichik harf.
- yuqori rimlik- Bosh rim raqamlari.
- yuqori alfa - Bosh harflar.
- yo'q- Marker yo'q.
Ro'yxatdagi marker turi
- 1-band.
- 2-band.
- 3-band (maxsus).
- 1-band.
- 2-band.
- 3-band.
Maxsus marker chizish.
Ro'yxat uslubi bilan ishlash uchun eng qiziqarli CSS vositasi, menimcha, yuqorida tavsiflangan standart "zerikarli" markerlar o'rniga o'zingizning nostandart rasmlaringiz - saytingizning umumiy dizayniga mos keladigan kichik rasmlardan foydalanish qobiliyatidir. .
Bu vazifani mulk bajaradi ro'yxat uslubidagi tasvir bu biror narsani ro'yxat belgisi sifatida belgilaydi grafik tasvir unga boradigan yo'lni ko'rsatadi.
Ushbu mulk uchun faqat ikkita qiymat mavjud:
- yo'q- Markerning grafik tasvirini bekor qiladi.
- url- Marker dizayni bilan faylga yo'l.
Keyin chizish uchun yo'l url qavs ichida ko'rsatilgan.
Bunday yozuv hujjatning yonida chizma fayli joylashgan grafik papka borligini ko'rsatadi: " " - marker.gif deb ataladi.
Keling, ro'yxatimizdagi har bir element ushbu rasm bilan belgilanganligiga ishonch hosil qilishga harakat qilaylik. Keling, bir misolni ko'rib chiqaylik:
Nostandart marker-chizma
- Birinchi sevimli narsa.
- Ikkinchi sevimli narsa.
- Va kamroq sevimli uchinchi nuqta.
Roʻyxat markerini oʻrash uslubi.
Mulk ro'yxat uslubidagi pozitsiya brauzerga ro'yxatdagi matnni uning o'qlariga nisbatan qanday ko'rsatishni aytadi. Odatiy bo'lib, o'qlar ro'yxat matnining yon tomoniga o'rnatiladi, lekin siz ularni matn atrofida o'rashingiz mumkin.
Mumkin bo'lgan mulk qiymatlari ro'yxat uslubidagi pozitsiya faqat ikkita:
- tashqarida- Marker ro'yxatning yon tomonida joylashgan (standart).
- ichida- Marker matnga o'ralgan.
Aniqlik uchun misol:
Matnni marker atrofida o‘rash
Bu erda marker matnga o'ralgan:
Lekin bu erda emas:
- Hali biror narsa qilinmagan joyda biror narsa qilish yaxshi bo'lishini aytadigan nuqta.
- Nima qilish yaxshi bo'lardi, degan fikr, hali biror narsa qilinmagan narsa.
ro'yxat uslubi
Asosiy mulk ro'yxat uslubi ro'yxat uslubiga bir vaqtning o'zida bir nechta qiymatlarni belgilash kerak bo'lganda ishlatiladi. Ro'yxat uslubiga qo'llaniladigan xususiyatlardan bo'sh joy bilan ajratilgan istalgan ketma-ketlikda birdan uchtagacha qiymatga ega bo'lishi mumkin.
Barcha uchta xususiyat va ularning mumkin bo'lgan qiymatlar Biz buni yuqorida ko'rib chiqdik, shuning uchun men buni takrorlamayman, lekin men sahifaning navigatsiyasini ichkariga joylashtiraman:
Agar boshingizda bo'shliqlar bo'lsa, siz orqaga qaytib, qayta o'qishingiz mumkin.
Ro'yxat uslubi
- - Bu ro'yxatda marker sifatida chizma qo'llaniladi.
- - Ushbu ro'yxat matni marker atrofida o'raladi.
Roʻyxatlar sarlavhalar, taʼkidlangan matn va tasvirlar bilan bir qatorda sahifani koʻrib chiqayotganda tashrif buyuruvchilarning eʼtiborini tortadigan elementlardir. Bunday elementlarni mohirona va ko'zga tashlanmasdan joylashtirish tashrif buyuruvchining hujjatingizni chuqurroq o'qishga kirishishining kafolatidir.
Ro'yxatlar ma'lumotlarni tizimlashtirish uchun ajoyib vosita bo'lganligi sababli va CSS xususiyatlari deyarli har qanday dizaynni yaratishga imkon beradi, ro'yxatlardan asosiy maqsadlariga qo'shimcha ravishda "menyu" - sayt navigatsiyasi sifatida foydalaning, bu erda har bir element ma'lum bir sahifaga havola bo'ladi. saytingizdan.
Keling, ro'yxatni formatlaymiz. Biz nimaga erishamiz:
4-rasm. Blokni formatlash- .
Ro'yxat belgilari endi konteynerdan tashqarida
- . Shunday qilib, markerlar ro'yxat tegishli bo'lgan maqolaning konteyneridan tashqariga chiqishi mumkin, bu esa buzadi tashqi ko'rinish sayt.
Ularni konteyner ichiga joylashtirish yaxshiroqdir
- - tartibsiz ro'yxat). Ushbu qo'llanmada men sizga oddiy, zerikarli HTML ro'yxatlarini jozibali qilishning 8 ta ajoyib usulini ko'rsataman. Biz bir nechta oddiy CSS texnikasini qo'shamiz va bizning ro'yxatlarimiz nafaqat ajoyib ko'rinishga ega bo'ladi, balki bir nechta qo'shimcha funktsiyalarga ham ega bo'ladi.
Endi biz nima yaratishimizni ko'rish uchun demoni tomosha qiling.
Ko'rinishi ancha yaxshi, shunday emasmi? Siz ham oddiy CSS kodidan foydalanib bunday ro'yxatlarni yaratishingiz mumkin. Qanday qilib bilmoqchimisiz? O'qing!
Ro'yxat №1: Oddiy navigatsiya tizimi
Ko'pincha ro'yxatlar navigatsiya menyusini yaratishda ishlatiladi. Ushbu HTML/CSS misol kodi oddiy, hatto biroz oddiy, ammo jozibali navigatsiya tizimini yaratishga imkon beradi.
/* LIST #1 */ #list1 ( ) #list1 ul ( roʻyxat uslubi: yoʻq; matnni tekislash: markaz; chegara tepasi: 1px qattiq #eee; chegara-pastki: 1px qattiq #eee; toʻldirish: 10px 0; ) #list1 ul li (displey:inline; matnni o‘zgartirish:katta; to‘ldirish:0 10px; harflar oralig‘i:10px; ) #list1 ul li a (matnni bezash:yo‘q; rang:#eee; ) #list1 ul li a: suring (matnni bezash: ostiga chizish; )
Ro'yxat №2: Raqamlash uchun boshqa shriftdan foydalanish
Ro'yxatni ishlatishdagi muammo shundaki, u matn bilan uyg'unlashadi. Va raqamlar har doim matn bilan bir xil rangda bo'ladi.
Ammo biroz uslub qo'shing va siz yuqoridagi cheklovlarni unutasiz va sizning ro'yxatlaringiz yanada jozibali bo'ladi. Bu qanday amalga oshiriladi:
Nederlandiya mamlakatda ...
Amerika Qo'shma Shtatlari federal konstitutsiyaviy ...
Filippin rasman respublika sifatida tanilgan ...
Buyuk Britaniya Buyuk Britaniya va...
/* LIST #2 */ #list2 ( width:320px; ) #list2 ol (shrift-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; ) #list2 ol li ( ) #list2 ol li p ( padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; ) #list2 ol li p em (displey: blok; )
Ro'yxat №3: Marker rasmlari
Siz tartibsiz roʻyxat belgilarining koʻrinishini standart qiymatlardan birini belgilash orqali osongina oʻzgartirishingiz mumkin, lekin siz marker sifatida tasvirlardan ham foydalanishingiz mumkin. Ushbu yechim ro'yxatlaringizni yanada original qilishga yordam beradi. Va bu kod:
/* LIST #3 */ #list3 ( ) #list3 ul (list-style-rasm: url("../images/arrow.png"); rang:#eee; font-size:18px; ) #list3 ul li (chiziq balandligi: 30px; )
Ro'yxat №4: iPhone uslubi
Ushbu ro'yxat iPhone Contacts ilovasi tomonidan yaratilgan maqoladan olingan CSS yordami va jQuery. Ro'yxatlar iPhone-da shunday ko'rinadi. Juda jozibali, shunday emasmi? Veb-saytingiz uchun birini xohlaysizmi?
/* LIST #4 */ #list4 (kengligi:320px; font-family:Georgia, Times, serif; font-size:15px; ) #list4 ul (list-style: none; ) #list4 ul li ( ) #list4 ul li a ( displey: blok; matn bezatish: yo‘q; rang: # 000000; fon rangi: # FFFFFF; chiziq balandligi: 30 piksel; chegara-pastki uslub: qattiq; chegara-pastki kenglik: 1 piksel; chegara- pastki rang:#CCCCCC; padding-left:10px; kursor: pointer; :repeat-x ) #list4 ul li a strong (margin-right:10px; )
Ro'yxat №5: Ichki ro'yxatlar
Ichki ro'yxatlar juda foydali va chiroyli ko'rinishi mumkin. Uchinchi texnikani (Bullet Images) o'zgartirib, biz "kengaytirilgan ro'yxat" yaratishimiz mumkin. Albatta, jQuery yordamisiz emas:
/* LIST #5 */ #list5 (rang:#eee; ) #list5 ol ( shrift-size:18px; ) #list5 ol li ( ) #list5 ol li ol ( list-style-image: url(".. /images/nested.png"); padding:5px 0 5px 18px; font-size:15px; ) #list5 ol li ol li (rang:#bfe1f1; balandlik:15px; chekka-chap:10px; )
Ro'yxat №6: Rim raqamlash + ko'p qatorli tur
Odatiy bo'lib, ro'yxat standart raqamlashdan foydalanadi (1, 2, 3, 4 va boshqalar). CSS-dagi qiymatni o'zgartirish orqali siz boshqa raqamlash turini o'rnatishingiz mumkin, masalan, Roman.
Bundan tashqari, sukut bo'yicha, raqamlash va o'qlar ro'yxatdan tashqarida joylashgan (bizning 2-raqamli ro'yxat bunga ajoyib misoldir). Lekin buni tuzatish mumkin, faqat list-style-position xususiyati qiymatini ichkariga o'zgartirish kerak.
/* LIST #6 */ #list6 (shrift oilasi: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Jeneva, Helvetica, Arial, sans-serif; ) #list6 ol (ro'yxat uslubi turi: yuqori -roman rang:#eee font-size: 14px;
Ro'yxat №7: Vergul bilan ajratilgan elementlar bilan chiziqli ro'yxat
Odatda, ro'yxatlar biror narsaning miqdorini ko'rsatish uchun ishlatiladi va ustun sifatida ko'rsatiladi. Agar sizga chiziqli ro'yxat kerak bo'lsa-chi? Bunga displey xususiyati qiymatini satrga o'zgartirish orqali erishiladi. Ammo agar siz to'satdan matnga ro'yxatni kiritishingiz kerak bo'lsa, unda qoidalarga ko'ra, ro'yxatdagi elementlar vergul bilan ajratilishi kerak. Bunga qanday erishish mumkin? Va oddiygina, ramziy kodning :after elementidan foydalanish.
/* LIST #7 */ #list7 ( ) #list7 ul ( rang:#eee; font-size:18px; font-family:Georgia, Times, serif; ) #list7 ul li (displey: inline; ) #list7 ul li:keyin (kontent: ", "; ) #list7 ul li.oxirgi:keyin (kontent: "."; )
Ro'yxat №8: Aylanadigan navigatsiya menyusi
Mana CSS3 ishlashini talab qiladigan oxirgi texnika (faqat qo'llab-quvvatlanadi oxirgi versiyalari Firefox, Safari va Chrome). Kursorni blok elementlaridan biriga olib borganingizda, aylanish effekti faollashadi. Albatta, eng yaxshisi emas qulay usul, lekin juda chiroyli.
/* LIST #8 */ #list8 ( ) #list8 ul ( list-style:none; ) #list8 ul li ( font-family:Georgia,serif,Times; font-size:18px; ) #list8 ul li a ( displey:block:28px; border-left:5px solid #222; #list8 ul li:hover (-moz-transform:rotate); -moz-box-shadow:10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000:box-shadow:10; 10px 20px #000000;
Xulosa
Ko'rib turganingizdek, oddiy html ro'yxatidan noyob narsalarni yaratish mumkin. Va bularning barchasi CSS yordamida amalga oshiriladi. Agar siz o'zingiz uchun juda ko'p qiziqarli narsalarni o'rgangan bo'lsangiz, men juda xursandman.
List-style-type xossasi marker turini belgilaydi. Mana ushbu mulk uchun haqiqiy qiymatlar jadvali:
Ma'nosi | Misol |
---|---|
disk | |
doira | |
kvadrat | |
kasr | |
o'nlik-boshlovchi-nol | |
pastki rim | |
yuqori rimlik | |
pastki alfa | |
yuqori alfa | |
gruzin | |
cjk-ideografik | |
yo'q |
Jadvalda men ikkita juda noodatiy xususiyatni sanab o'tdim: gruzin va cjk-ideografik. Bu xususiyatlar mintaqaviy miqyosda qo'llaniladi. Bu mulkning bir nechta shunga o'xshash qiziqarli ma'nolari bor, masalan, arman yoki hiragana, lekin ularning barchasini sanab o'tishning ma'nosi yo'q.
Endi ushbu xususiyatdan foydalanishga misol:
E'tibor bering, biz raqamlangan ro'yxatni aylantirdik
- yorliqda.
1-rasm. List-style tipidagi xususiyat.
None qiymatiga e'tibor berishni unutmang, bu qiymat markerlarni butunlay olib tashlaydi. Bu xususiyat ko'pincha CSS yordamida ro'yxatlarni formatlash uchun ishlatiladi.
Ro'yxat uslubidagi xususiyat ro'yxatlar bilan ishlash uchun boshqa xususiyatlar kabi juda oddiy.
Ro'yxat uslubidagi tasvir xususiyati marker belgisini grafik faylga o'rnatadi.
Mana bu kodning natijasi:
2-rasm. List-style-image xossasi.Ro'yxat punktlari endi tekshirilganini ko'ramiz grafik fayl.
list-style-position xususiyati
Ushbu xususiyatni o'rganishni boshlashdan oldin, keling, elementlarni formatlash modelini batafsilroq o'rganamiz
-
.
Mana biz ko'rgan narsa:
Shakl 3. Blokni formatlash- .
Ro'yxat belgilarining element blokining chegarasidan tashqariga chiqishiga e'tibor berish kerak