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 yerda HTML yordamida yaratilishi tasvirlangan roʻyxatlar uchun quyidagi CSS qoidalari keltirilgan.

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 ro'yxat uslubi turi xususiyati hech narsaga o'rnatilishi 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.

1. Birinchi nuqta
2. Ikkinchi nuqta
3. Uchinchi nuqta

• Birinchi nuqta
• Ikkinchi nuqta
• Uchinchi nuqta

1. Birinchi nuqta
2. Ikkinchi nuqta
3. 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, 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 atrofiga o'raladi ( ro'yxat uslubidagi pozitsiya: ichkarida).

Quyidagi misol bu qiymatlar orasidagi farqni ko'rsatadi. Birinchi holda, marker ro'yxatning ichida, ikkinchi holda, u ro'yxatning tashqarisida joylashgan.

• 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 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.

1. Birinchi nuqta
2. Ikkinchi nuqta
3. Uchinchi nuqta

• Birinchi nuqta
• Ikkinchi nuqta
• Uchinchi nuqta

1. Birinchi nuqta
2. Ikkinchi nuqta
3. Uchinchi nuqta

Brauzer quyidagi sahifani ko'rsatadi.

Bugungi kunda ular ishlatmaydigan deyarli bitta sayt yo'q HTML ro'yxatlari (

tartiblangan ro'yxatni ifodalaydi,
- tartibsiz ro'yxat). Ushbu qo'llanmada men sizga oddiy, zerikarli HTML ro'yxatlarini jozibali qilishning 8 ta ajoyib usulini ko'rsataman. Biz faqat 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 kamtarona, ammo jozibali navigatsiya tizimini yaratishga imkon beradi.

• Uy
• Blog
• Haqida
• Aloqa

/* 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 bajariladi:

Niderlandiya 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



Standart qiymatlardan birini belgilash orqali tartibsiz roʻyxat belgilarining koʻrinishini osongina oʻzgartirishingiz mumkin, lekin siz marker sifatida tasvirlardan ham foydalanishingiz mumkin. Ushbu yechim ro'yxatlaringizni yanada original qilishga yordam beradi. Va bu kod:

• Java
• .NET

/* 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 bittasini xohlaysizmi?

• Toronto 2004
• Pekin 2008
• London 2012
• Rio-de-Janeyro 2016

/* 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:

1. Google
   1. Picasa
   2. Feedburner
   3. Youtube
2. Microsoft
   1. Corel korporatsiyasi
   2. Zignallar
   3. ByteTaxi
3. Yahoo!
   1. Xoopit
   2. BuzzTracker
   3. MyBlogLog

/* 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 belgilashingiz 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.

1. Lorem ipsum dolor sit amet, ...
   Fusce sit amet...
2. Aenean placerat lectus tristique...
   Vivamus interdum...
3. Mauris eget sapien arcu, vitae...
   Phasellus neque risus...
4. Phasellus feugiat lacus...
   Duis rhoncus...

/* 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.

• Birinchi qatordagi element
• Ikkinchi qatordagi element
• Uchinchi qatorli element
• To'rtinchi qatorli element

/* 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 ning 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.

• Uy
• Blog
• Haqida
• Aloqa

/* 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	Ro'yxat elementi
doira	Ro'yxat elementi
kvadrat	Ro'yxat elementi
kasr	Ro'yxat elementi
o'nlik-boshlovchi-nol	Ro'yxat elementi
pastki rim	Ro'yxat elementi
yuqori rimlik	Ro'yxat elementi
pastki alfa	Ro'yxat elementi
yuqori alfa	Ro'yxat elementi
gruzin	Ro'yxat elementi Ro'yxat elementi Ro'yxat elementi
cjk-ideografik	Ro'yxat elementi Ro'yxat elementi Ro'yxat elementi
yo'q	Ro'yxat elementi

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 bu xususiyatdan foydalanishga misol:

1. Birinchi nuqta.
2. Ikkinchi nuqta.
3. Uchinchi nuqta.

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.

List-style-image xususiyati marker belgisini grafik faylga o'rnatadi.

• Birinchi nuqta.
• Ikkinchi nuqta.
• Uchinchi nuqta.

Mana biz ko'rgan narsa:

Shakl 3. Blokni formatlash
.

Ro'yxat belgilarining element blokining chegarasidan tashqariga chiqishiga e'tibor berish kerak

• , qizil hoshiya bilan hoshiyalangan. Bu kutilmagan natijalarga olib kelishi mumkin, masalan, biz to'ldirishni qayta o'rnatamiz
  .
  • Birinchi nuqta.
  • Ikkinchi nuqta.
  • Uchinchi nuqta.

  Buni olamiz:

  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 ko'rinish sayt.

  Ularni konteyner ichiga joylashtirish yaxshiroqdir

  • . Bu buni hal qiladi bu muammo. list-style-position xossasi aynan shu maqsadda.

    Ro'yxat uslubi-pozitsiya xususiyati blokga nisbatan markerning 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.
    • Birinchi nuqta.
    • Ikkinchi nuqta.
    • Uchinchi nuqta.

    Mana bizda nima bor:

    5-rasm. List-style-position xossasi.

    Ro'yxat o'qlari endi blok ichiga joylashtirilgan

  • .

    ro'yxat uslubidagi xususiyat

    Ro'yxat uslubidagi xususiyat - bu oldingi uchta xususiyatning qiymatlaridan foydalanishga imkon beruvchi stenografiya shakli.

    Misol: marker bilan rasm yarating va markerni ro'yxat elementi blokiga joylashtiring.

    • 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:

    1. - HTML darsligida bayon etilgan 9-bob - Ishni boshlashdan oldin ushbu elementlar haqida fikringizni yangilashni tavsiya qilaman.

       Xo'sh, agar u sizning boshingizda allaqachon yangi bo'lsa, unda 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.

       Qadriyatlar ro'yxat uslubi turi:

       • disk- Disk. (uchun birlamchi
         )
         • doira- Bo'shliq doira.
         • kvadrat- Kvadrat.
         • kasr- Arab raqamlari. (uchun birlamchi
           )
           1. pastki rim- Kichik rim raqamlari.
           2. pastki alfa- Kichik harflar.
           3. yuqori rimlik- Bosh rim raqamlari.
           4. yuqori alfa - Bosh harflar.
           5. yo'q- Marker yo'q.

         
         
         
         
         
         
         

         
         
         • 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:

         
         
         
         
         
         
         

         
         
         • 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:

         
         
         
         
         
         
         
         

         
         

         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 uni yuqorida ko'rib chiqdik, shuning uchun uni takrorlamayman, lekin men faqat sahifaning navigatsiyasini joylashtiraman:

         Agar sizning boshingizda bo'shliqlar qolsa, siz orqaga qaytib, qayta o'qishingiz mumkin.

         
         
         
         
         
         
         

         
         

         
         
         • - 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 buyuruvchi sizning hujjatingizni chuqurroq o'qishga kirishishining kafolatidir.

         Ro'yxatlar ma'lumotlarni tizimlashtirish uchun ajoyib vosita bo'lgani uchun 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.

         Facebook

         Twitter

         VKontakte

         Google+
         Qanday ishlash kerak