Merhaba, blog sitesinin sevgili okuyucuları. Bugün bu başlık altında bunun için özel olarak tasarlanmış UL, OL, LI ve DL etiketleri baz alınarak oluşturulabilecek çeşitli Html listelerinden bahsetmek istiyorum. Bir çift UL ve LI yardımıyla, OL ve LI numaralı listeler yardımıyla madde işaretli listeler oluşturulur ve DL, DT ve DD öğelerinin yardımıyla tanım listeleri adı verilen listeler oluşturulur. Ayrıca iç içe yapılar oluşturma ilkelerini de kısaca ele alacağız.
Size modernin temelleri ve ayrıca tablo düzeni () hakkında konuşmayı başardığımızı hatırlatmak istiyorum. Ek olarak, temellere değindik, iyi, öğrendik.
UL ve LI etiketlerine dayalı madde işaretli listeler
UL etiketi madde işaretli listeler oluşturmak için, OL etiketi ise numaralandırılmış listeler oluşturmak için kullanılır. Bu etiketler, tıpkı LI öğesi gibi eşleştirilmiş ve blok etiketleridir.
Ayrı liste öğeleri, açılış ve kapanış etiketleri arasında yer alır ve bunlar da sırasıyla açılış ve kapanış LI öğesi içine alınır. Tarayıcı, Html listelerinin üstünde ve altında, paragraf etiketi tarafından oluşturulan girintiye benzer şekilde tek satırlık girinti ekler.
Örneğin, şöyle görünebilecek etiketli bir sürüm görelim:
- İlk satır
- İkinci
- son eleman
Açılış ve kapanış UL etiketlerinin içine yalnızca LI öğeleri yerleştirilebilir ve zaten bu öğelerin (paragraflar) içine herhangi bir içerik (metin, resimler, başlıklar, paragraflar, bağlantılar ve hatta diğer listeler) ekleyebilirsiniz.
Şunlar. UL yalnızca madde işaretli (sırasız) bir liste düzenlemeye hizmet eder ve içindeki bir web sayfasında göreceğiniz her şey LI öğelerinin içeriği kullanılarak uygulanır.
UL için, içindeki "Tür" özelliği için farklı değerler ayarlayarak işaretçinin görünümünü değiştirebilirsiniz. UL öğesi için "Tip" (işaretçilerin görünümünü yöneten) belirtilmemişse, varsayılan işaretçi türü görüntülenecektir (disk, metnin rengiyle doldurulmuş bir dairedir):
- — dolu daire (varsayılan);
- - doldurulmamış daire;
- - Meydan
Yukarıdaki örneklerde, tüm öğeler için bu tür işaretleyiciyi kullanarak UL öğesinde "Tür" niteliğini yazdık. Ancak "Tür" özelliği, bu öğe için kendi işaretleyici türünü ayarlayarak her bir LI etiketi için de yazılabilir.
Her öğe için farklı madde işareti türlerine sahip madde işaretli liste örneği:
- Doldurulmuş disk işaretleyici
- Gölgesiz disk şeklinde işaretleyici
- Meydan
OL etiketine göre Html'de numaralandırılmış listeler
Numaralandırılmış bir liste oluşturmak için, içinde yine LI öğelerinin yer alacağı OL etiketleri kullanılır. OL ve LI, daha önce de belirttiğim gibi, blok düzeyindedir (yani, genişlik olarak kendilerine sunulan tüm alanı kaplarlar) ve OL'nin içine LI öğeleri dışında hiçbir şey yerleştirilemez.
OL ve UL'nin, yalnızca tarayıcıya ne tür bir liste oluşturduğumuzu (madde işaretli veya numaralandırılmış) anlatmak için gereken hizmet etiketleri olduğu ortaya çıktı. Numaralı olması durumunda, her öğenin solunda bir işaretçi değil, arkasında bir sayı ve bir nokta göreceğiz:
- İlk satır
- ikinci nokta
- Üçüncü satır
Biraz önce bahsettiğim gibi UL, OL ve LI elementleri TYPE özniteliğini kullanma yeteneğine sahiptir. İşaretçi türünü ayarlamanıza veya listeleme öğelerinin hangi sayılarla veya harflerle numaralandırılacağını belirtmenize olanak tanır. Sıralı bir liste için bu özniteliğin parametreleri aşağıdaki değerleri alabilir:
- — numaralandırma, sıradan Arap rakamlarıyla yapılacaktır (“Tür” özelliğinin yokluğunda varsayılan olarak aynı seçenek kullanılacaktır);
- - numaralandırma olarak büyük harfler;
- - küçük harf;
- - büyük Romen rakamları;
- - küçük Romen rakamları;
Her öğe için farklı numaralandırma türlerine sahip bir numaralandırılmış liste örneği:
- büyük Romen rakamlarıyla numaralandırılmış
- Küçük Latin harfleriyle numaralandırma
- Küçük Romen rakamlarıyla numaralandırma
Numaralandırılmış listeler oluştururken, numaralandırmaya bir taneden değil, BAŞLAT özelliğinde belirtilen numaradan başlamak da mümkündür. Örneğin:
- OL etiketinde numarası start="23" özniteliği ile belirtilen ilk öğe
- Bir sonraki öğe, bir numara daha
- bir tane daha
OL için, herhangi bir öğeden başlayarak, bu öğenin açılış LI'sine gerekli sayı ile VALUE özniteliğini yazarak herhangi bir değerden yeni bir numaralandırma da başlatabilirsiniz. Örneğin:
- Birinci madde bir
- Bu öğe, value="32" özniteliğinde belirtilen sayıyı alacaktır.
- Çok sayıda öğe
Listelerin görünümünü CSS'de şekillendirme (stil sayfaları)
Ancak, kural olarak, şimdi işaretçilerin görünümü, TYPE özniteliği aracılığıyla değil, karşılık gelen özelliklerin yazıldığı .
Burada, görünüşleri basamaklı stil sayfalarına sahip ayrı bir dosya aracılığıyla ayarlanan sırasız listeler için çeşitli işaretçilere bir örnek vereceğim.
- İlk nokta
- İkinci
- Son
Ama bundan sonraki yazılarda bahsedeceğiz. Bu blogdaki UL işaretlerinin görünümü bu şekilde ayarlanır. Resimler belirteç olarak kullanılır: numarasız bir listenin sıradan öğeleri için — , numarasız bir listenin iç içe öğeleri için — .
Html Kodunda Özel ve İç İçe Listeler
Üçüncü ve son türe "tanım listeleri" denir ve bunlar üç etiket kullanılarak ayarlanır - DL, DT ve DD. DL, tarayıcıya bir tanım listesinin izleyeceğini söyler.
Tipik olarak, bu tür terimlerden (DT etiketlerinde bulunur) ve açıklamalarından (DD etiketlerinde bulunur) oluşan sözlük girişlerini yazmak için kullanılır (veya kullanılması gerekiyordu).
- İlk dönem
- Tanım
- İkinci dönem
- Onun açıklaması
Yukarıdaki örneğe bakarsanız, DD öğesinin (terim tanımı) DT öğesine (terimin kendisine) göre kaydırıldığını (40px) fark edeceksiniz.
Genel olarak, DL, DT ve DD blok etiketlerdir ve DT öğesinin içine yalnızca satır içi etiketlere sahip içerik eklenebilir (başlıkların ve paragrafların blok öğelerinin DT içinde kullanılamayacağı ortaya çıktı). Ve DD etiketlerinin içine hem satır içi hem de blok olarak herhangi bir öğe ekleyebilirsiniz.
iç içe liste Html'de basit bir benzetmeyle oluşturulur, ancak ana listenin içinde, bazı öğeler yeniden UL veya OL açılış ve kapanış etiketi içine alınır.
Lütfen iç içe öğenin oluşturulacağı öğenin kapanış LI'sinin yalnızca iç içe listenin tüm kodundan sonra yerleştirildiğini unutmayın (bu, web sayfasında doğru görüntülenmesi için çok önemlidir). İç içe liste şöyle görünebilir:
- Numaralandırılmış ana metnin ilk paragrafı
- ikinci nokta
- İç içe etiketli ilk öğe
- İkinci
- İşaretlenenlerin üçüncü ve son noktası
- Numaralı sayının üçüncü elemanı
Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşürüz
adresine giderek daha fazla video izleyebilirsiniz.");">
ilginizi çekebilir
HTML'ye bağlantı ve resim (fotoğraf) nasıl eklenir - IMG ve A etiketleri 
Site için HTML formları - web formu öğeleri oluşturmak için Form, Input ve Select, Option, Textarea, Label ve diğerleri etiketleri Select, Option, Textarea, Label, Fieldset, Legend - Açılır liste formunun ve metin alanının Html etiketleri 
Html ve CSS kodunda renkler nasıl ayarlanır, tablolarda RGB gölgelerinin seçimi, Yandex sonuçları ve diğer programlar 
Göm ve nesne - Web sayfalarında medya içeriğini (video, flash, ses) görüntülemek için HTML etiketleri 
Html 4.01 standardına göre H1-H6 başlıkları, yatay satır Hr, satır sonu Br ve paragraf P etiketleri ve özellikleri 
Html'deki Tablolar - Tablo, Tr ve Td etiketlerinin yanı sıra bunları oluşturmak için Colspan, Cellpadding, Cellspacing ve Rowspan
HTML köprü metni biçimlendirme dilinin bir etiketi vardır
- Madde işaretli listeler oluşturmak için kullanılır. Tüm modern tarayıcılar tarafından desteklenir ve öğeleri numaralandırma gerektirmeyen bir sırayla görüntülemenize olanak tanır. Örneğin, genellikle menü öğeleri onunla birlikte görüntülenir ve sayfadaki listelerle ilgili her şey: yemekler, ürünler, ekipman, araçlar ve bir veya başka bir öğenin önceliğini belirtmeden listelenmesi gereken çok daha fazlası.
- Madde 1
- 2. öğe
- Öğe #3
- ...
- Madde 1
- 2. öğe
- Öğe #3
- Madde 1
-
- Öğe #2-1
- Öğe #2-2
- Öğe #2-3
- Öğe #3
- ...
- Madde 1
- 2. öğe
- Madde 1
- 2. öğe
- Madde 1
- 2. öğe
- Madde 1
- 2. öğe
- ...
- disk - daire şeklinde bir işaretleyici (yukarıdaki örnek)
- daire - şeffaf daire şeklinde bir işaretçi (örnek yukarıdaydı)
- kare - kare şeklinde bir işaretçi (yukarıdaki örnek)
- ondalık - Arap rakamlarıyla numaralandırılmış bir liste şeklinde bir işaret: 1, 2, 3, ...
- ondalık-başlık-sıfır - başında sıfır olan Arap rakamlarının numaralı bir listesi şeklinde işaretleyici: 01, 02, 03, ...
- alt-roman - Roma alfabesinde küçük harflerle numaralandırılmış bir liste şeklinde bir işaret: i, ii, iii, iv, v
- üst romen - Roma alfabesinde büyük harflerle numaralandırılmış bir liste şeklinde bir işaret: I, II, III, IV, V
- alt-latin - Latin alfabesinde küçük harflerle bir liste şeklinde bir işaret: a, b, c, d, ...
- üst latin - Latin alfabesinde büyük harflerle bir liste şeklinde bir işaretleyici: A, B, C, D, ...
- alt-yunan - küçük harflerle Yunan alfabesinde bir liste şeklinde işaretleyici
- üst yunanca - büyük harflerle Yunan alfabesinin bir listesi şeklinde bir işaretleyici
- . Bir etikete bir özellik ayarlarken
- listenin tüm öğeleri, nitelik tarafından belirtildiği gibi görüntülenecektir. Ancak şu veya bu öğe için kendi ekranımızı ayarlayabiliriz. Resimdeki örnek:
- Madde 1
- 2. öğe
- Öğe #3
- Madde 1
- 2. öğe
- Öğe #3
- Madde 1
- 2. öğe
- Öğe #3
- Madde 1
- 2. öğe
- Öğe #3
- Listedeki ilk öğe
- Listedeki ikinci öğe
- Listedeki üçüncü öğe
- , ardından otomatik olarak önüne koyar .
- 1 - Arap rakamları;
- A - büyük harfler;
- a - küçük Latin harfleri;
- I - büyük Romen rakamları;
- i - küçük Romen rakamları.
- . Aynı zamanda, listenin her bir öğesinin karşısına bir işaretleyici eklenir, varsayılan olarak bir daire şeklinde bir işaretleyicidir. Etiketlerin yardımıyla, içinde listenin öğelerinin bulunduğu bir kap oluşturulur: .
Madde işaretli liste kodu şöyle görünür:
- Bunun gibi seçenek
- Bu seçenek
- Bir çeşit seçenek
Bu kodu kullanarak bir HTML sayfası oluşturmayı deneyebilir ve sonuç olarak aşağıdaki listeyi elde edebilirsiniz:
Gördüğünüz gibi, listenin her öğesi yeni bir satırda bulunur ve sol, üst ve altta belirli girintiler oluşturulur. Listedeki her öğe, içi dolu bir daire (varsayılan olarak kullanılır), daire veya kare olabilen bir madde işaretiyle başlar. Etiket
- işaretçinin stilinin ayarlandığı bir tür niteliği vardır. Bu öznitelik aşağıdaki değerlere sahiptir:
- disk - daire;
- daire - daire;
- kare kare.
- Bunun gibi seçenek
- Bu seçenek
- Bir çeşit seçenek
- Bunun gibi seçenek
- Bu seçenek
- Bir çeşit seçenek
- . Bu şekilde, çeşitli işaretleyicilerle bir liste oluşturabilirsiniz.
- Bunun gibi seçenek
- Bu seçenek
- Bir çeşit seçenek
Sonuç aşağıdaki gibi olacaktır:
Numaralandırılmış listeler.
HTML'deki numaralandırılmış listeler, her bir öğenin bir seri numarasına sahip olduğu listelerdir, etiket kullanılarak numaralandırılmış listeler oluşturulur.
- ve etiketlerinde yuvalanmış
-
- İlk satır
- İkinci çizgi
- üçüncü satır
Böyle bir liste şöyle görünür:
Varsayılan numaralandırma Arap rakamlarıdır. ama etiket
- numaralandırmanın büyük harfle (type="A") veya küçük harfle (type="a") Latin harfleriyle, üstte Romen rakamlarıyla (type= "I") ve alt (type="i") kaydı.
- . Etiket
- liste için bir kap oluşturur, etiket
- terimi ve etiketi ayarlar
- bir terimin tanımı veya tanımı.
Bu liste şu şekilde yazılmıştır:
- 1. dönem
- 1. terimin tanımı
- 2. dönem
- 2. terimin tanımı
- 3. dönem
- 3. terimin tanımı
Bu, aşağıdaki listeyle sonuçlanacaktır:
Gördüğünüz gibi, bu terim ve tanım metni için uygun girintiler oluşturur.
HTML'de iç içe veya çok düzeyli listeler.
Bazen, belirli bir liste türünün bir öğesinde başka bir listeyi yuvalamak gerekir. HTML, listeleri diğer listelerin öğeleri içinde süresiz olarak iç içe yerleştirme yeteneğine sahiptir.
Örneğin, numaralandırılmış listeleri madde işaretli liste öğelerinin içine yerleştiren kod buradadır.
- Bunun gibi seçenek
- İlk satır
- İkinci çizgi
- üçüncü satır
- Bu seçenek
- İlk satır
- İkinci çizgi
- üçüncü satır
- Bir çeşit seçenek
- İlk satır
- İkinci çizgi
- üçüncü satır
Numaralandırılmış listeler, seri numaralarına sahip bir dizi öğedir. Numaralandırma türü ve türü, öğenin parametrelerine bağlıdır.
- , listeyi oluşturmak için kullanılır. Aşağıdaki değerler numaralandırma öğeleri olarak işlev görebilir:
- Arap rakamları (1, 2, 3, ...);
- On'dan küçük basamaklar için başında sıfır olan Arap rakamları (01, 02, 03, ..., 10);
- büyük Latin harfleri (A, B, C, ...);
- küçük Latin harfleri (a, b, c, ...);
- Büyük harflerle Romen rakamları (I, II, III, ...);
- Küçük harflerle Romen rakamları (i, ii, iii, ...);
- Ermeni numaralandırması;
- Gürcü numaralandırma
- . Değer herhangi bir pozitif tam sayıdır. Liste olarak Latin harfleri kullanılsa bile, ne tür bir numaralandırmanın ayarlandığı önemli değildir. Listeye hem başlangıç hem de değer öznitelikleri uygulanırsa, ikincisi öncelik kazanır ve numaralandırma, örnek 1'de gösterildiği gibi value tarafından belirtilen sayıdan başlar.
Örnek 1 - Listenin numaralandırmasını değiştirin
Listeler - İş yerinize iyi bakmalısınız.
- Odadaki aydınlatmayı, ışık kaynağı operatörün yanında veya arkasında olacak şekilde ayarlayın.
- Tıbbi komplikasyonlardan kaçınmak için yumuşak bir koltuk seçmeniz önerilir.
Bu örnekteki listenin ilk elemanı, start="4" niteliği belirtildiğinden, Roma rakamı IV ile başlayacaktır, daha sonra V sayısı ve sıra dışı olan son elemana X sayısı atanmıştır (Şek. 1).
Pirinç. 1. Listedeki Romen rakamları
Sayı yazma
Varsayılan olarak, numaralandırılmış bir listenin belirli bir biçimi vardır: önce bir sayı, sonra bir nokta vardır ve bundan sonra metin bir boşlukla ayrılmış olarak görüntülenir. Bu yazı biçimi görsel ve kullanışlıdır, ancak bazı geliştiriciler listeleri numaralandırmanın farklı bir yolunu görmeyi tercih eder. Yani, noktayı Şekil 2'de gösterildiği gibi bir kapatma dirseği ile değiştirmek için. 2 veya benzeri bir şey.
Pirinç. 2. Köşeli ayraçlı numaralı liste türü
Stiller, içerik ve karşı artış özelliklerini kullanarak listelerin numaralandırmasını değiştirmenize olanak tanır. İlk olarak, ol seçicinin counter-reset : item olarak ayarlanması gerekir, bu her yeni listedeki numaralandırmanın baştan başlaması için gereklidir. Aksi takdirde numaralandırma devam edecek ve 1,2,3 yerine 5,6,7 göreceksiniz. Öğe değeri benzersiz bir sayaç tanımlayıcısıdır, onu kendimiz seçeriz. Ardından, yok değeriyle liste stili-tipi stil özelliği aracılığıyla orijinal işaretçileri gizlemeniz gerekir.
content özelliği tipik olarak ::after ve ::before sözde öğeleriyle birlikte çalışır. Bu nedenle, li::before yapı, listenin her öğesinden önce bir miktar içeriğin eklenmesi gerektiğini söyler (örnek 2).
Örnek 2. Kendi numaralandırmanızı oluşturma
Li::önce ( içerik: sayaç(öğe) ") "; /* Rakamlara parantez ekle */ counter-increment: item; /* Sayaç adını ayarla */ )
Counter(item) değerine sahip içerik özelliği bir sayı verir; bu örnekte gösterildiği gibi bir parantez ekleyerek istenen numaralandırma türünü elde ederiz. Liste numarasını birer birer artırmak için karşı artış gereklidir. Her yerde item adlı aynı tanımlayıcının kullanıldığını unutmayın. Son kod örnek 3'te gösterilmiştir.
Örnek 3 - Liste görünümünü değiştirme
Listeler - İlk
- İkinci
- Üçüncü
- Dördüncü
Yukarıdaki şekilde, herhangi bir numaralandırılmış liste yapabilirsiniz, örneğin köşeli parantez içinde bir sayı alın, bu durumda stillerde sadece bir satır değişecektir.
İçerik: "[" sayaç(öğe) "] ";
Rus harfleriyle liste
Latin harfleriyle numaralandırılmış bir liste var, ancak liste için Rusça harfler yok. Yukarıdaki teknik kullanılarak yapay olarak eklenebilirler. Numaralandırma stiller üzerinden yapıldığından listenin kendisi orijinal kalır, ona sadece seçilen sınıf eklenir, hadi kiril diyelim (örnek 4).
Örnek 4. Liste oluşturmak için kod
- Bir
- İki
- Üç
Harfler, ::before sözde öğesi ve content özelliği kullanılarak eklenir. Her satırın kendi harfi olması gerektiğinden, :nth-child(1) sözde sınıfını kullanacağız, harfin numarası parantez içinde yazılmıştır. İlk harf elbette A, ikincisi B, üçüncüsü C, vb. Bu setin tamamı li seçiciye aşağıdaki gibi eklenir (örnek 5).
Örnek 5 :nth-child Sözde Sınıfı Kullanma
Kiril li:nth-child(1)::before ( içerik: "a)"; ) .cyrilic li:nth-child(2)::before ( içerik: "b)"; ) .cyrilic li:nth-child(3)::before ( içerik: "to)"; )
Bu örnekte, her harfi bir parantez takip etmektedir, tüm harfler küçük harftir. Kendi tür liste numaralandırmanızı tanımlayabilirsiniz, örneğin noktalı büyük harfler, bir veya iki parantez veya yalnızca harfler içerebilir. Standart numaralandırmanın aksine burada istediğimizi yapmakta özgürüz. Neredeyse tüm durumlar için on harflik bir liste yeterli olmalıdır, ancak bu birdenbire yeterli olmazsa, listemizi en azından Rus alfabesinin tüm harflerini içerecek şekilde genişletmemizi hiçbir şey engelleyemez.
Son olarak harflerin hizalamasını ve konumunu ayarlıyoruz, isteğe bağlı olarak yazı tipi boyutunu, rengini ve diğer parametreleri belirliyoruz (örnek 6).
Örnek 6. Rus harfli liste
Liste - borsch
- turna pirzola
- Kulebyak
- Ekşi krema içinde mantar
- havyar ile krep
- Kvas
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 3.
Pratik bir bakış açısından, madde işaretli bir listenin öğelerini gösterme ilkeleri, numaralı bir listeye benzer şekilde uygulanabilir. Ancak bir numaralandırma ile uğraştığımıza göre, daha sonra tartışılacak olan bazı özellikler var.
Liste numaralandırma
Listeyi herhangi bir sayı ile başlatmaya izin verilir; elemanın start özelliği bu amaç için kullanılır
- veya öğedeki değer
Aşağıda kodun kısaltılmış versiyonları ve her durumda olabilecek numaralandırma türü bulunmaktadır.
Liste görünümü:
Liste görünümü:
Latin alfabesinin küçük harfleriyle numaralandırma:
Liste görünümü:
Liste görünümü:
Liste görünümü:
HTML'deki tanımların listesi.
Tanım listeleri, özel bir liste türüdür. Listedeki her bir öğenin, anlamını ortaya çıkaran bir terim ve metin olmak üzere iki öğeden oluşması bakımından farklılık gösterirler. Bu listeler etiketler kullanılarak oluşturulur
Disk değeri varsayılan olarak kullanılır.
Daire işaretli madde işaretli liste oluşturmaya bir örnek:
Sonuç olarak, liste aşağıdaki formu alacaktır:
Kare işaretleyicilerle madde işaretli bir liste oluşturma:
Liste şöyle görünecektir:
type özelliği, bir etiketten daha fazlasına uygulanabilir
- , aynı zamanda etikete
Kod şöyle görünür:
Etiket işaretçilerini değiştirme
- CSS ile
Bir etiket tarafından oluşturulan madde işaretli liste öğeleri
- , keyfi görüntülerle işaretlenebilir. İşaret türünü değiştirmek için CSS kullanılır. Örneğin
Ve sayfada böyle görünüyor:
CSS yardımıyla diğer işaretleyici gösterim türlerini belirleyebiliriz. Ancak, etiket için herhangi bir stil belirlerken şunu hatırlamanız gerekir.
- , listenin tüm öğelerine yayılır.
HTML'de iki tür liste vardır: numaralı ve numarasız. Yaratılışları neredeyse aynı. Etiketler bile bir karaktere göre farklılık gösterir. Ayrıca hem numaralı hem de madde işaretli olanları içerebilecek şekilde oluşturabilirsiniz.
Bu listeler istediğiniz şekilde dönüştürülebilir. Her şey hayal gücünüze bağlı. İlk olarak, Word editöründe olduğu gibi standart listelere bakacağız ve daha sonra onları tanınmayacak şekilde geliştirip tasarlayacağız.
Numaralandırılmış Liste HTML'si
Aşağıdaki etiketler kullanılarak normal numaralı bir tane oluşturulabilir:
Basit listeler şöyle görünür
Standartlara göre, her liste öğesi bir açılış ve kapanış li etiketi içinde olmalıdır. Ancak bir kapanış etiketi koymazsanız sonuç tamamen aynı olacaktır. İşlemci çok akıllı. Liste dönüşümü sırasında açılış etiketlerini ayrıştırır. yenisini görürse
Böylece listeler aşağıda gösterildiği gibi yapılabilir.
Ancak profesyonellerin bakış açısından bu yanlıştır.
Sırasız (veya madde işaretli) listeler tam olarak aynı şekilde oluşturulur, ancak ol etiketi yerine ul yazılır.
İçinde sayı veya harf yok - sadece işaretçi olarak adlandırılan çeşitli semboller.
HTML çok düzeyli numaralı liste
Birçok kullanıcı bu olasılık ile ilgileniyor. Bu nedenle, herhangi bir numaralı HTML listesinin çok seviyeli yapılabileceğine dikkat edilmelidir. Ek seviyeler aynı veya işaretli olabilir.
Yukarıdaki örnekte gösterilen listeyi oluşturmak için aşağıdakileri yazmanız gerekmektedir.
Bu kodda, ilk örneklerden farklı olarak type özniteliğinin eklendiğini unutmayın. Bu sayede hem numaralı hem de madde işaretli listeler için sıralama türünü belirleyebilirsiniz.
Numaralandırılmış için alfabeyi veya sayı türünü ve diğer durumlarda - işaretleyici türünü belirtiriz.
Özel bir HTML etiketi kullanırsanız, numaralandırılmış liste istediğiniz gibi olabilir.
type niteliğini tablodan herhangi bir değerle belirtebilirsiniz. Veya css stil sınıfında, istenen sıralama türüyle liste stili türünü belirtin.
Değerlerin çevirisi oldukça basittir. Yeterli temel İngilizce bilgisi. Ancak "daire", "kare" vb. kelimeleri çeviremeseniz bile type özniteliğinde bu değerleri belirtirken sonucun ne olacağını görsel olarak anlayabilirsiniz.
Numaralandırılmış listeler için aşağıdaki seçenekleri kullanın:
Varsayılan her zaman içeren bir listedir.Yani, herhangi bir şey belirtmezseniz, bu type="1" ile eşdeğerdir.
Ayrıca numaralandırılmış listeler istenilen herhangi bir pozisyondan başlayabilir. Varsayılan olarak çıktı 1'den gelir. Ama dilerseniz en az yüz ile başlayabilirsiniz. Bunu yapmak için, herhangi bir değerle start niteliğini belirtmeniz gerekir.
Ek olarak, sonuç ters sırada çıkarılabilir. Bunu yapmak için ters yazmanız gerekir.
Liste tasarımı
Numaralandırılmış bir HTML listesi o kadar güzel tasarlanabilir ki, bunun Photoshop'ta yapılmış bir resim değil, normal bir liste olduğunu hemen fark etmeyebilirsiniz.
İşte güzel liste örnekleri.
Örnekten de görebileceğiniz gibi, numaralandırmanın görünümünü ve elemanların kendilerini değiştirebilirsiniz.
Bunun gibi düzenli bir liste oluşturabilirsiniz.
CSS stillerinde ol etiketleri için tasarımı belirtmeniz gerekir. Lütfen bu durumda ayarların, bu stil dosyasının kullanıldığı tüm sitenin tüm listelerine uygulanacağını unutmayın.
İlk önce yuvarlak liste tasarımlı seçeneği düşünün. Liste koduna dönün. Yuvarlak liste sınıfı burada belirtilir. Böyle bir güzelliği yapmak için kurcalamanız gereken bu sınıftır. Sınıfa istediğiniz ismi verebilirsiniz.
Şimdi kare tasarımı düşünün.
Stiller çok benzer. Aradaki fark, ilk durumda öğenin css yetenekleri kullanılarak yuvarlanmasıdır.
Profesyonel bir düzen tasarımcısı, tüm kullanıcıların modern bilgisayarları kullanmadığını tahmin etmeli ve anlamalıdır. Herkeste Windows 7, 8, 10 yüklü değil.Hâlâ Windows XP kullanan ve Internet Explorer tarayıcısının eski sürümlerini kullanan kullanıcıların yüzdesi var.
Kural olarak, öğelerdeki neredeyse tüm modern tasarım geliştirmeleri onlar tarafından desteklenmez. Kullanıcıya, sitenin tasarımı üzerinde hiç çalışılmamış gibi görünecektir. Her şeyin gittiğini. Elementler birbirinin içine girer. Bunu önlemek için tüm seçenekleri hesaplamanız gerekir.
Bazı web yöneticileri, günümüz pazarında pazar payları küçüldükçe küçülürken onlara göz yumar. Ancak bir profesyonel için her ziyaretçi, özellikle de ticari bir site ise önemlidir.
Herkes için uygun bir şey yapın veya tüm tarayıcı seçeneklerini değerlendirin.
- 2 oy ile 5 üzerinden 4.5
Çoğu zaman, sitedeki belirli bilgiler listeler şeklinde sunulmalıdır.
Listeler, çeşitli bilgileri organize etmenize ve sistematize etmenize ve bunları uygun bir biçimde ziyaretçiye sunmanıza olanak tanır.
HTML'deki listeler üç çeşittir: madde işaretli listeler, numaralandırılmış listeler ve tanım listeleri. Bunları sırayla nasıl oluşturacağımızı görelim.
İşaretli liste.
Bu liste türü en yaygın kullanılanıdır. HTML'de madde işaretli liste, etiketler kullanılarak oluşturulur
Etiket sözdizimi
Bu kod, sitede madde işaretli bir listeye çevrilir:
Etiket
- bir kapanış etiketinin kullanılmasını gerektirir
Listenin öğelerini oluşturmak için bir çift etiketi kullanılır. Açılış ve kapanış etiketleri arasında madde işaretli listenin içeriği olan tek tek kelimeler, ifadeler, paragraflar, resimler, kod parçaları ve çok daha fazlası bulunur.
Madde işaretli bir listenin içeriği ne olabilir?Bu, tek sözcükler, tümcecikler ve paragraflar, resimler, iç içe listeler, php kodu parçaları ve basit etiketleme gerektiren çok daha fazlası dahil olmak üzere çeşitli metinler olabilir.
Madde işaretli listedeki her öğe, varsayılan olarak 40 piksel sağa girintilidir. CSS stillerini kullanarak bu listenin görüntüsünü uygun gördüğümüz şekilde değiştirebiliriz. Etiket
- blok düzeyindedir, bu nedenle ekranın kenarı, tablo çerçevesi veya diğer sayfa öğeleriyle sınırlanan, kullanabileceği tüm alanı kaplar.
Liste içi eklere izin verilir
Örneğin
Etiket nitelikleri ve özellikleri
Yaygın etiket özelliği
- liste işaretçisinin nasıl görüneceğini gösteren type özelliğidir. Aşağıdaki değerleri alabilir
1. type="disc" - içi dolu daire şeklinde bir işaretçi (bu değer varsayılandır). Disk örneği biraz daha yüksekti.
2. type="circle" - şeffaf daire işaretçisi
Örneğin:
3. type="square" - kare işaretleyici
Örneğin:
Ve işte sayfada göründüğü gibi:
CSS'de, işaretçi türü, liste stili türü özniteliği kullanılarak belirtilir:
Liste stili türünün hangi değerleri alabileceğini düşünün:
Not 2
Nitelik, etiketin kendisi olarak atanabilir
- , ve etiketler
Altın Numaralar Güzel bir telefon numarası nasıl satılır
Kripto para madenciliği: basit kelimelerle nedir
En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme
Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin
Yandex tarayıcısının mobil versiyonu