Listlangan satrlarni (raqamlar) stilizatsiyasi. Zamonaviy bezakning namunalari CSS Tag OL to'plamlari
Salom, aziz blogi o'quvchilari veb-sayti. Bugungi kunda ushbu toifa doirasida men maxsus dizaynlangan Tags UL, OLI, LI va DL asosida yaratilishi mumkin bo'lgan turli xil HTML ro'yxatlari haqida gapirishni xohlayman. UL va Li juftligidan foydalanib, etiketlangan ro'yxatlar OL va Li-sonli va DL, DT va DD elementlari yordamida aniqlangan, deyiladi. Shuningdek, biz Nishon tuzilmalarini yaratish uchun qisqacha printsiplarni ko'rib chiqamiz.
Sizga shuni eslatib o'tmoqchimanki, biz allaqachon boshqarganimizni, shuningdek, zamonaviy, shuningdek, reja tuzganlari (). Bundan tashqari, biz poydevorlarga, shuningdek, o'rganganimizda.
Teglar ul va Li asosida belgilangan ro'yxatlar
Yorliqlar ro'yxatini yaratish va raqamlangan-Ol yaratish uchun ul yorliq ishlatiladi. Ushbu teglar, xuddi elementli lip kabi juft va blokirovka qiladi.
Alohida ro'yxat elementlari Ochilish va yopilish yorlig'i orasida joylashgan bo'lib, u o'z navbatida Li-ning ochilish va yopilishiga tegishli. Yuqoridan va HTML ro'yxatlarining pastki qismida brauzer paragraf yorlig'ida yaratilgan chekinishlarga o'xshash narsalarni bir qatorga qo'shadi.
Masalan, ko'rib chiqaylik, masalan, bu kabi ko'rinadigan yorliqli versiya:
- Birinchi satr
- Ikkinchi
- Oxirgi element
Ochilish va yopilish teglari, ul, faqat li elementlari o'rnatilishi mumkin, har qanday tarkibni (matn, rasmlar, paragraflar, paragraflar, havolalar, hatto boshqa ro'yxatlar qo'yish mumkin.
Ular. Ul faqat belgilangan (buyurilmagan) ro'yxatini tashkil qilish uchun, shuningdek, veb-sahifada ko'rishingiz uchun LI elementlari tarkibi yordamida amalga oshiriladi.
UL uchun siz "Turli" atribut uchun har xil qiymatlarni belgilab, marker nuqtai nazarini o'zgartirishingiz mumkin. Agar "Turi" (markerlarning paydo bo'lishini boshqarish) UL element uchun belgilanmagan holda, standart marker ko'rinishi ko'rsatiladi (diskning matn rangiga bo'yalgan):
- - krem \u200b\u200b(standart);
- - bo'yalgan doira emas;
- - kvadrat
Misollar, turdagi atribut, biz barcha elementlar uchun ushbu turdagi markerlardan foydalanib, ul elementda buyurilgan. Ammo "Turli" atributi har bir alohida LI yorlig'iga buyurilishi mumkin, bu mahsulotning o'z markasini belgilash uchun o'z marker turini belgilash mumkin.
Har bir element uchun turli xil marker bilan belgilangan ro'yxatga misol:
- Disk markeri
- Bo'yalgan disk shaklida marker
- Kvadrat
OL-ga asoslangan HTML-dagi raqamlar
Raqamli ro'yxatni yaratish uchun OL teglari ishlatiladi, ichkarisida li elementlar yana joylashgan bo'ladi. OL va LI, men allaqachon aytib o'tganimdek, bloklar (i.e., barcha joylarni kengligi bilan olib borishga intiling) va Oq ichidagi barcha elementlardan boshqa hech narsa qo'yilmaydi.
Ma'lum bo'lishicha, Ol va UL xizmat teglari bo'lgan, faqat brauzerni ko'rsatish uchun zarur bo'lgan, biz qaysi ro'yxatni (etiketlangan yoki yoki raqamlangan) kerak. Raqamli bir narsada - har bir elementning chap tomonida biz marker emas, balki uning orqa tomoni va orqa tomoni:
- Birinchi satr
- Ikkinchi nuqta
- Uchinchi satr
Men allaqachon biroz yuqoriroq aytib o'tganimdek, ul, OL va Li elementlari turdagi atributlardan foydalanish imkoniyatiga ega. Bu sizga marker turini sozlash yoki qaysi raqamlar yoki harflar ro'yxatga kiritilgan elementlar bo'lishi mumkin. Raqamli ro'yxat uchun ushbu atribut parametrlari quyidagi qiymatlarni olishlari mumkin:
- - raqamlash an'anaviy arab raqamlari bilan amalga oshiriladi (bir xil variant, agar "Turli" atribut bo'lmasa, ulardan foydalanadilar;
- - Raqamlash sifatida bosh harflar;
- - kichik harf;
- - poytaxt Rim raqamlari;
- - kichik harflar
Har bir element uchun turli xil raqamlar bilan raqamlangan ro'yxatga misol:
- katta Rim raqamlari bilan raqamlash bilan
- Kichik lotin harflari bilan raqamlash
- Kichik rim raqamlash
Raqamli ro'yxatlarni yaratishda, shuningdek, jihozdan raqamni ishga tushirishni boshlash imkoniga ega, ammo atribut atributlarida ko'rsatilgan raqamdan. Masalan:
- Olge atribut startle-dagi raqami o'rnatilgan birinchi element \u003d "23"
- Har bir birlik katta hajmdagi
- Yana bir kishi
OL uchun siz har qanday qiymatdan yangi raqamdan, har qanday elementdan boshlab, ochilgan Li elementini istalgan raqam bilan ochish atributida gapirishingiz mumkin. Masalan:
- Birinchi nuqta
- Ushbu element qiymatdagi raqamni qabul qiladi \u003d "32" atribut
- Katta raqam bilan ishora
CSS-larda ro'yxatlar paydo bo'lishini ro'yxatdan o'tkazish (stol jadvallari)
Ammo, qoida tariqasida, endi markerlarning paydo bo'lishi tip atributi orqali berilmaydi, ammo buning uchun tegishli xususiyatlar buyuriladi.
Bu erda men shunchaki raqamlanmagan ro'yxatlar uchun turli markerlarga misol keltiraman, uning ko'rinishi kaskadli uslublar jadvallari bilan alohida fayl orqali o'rnatiladi.
- Birinchi nuqta
- Ikkinchi
- Oxirgi
Ammo biz keyingi maqolalarda gaplashamiz. Shu tarzda, bu blogda ul uchun markerlarning paydo bo'lishi shu tarzda belgilanadi. Rasmlar markerlar sifatida ishlatiladi: oddiy bo'lmagan ro'yxatdagi oddiy narsalar uchun -, o'lja bo'lmagan ob'ektlar uchun.
HTML kodidagi maxsus va kichik ro'yxatlar
Uchinchisi va oxirgi qarash "ta'riflar ro'yxati" deb nomlanadi va ular uchta teglar - dl, dt va dd foydalanadilar. DL ta'riflar ro'yxatiga amal qiladigan brauzer haqida xabar beradi.
Odatda bu tur ishlatiladi (yaxshi yoki u ishlatilgan deb taxmin qilingan deb taxmin qilingan) lug'at maqolalari va ularning tavsiflari (DD Taksdagi mahbuslar).
- Birinchi atama
- Tavsif
- Ikkinchi atama
- Uning tavsifi
Agar siz yuqoridagi misolga qarasangiz, DD elementini (muddat tavsifi) o'zgartirgan (40 pikselga) o'zgartirilganligini (40 pikselga) (atamaning o'zi) o'zgartiradi.
Umuman olganda, DL, DT va DD blokli teglar va DT element ichidagi tarkibda siz faqat chiziq teglari bilan tarkibni kiritishingiz mumkin (shundaki, DT sarlavhalar va paragraflarning blokdagi elementlaridan foydalanish mumkin emas). Va DD Taks ichida siz biron bir element va kichik harflar va bloklarni kiritishingiz mumkin.
Ichki ro'yxat HTML oddiy o'xshashlik bilan yaratilgan, ammo asosiy ro'yxat ichida, elementlarning bir qismi yana bir bor ochilish va yopilishda bir marta, UL yoki OL yorlig'ida bir marta.
Shuni esda tutingki, u biriktirilgan element yaratilishi faqat biriktirilgan ro'yxatning butun kodidan keyin amalga oshiriladi (bu veb-sahifada to'g'ri ko'rsatilgan bo'lishi uchun juda muhim). Ilova qilingan ro'yxat quyidagicha ko'rinishi mumkin:
- Asosiy sonning birinchi nuqtasi
- Ikkinchi nuqta
- Xatlar belgilangan birinchi elementi
- Ikkinchi
- Belgilangan uchinchi va oxirgi nuqtasi
- Uchinchi element raqamlangan
Omad sizga! Blog sahifalaridagi noaniq uchrashuvlarga
Sizni qiziqtirishi mumkin
HTML havolasi va rasmni qanday kiritish kerak (foto) - IMG va teglar Tanlash, Tekshirish, yorliq, kadrlar, afsonalar - HTML teglari Orqa ochilish ro'yxatlari va matn maydonining shakllari 
Veb-elementlarni yaratish uchun HTML shakllari - Teglar shakllantiradi, kirish va -ni tanlang, Tanlash, Tasvirlar, yorliq va boshqalarni veb-to'plamlarni yaratish uchun 
Ranglar HTML va CSS kodida o'rnatilganligi sababli, jadvallarda RGB soyalarini tanlash, Yandex va boshqa dasturlarni berish 
Veb-sahifalardagi Media tarkibini (video, flesh, flesh, audio) tarqatish va obuntlar - HTML yorliqlari 
H1-H6 sarlavhasi, HR gorizontal liniya, HRML 4.01-xabariga ko'ra, RR va PS paragrafning yorliqlari va atributlari 
HTML - Teglar jadvali, TR va TD, shuningdek, kollepan, uy nameli, uyali plastiklar va ularni yaratish uchun Roidapan 
HTML gipertekmatning tamoyilligi tili va W3C tekshiruvchisidagi barcha teglar ro'yxatini qanday ko'rish mumkin? 
Shrift teglari (yuz, o'lcham va ranglar), blokirovka va oldindan eskirgan matn formatlash (CSS-dan foydalanmasdan) 
Iframe va ramka - nima va HTML-dagi ramkadan qanday foydalanish kerak? 
IMG - Rasmlarni (SRC) joylashtiring, uni matnli (tekislash), shuningdek fon vazifalari (fon) bilan to'ldirish va soddalashtirish uchun
Asoslarga asoslanib, biz endi biz turli qismlar dizayni uchun tuzilish va qiymatlarni ta'minlash uchun ishlatiladigan narsalarni ko'rib chiqamiz. Agar kimdir bilmasa, ul va Li oddiy matnli matndan ko'ra yaxshiroq, chunki matn o'ralgan holda, ayniqsa mobil telefonda u juda yaxshi belgilanadi va marker atrofida oqilmaydi.
Ushbu ro'yxat sahifalarida ma'lumotlarni taqdim etishning ajoyib usuli, chunki ular o'qish va yaxshi ko'rinishi juda oson. Ko'p odamlar bu o'qlar kichik tasvirlar deb o'ylashadi, ammo aslida ularning barchasi juda oddiy HTML-kod orqali yaratilgan. Agar xohlasangiz, bir-biringizga turli xil ro'yxatlarni kiritishingiz mumkin, shunchaki ularni to'g'ri yopishni unutmang. Siz ushbu ro'yxat buyruqlarida xohlagan matn bilan o'ynashingiz mumkin.
Ro'yxatlar dastlab bir nechta elementlarni o'z ichiga olishini bilishingiz kerak:
1
. Tartiblanmagan ma'lumotlar.
2
. Buyurtma qilingan ma'lumotlar.
3
. Ta'riflar.
O'rnatish uchun:
1. Tanlov:
- Ro'yxat elementlari
- Noyob ro'yxat
- Asl ro'yxatlar
- ZNORNET.RU - Webmaster
- Boshqa ro'yxat
CSS.
Ksanopan (
Marj: 19px 0 0;
Pasting: 0;
Ro'yxat uslubi: yo'q;
Qarama-qarshi restet: li;
}
.Ksungelelel Li (
Chegara: 2px qattiq # 3575AD;
Ma'lumot: # D7DEE4;
Lavozimi: qarindoshi;
Marja-pastki: 17px;
Padding: 15px 9px;
}
.Ksudoelel Li: Hover (
Z-indeksi: 1;
}
.Ksudoelel Li: oldin (
Chegara: 2px qattiq # 2270b3;
Lavozimi: mutlaq;
Yuqoridagi: -14px;
Plish: 3px 9px;
Shrift hajmi: 11px;
Shriftning vazni: jasur;
Rang: # 246A;
Ma'lumot: # F2F4F7;
Qarama-qarshi o'sish: li;
Tarkib: hisoblagich (li);
-Vebkit-O'tish vaqti: 0.4S;
O'tish muddati: 0.4S;
}
.Kusuplann Li: Hover: Oldin (
Ma'lumot: # 2672b3;
Rang: # F7F9FB;
-Webkit-o'zgartiring: Tarjima (-11px, 0);
-Ms-transform: Tarjima (-11px, 0);
-Ogartirish: Tarjima (-11px, 0);
Transformatsiya: Tarjima (-11px, 0);
}
.Ksudoelel Li: Keyin (
Tarkib: ";
Lavozimi: mutlaq;
O'tish muddati: 0.3S;
-Vebkit-O'tish-mulki: kenglik;
O'tish-mulk: kenglik;
Z-indeksi: -1;
Ma'lumot: #fff;
Balandligi: 100%;
Chapdan: 0;
Yuqoridagi: 0;
Kengligi: 0;
}
.Kusukelel Li: Hikot:
Kengligi: 100%;
}
Ushbu barcha o'rnatishda.
2 Ikkinchi variant:
- Ro'yxat elementlari
- Noyob ro'yxat
- Asl ro'yxatlar
- ZNORNET.RU - Webmaster
- Boshqa ro'yxat
CSS.
Beleduzlopmaglerlar (
Margin-past: 8px;
Pasting: 0;
Ro'yxat uslubi: yo'q;
Qarama-qarshi restet: li;
}
.BeleduzuzLopmages Li (
Lavozimi: qarindoshi;
Chegara: 2px qattiq # 195588;
Umumiy ma'lumot: # eff3f7;
Pikslash: 15px 19px 15px 27px;
Marj: 12px 0 12px 40px;
-Webkit-O'tish vaqti: 0.3S;
O'tish muddati: 0.3S;
}
.BeleduzuzLopmages Li: Hover (
Ma'lumot: #fff;
}
.BeleduzuzLopmages Li: oldin (
Satr balandligi: 32px;
Lavozimi: mutlaq;
Yuqoridagi: 4px;
Chapdan: -39px;
Kengligi: 39px;
Matn-a'lpi: markazi;
Shrift hajmi: 16px;
Shriftning vazni: jasur;
Rang: # F9F5F5;
Ma'lumot: # 275b88;
Qarama-qarshi o'sish: li;
Tarkib: hisoblagich (li);
O'tish muddati: 0.2S;
}
.BeleduzuzLopmages Li: Hover: Oldin (
Kengligi: 46px;
}
.BeleduzuzLopmages Li: Keyin (
Lavozimi: mutlaq;
Chapdan: 0;
Yuqoridagi: 4px;
Tarkib: ";
Balandligi: 0;
Kengligi: 0;
Chegara: 16px qattiq shaffof;
Chapning chap ranglari: # 275b88;
-Vebkent-O'tish vaqti: 0.2S;
O'tish muddati: 0.2S;
}
.BeleduzuzLopmages Li: Hover:
Chapdan chap: 6px;
}
Markaz gaguri mustaqil ravishda saytning asosiy uslubini o'rnatishi mumkin.
3 Uch uchinchi variant:
- Ukz uchun skriptlar.
- Ucoz uchun andozalar.
- Sayt uchun dizayn
- Sayt uchun uslublar
- CSS-da stilistik.
CSS.
Nizualisanlag (
Pasting: 0;
Ro'yxat uslubi: yo'q;
Qarama-qarshi restet: li;
}
.NizusadanaeLag li (
Lavozimi: qarindoshi;
Plashding: 9px 17px 17px 25px;
Chapdan chap: 39px;
O'tish muddati: 0.2S;
Kursor: ko'rsatgich;
Shriftning vazni: jasur;
Rang: # 343638;
}
.NizusadanaeLag Li: oldin (
Chegara: 3px qattiq shaffof;
Satr balandligi: 35px;
Lavozimi: mutlaq;
Yuqoridagi: 0;
Chapdan: -29px;
Kengligi: 41px;
Matn-a'lpi: markazi;
Shrift hajmi: 14px;
Shriftning vazni: jasur;
Rang: # 619dce;
Qarama-qarshi o'sish: li;
Tarkib: hisoblagich (li);
O'tish muddati: 0.3S;
Boring: Chegara quti;
}
.NizusadanaeLag li: hover: Oldin (
Rang: # 337AB7;
}
.NizusadanaeLag Li: Keyin (
Lavozimi: mutlaq;
Yuqoridagi: 0;
Chapdan: -29px;
Kengligi: 41px;
Balandligi: 41px;
Chegara: 5px qattiq # 468bd0;
Chegara radiusi: 50%;
Tarkib: ";
Qizil: 0,5;
-Webkit-Box-ni o'lchash: chegara qutisi;
-Moz-baksni o'lchash: chegara qutisi;
Boring: Chegara quti;
}
.NizusadanaeLag Li: Hikot:
Animatsiya: 500msning eng qulayligi 0s.
Og'ir: 1;
}
@Keyffames Beatin (
0% {
Uzbekistan: 0;
Transformatsiya: shkala (3, .3, .3);
}
20% {
Transformatsiya: shkalasi (1.3, 1.3, 1.3);
}
40% {
Transformatsiya: shkalasi (.9, .9, .9);
}
60% {
Og'ir: 1;
Transformatsiya: shkalasi (1.03, 1.03, 1.03);
}
80% {
Transformatsiya: shkala (77, .97);
}
Uchun (
Og'ir: 1;
Aylantirish: shkalasi (1, 1, 1);
}
}
Bu chiroyli animatsiya bilan birga bo'ladi.
4 To'rtinchi variant:
- Sayt uchun birinchi element
- Sayt uchun ikkinchi element
- Sayt uchun uchinchi element
- Sayt uchun to'rtinchi element
- Sayt uchun beshinchi element
CSS.
Pasting: 0;
Ro'yxat uslubi: yo'q;
}
.Kudzamuden Li (
Pasting: 6Px;
}
.Kudzamuden Li: oldin (
Padding - o'ng: 11px;
Shriftning vazni: jasur;
Rang: # 4979A0;
Tarkib: "\\ 2606";
O'tish muddati: 0.4S;
}
.Kudzamuden Li: Hikote: Oldin (
Rang: # 235E90;
Tarkib: "\\ 2605";
}
Oldingi versiyalarga o'xshash, faqat belgining o'zi o'zgartiriladi.
Umuman olganda, bu ro'yxatlarning kichik tanlovi, portalda chiroyli ro'yxatni yaratish uchun veb-ustaga taqdim etadi, u erda uni ko'rishni istaganida yanada ko'proq qilishi mumkin.
Agar siz belgilangan tartibda elementlarni belgilangan tartibda joylashtirishingiz kerak bo'lsa, unda bu erda HTML buyurtma qilinadi. Ushbu ro'yxat OL yorlig'idan foydalanib yaratilgan. Raqamlash birlik bilan boshlanadi va ro'yxatning har bir keyingi buyrug'i uchun LI yorlig'i bilan birga bo'ladi.
HTML gipertekmatining tilida yorliq mavjud
- Yorliqlar ro'yxatini yaratish uchun ishlatiladi. U barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi va sizga kerak bo'lmagan tartibda elementlarni chiqarish imkoniyatini beradi. Masalan, u menyu elementlari va sahifada keltirilgan barcha narsalar: idish-tovoq, mahsulotlar, uskunalar, asboblar, asboblar va boshqa narsalar va boshqa elementlarning ustuvorligini ko'rsatmasdan ro'yxatga olish kerak.
- 1-element # 1.
- №2 element.
- №3 element.
- ...
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
-
- 2-element # 2-1.
- № 2-2 element.
- # 2-3 element.
- №3 element.
- ...
- 1-element # 1.
- №2 element.
- 1-element # 1.
- №2 element.
- 1-element # 1.
- №2 element.
- 1-element # 1.
- №2 element.
- ...
- disk - krujka shaklidagi marker (misol yuqori bo'ldi)
- doira - shaffof krujka shaklida (masalan, yuqori bo'ldi)
- kvadrat - kvadrat shaklida marker (misol yuqori bo'ldi)
- oylik - marker Numerennov ro'yxatida arabcha raqamlar bilan: 1, 2, 3, ...
- o'nlik kassion-nol - arabcha raqamlar bilan nolga teng arab raqamlari, 01, 02, 03, ...
- quyi rum - marker Numerenov shaklida kichik harflar ro'yxati: I, II, III, IV, v
- yuqori rum - Rim alifbosining katta harflardagi Rim alifbosining ro'yxatidagi marker: I, II, III, IV, v
- quyi lotin - lotin alifbosining ro'yxatidagi marker kichik harflar bilan: a, b, c, d ...
- yuqori lotin - katta harflardagi lotin alifbosining ro'yxati shaklida marker: a, b, c, d ...
- pastki yunon - marker kichik harflar bilan yunon alifboni ro'yxatida
- yuqori yunon - marker keng harflardagi yunon alifboni ro'yxati shaklida
- . Atribut yorlig'ini o'rnatishda
- Barcha ro'yxat elementlari atribut sifatida ko'rsatiladi. Ammo biz bir yoki boshqa elementni ko'rsatishni so'rashimiz mumkin. Misol:
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- (Ro'yxat element).
Qo'llab-quvvatlash brauzerlari
Xususiyat
Opera.
IExplorer.
Chekka.boshlash, kiriting Ha Ha Ha Ha Ha Ha qayta tiklandi. Ha Ha Ha Ha Emas Emas Atributlar
Xususiyat Qiymati Tavsif ixcham. ixcham. Html5-da qo'llab-quvvatlanmaydi.
Ro'yxat odatiy hajmdan kamroq bo'lishi kerakligini bildiradi (satr balandligi: 80%).
Ushbu atribut o'rniga CSS-dan foydalaning.qayta tiklandi. Belgilangan (buyurtma qilingan) ro'yxatdagi tartib kamayib borishi kerakligini bildiradi. Atribut Internet Explorer va Egles brauzerlari tomonidan qo'llab-quvvatlanmaydi. boshlash. raqam Raqamlangan (buyurtma qilingan) ro'yxatning boshlang'ich qiymatini belgilaydi. Qiymatlar butun son bo'lishi kerak, bunga salbiy qiymatlardan foydalanish mumkin. Harflar bilan ishlatilganda (\u003d "a" va tipingiz \u003d "a"), atributda ko'rsatilgan raqam alifboda harfning seriyali raqami. Masalan, boshlang'ich \u003d "4" harfga mos keladi "D" Va ro'yxat u bilan boshlanadi. Start-dan foydalanganda \u003d "27" qiymati, peshtaxta tiklanmoqda, ro'yxat ikki raqamli ("27", "AA", "AC" ... "AC" ... " . tur 1 (standart)
Katta)
a (kichik harflar)
I (katta rum)
i (kichkina rim)Belgilangan (buyurtma qilingan) ro'yxatini qurishda ishlatiladigan marker turini aniqlaydi. Foydalanish namunasi
Tegdan foydalanishning misoli <ol> <span> - Birinchi nuqta Ikkinchi nuqta
- Uchinchi nuqta
- Birinchi nuqta.
- Ikkinchi element.
- Uchinchi nuqta.
Sahifaga qarang, u mos ravishda:
Agar siz ro'yxatni ma'lum bir raqamdan boshlashini xohlasangiz (1 dan emas), siz yorliq uchun start atributini ko'rsatishingiz kerak
-
.
Masalan:
Yana bir qiziqarli atribut - bu sizga alifbo raqamini ("A" - "A" - "A" - "A" qatoridagi raqamni o'rnatishga imkon beradi ("i" - "Men" - in pastroq registr).
Mumkin bo'lgan barcha atribut qiymatlari berilgan misolni ko'rib chiqing (standart qiymatdan farq qiladi):
HTML yorliq atributidan foydalanishning misoli<оl> - >
- Uchinchi nuqta
- Birinchi nuqta Ikkinchi nuqta
- Uchinchi nuqta
- Birinchi nuqta Ikkinchi nuqta
- Uchinchi nuqta
- Birinchi nuqta Ikkinchi nuqta
- Uchinchi nuqta
- ):
Boshqa raqamlangan ro'yxatga sarmoya kiritgan raqamlangan ro'yxatga misol <span> -
Birinchi nuqta
- Uchinchi nuqta Ikkinchi nuqta
-
Birinchi nuqta
- Uchinchi nuqta
- 1-element # 1.
- №2 element.
- №3 element.
- ...
- A - belgilar kapital lotin harflari shaklida (A, B, C.);
- a - markerlarni kichik lotin harflari shaklida (a, b, c.);
- I - markerlarni katta rim raqamlari shaklida (i, II, III, IV.);
- i - markerlarni kichik rim raqamlari shaklida (I, II, III, IV.)
- 1 (sukut bo'yicha) - arab raqamlari shaklida markerlar (1, 2, 3 ..);
- . Alohida so'zlar, iboralar, paragraflar, rasmlar, rasmlar, kodi va ko'p narsalar mavjud va ular belgilangan ro'yxatning mazmuni oralig'ida joylashgan.
Eslatma
Ro'yxat ichida hisobingizni o'zingiz uchun o'zgartirish mumkin. Buning uchun maxsus atribut qiymati mavjud \u003d "" teg
- qaysi raqamli qiymat berilgan. masalan
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- # 10 element.
- 11-element # 11.
- # 12 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- 1-element # 1.
- №2 element.
- №3 element.
- .
- 1-element # 1.
- №2 element.
- №3 element.
- # 4 element.
Bu sahifaga shunday ko'rinadi:
- 1-element # 1.
- №2 element.
- №3 element.
- # 4 element.
Masalan 5. HTML-da qayta tiklanadigan raqamlangan ro'yxat
Quyidagi ro'yxatga olingan ro'yxatga (teskari tartibda hisob) misol keltirilgan.
- 1-element # 1.
- №2 element.
- №3 element.
- # 4 element.
Bu sahifaga shunday ko'rinadi:
- 1-element # 1.
- №2 element.
- №3 element.
- # 4 element.
Kod quyidagicha ko'rinadi:
Teg belgilarini o'zgartirish
- CSS-dan foydalanish
Yorliq tomonidan yaratilgan belgilangan ro'yxat elementlari
- o'zboshimchalik bilan tasvirlangan bo'lishi mumkin. CSS marker turini o'zgartirish uchun ishlatiladi. masalan
Va bu sahifada ko'rinadi:
CSS yordami bilan biz boshqa marker displeyini belgilashimiz mumkin. Ammo siz har qanday uslub yorlig'ini ko'rsatganingizda, buni eslashingiz kerak
- U ro'yxatning barcha elementlariga tegishli. Html teglari
Ma'no va dastur
Raqamlangan (buyurtma qilingan) ro'yxat ma'lum buyurtma asosida amalga oshiriladigan narsalar uchun mo'ljallangan. Raqamlangan ro'yxat yorliqdan boshlanadi
- (ingliz tilidan qisqartirilgan buyurtma qilingan ro'yxat. - buyurtma qilingan ro'yxat). Ro'yxatning har bir elementi yorliqdan boshlanadi
- >
- >
- >
Boshqa raqamlangan ro'yxatlarga investitsiya kiritilgan raqamlangan (buyurtma qilingan) ro'yxatlarni yaratishga ruxsat berildim (ro'yxat elementida)
Sahifaga qarang, u mos ravishda bo'ladi.
Faqatgina farq shundaki, ushbu teglar ro'yxatlarni raqamlash uchun qat'iy belgilangan. Yorliqning nomi ingliz tilini qisqartirishdan "Buyurtmalangan ro'yxat" - raqamlangan ro'yxat.
Sintaksis yorlig'i
Atribut turi \u003d "qiymati" quyidagi qiymatlarni qabul qilishi mumkin
Boshlash \u003d "Qiymat" atribut hisobotning boshlang'ich qiymatini (boshlang'ich qiymatini) o'rnatadi.
Qayta tiklangan atef qaytarish hisobini (agar kerak bo'lsa) o'rnatadi.
Yorliq
- yopilish yorlig'idan majburiy foydalanishni talab qiladi
Ro'yxat elementini shakllantirish uchun bir juft yorliq ishlatiladi
HTML-dagi raqamlangan ro'yxatlar bilan misollar (
- )
Masalan 1. Lotin harflari shaklida raqamlangan HTML ro'yxati
Kapital harflar bilan misol
Misol qat'iy harflar bilan
Bu sahifaga shunday ko'rinadi:
Masalan 2. Rim harflari shaklida HTML ro'yxatiga kiritilgan
Kapital harflar bilan misol
Bu sahifaga shunday ko'rinadi:
Misol qat'iy harflar bilan
Bu sahifaga shunday ko'rinadi:
3-misol 3. Raqamli HTML ro'yxatida turli xil boshlang'ich holat
Metrning boshlang'ich qiymatini belgilash imkonini beradigan boshlang'ich sifatining xususiyatlarini ko'rsatadigan misol.
Bu sahifaga shunday ko'rinadi:
Masalan 4. HTML raqamlarida hisoblash
Quyida teglardagi yangi elementlarni aks ettirishda qiymat atributidan foydalangan holda metrlik qiymatlarni o'zgartirish qobiliyati bilan bir misol keltirilgan
Sintaksis yorlig'i
Ushbu kod saytdagi belgilangan ro'yxatga aylanadi:
Yorliq
- yopilish yorlig'idan majburiy foydalanishni talab qiladi
Ro'yxat elementlarini shakllantirish uchun bir juft yorliq ishlatiladi. Alohida so'zlar, iboralar, paragraflar, rasmlar, rasmlar, kodi va ko'p narsalar mavjud va ular belgilangan ro'yxatning mazmuni oralig'ida joylashgan.
Belgilangan ro'yxatning mazmuni nima bo'lishi mumkin?Bu turli xil matnlar, jumladan, bitta so'zlar, iboralar va paragraflar, rasmlar, investitsiya ro'yxatlar, PHP kod tilimlari va boshqa narsalar, oddiy etiketingga muhtoj.
Belgilangan ro'yxatdagi chekinishlarning har bir elementida 40 pikselda o'ng tomonga. CSS uslublaridan foydalanib, biz ushbu ro'yxatni sizning xohishingizga ko'ra o'zgartirishimiz mumkin. Yorliq
- Bu blokirovka, shuning uchun u ekranning chetiga, stol ramkasi yoki sahifaning boshqa elementlari bilan cheklangan.
"Ro'yxatdagi ro'yxat" sarlavhasini investitsiya qilishga ruxsat beriladi
masalan
Atributlar va teg xususiyatlari
Keng tarqalgan teg atributi
- Ro'yxat belgisi qanday ko'rinishini ko'rsatuvchi turdagi atribut. Quyidagi qiymatlarni olishi mumkin
1. Turi \u003d "disk" - bo'yalgan krujka shaklida (ushbu qiymat sukut bo'yicha belgilanadi). Disk bilan bir misol balandroq edi.
2. Turi \u003d "aylana" - shaffof krujka shaklida marker
Masalan:
3. Turi \u003d "kvadrat" - kvadrat shaklida marker
Masalan:
Ammo sahifada nimaga o'xshaydi:
CSS-da, marker turi ro'yxati uslubidagi atributlardan foydalangan holda o'rnatiladi:
Kirish turini qanday qabul qilish kerakligini ko'rib chiqing:
Izoh 2.
Atributni tegning o'zi sifatida tayinlash mumkin.
- va teglar
Global atributlar atributlari HTML5
JSONga JSON TXT faylida nima
Oddiy iboralar (RejExp ob'ekti) Shaklni muntazam ravishda JavaScript-dagi iboralarni tekshiring