Ul li CSS listelerinin şık stiline örnekler. Sıralı listelerde satır numaralarının (rakamların) stilini belirleme

Anlam ve uygulama

Numaralı (sıralı) bir liste, belirli bir sırayla takip eden öğeler içindir. Numaralı bir liste bir etiketle başlar

(İngilizce için kısa sıralı Liste - Sıralı Liste). Her liste öğesi bir etiketle başlar
1. (liste öğesi).

   Tarayıcı desteği

   Öznitelik			Opera		IExplorer	Kenar
   başla, yaz	Evet	Evet	Evet	Evet	Evet	Evet
   ters	Evet	Evet	Evet	Evet	Hayır	Hayır

   Öznitellikler

   Öznitelik	Değer	Açıklama
   kompakt	kompakt	HTML5'te desteklenmez. Listenin normal boyuttan daha küçük olması gerektiğini belirtir (satır yüksekliği:% 80). Bu özellik yerine CSS kullanın.
   	ters	Numaralı (sıralı) bir listedeki sıranın azalan olması gerektiğini belirtir. Öznitelik, Internet Explorer ve Edge tarayıcıları tarafından desteklenmez.
   başlat	numara	Sıralı (sıralı) bir listenin başlangıç \u200b\u200bdeğerini belirler. Değerler tam sayı olmalıdır, negatif değerlere izin verilir. Harflerle kullanıldığında (tür \u003d "A" ve tür \u003d "a"), öznitelik değerinde belirtilen sayı, alfabedeki harfin sıra numarasıdır. Örneğin, start \u003d "4" harfle eşleşir "D" ve liste onunla başlayacak. Start \u003d "27" değerinin kullanılması sayacı temizler ve liste iki basamaklı olur ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...).
   tip	1 (varsayılan) Geniş bir) a (küçük harf) Ben (büyük roma) i (küçük Roma)	Numaralı (sıralı) bir liste oluşturmada kullanılan madde işareti türünü belirler.

   Kullanım örneği

   1. İlk nokta İkinci nokta
   2. Üçüncü nokta

   Sayfada şöyle görünecek:

   1. İlk nokta.
   2. İkinci nokta.
   3. Üçüncü nokta.

   Listenin belirli bir sayıdan başlamasını istiyorsanız (1'den değil), bu durumda etiket için başlangıç \u200b\u200bniteliğini belirtmelisiniz.

   .

   Örneğin:

   Bir başka ilginç özellik de, alfabetik numaralandırma ("A" - büyük, "a" - küçük harf) veya Roma rakamlarından numaralandırma ("I" - büyük harf, "i" - küçük harf) belirlemenize olanak tanıyan türdür.

   Type özelliği için tüm olası değerleri gösteren bir örnek düşünün (varsayılandan farklı):

   >
   1. İlk nokta İkinci nokta
   2. Üçüncü nokta
   >
   1. İlk nokta İkinci nokta
   2. Üçüncü nokta
   >
   1. İlk nokta İkinci nokta
   2. Üçüncü nokta
   >
   1. İlk nokta İkinci nokta
   2. Üçüncü nokta

   Diğer numaralandırılmış listelerde (bir liste öğesi içinde) iç içe numaralandırılmış (sıralı) listeler oluşturmasına izin verildiğine dikkatinizi çekerim.

   3. ):
      1. İlk nokta
         1. İlk nokta İkinci nokta
         2. Üçüncü nokta
         İkinci nokta
         3. Üçüncü nokta

         Sayfada böyle görünecek.

         Html'nin başlangıcıyla ilgili sohbetimize devam edelim. Bu makalede, metinde paragraf, liste ve başlıkların nasıl oluşturulacağından bahsetmek istiyorum. Ve ayrıca tek etiketler hakkında
         ve

         ---

         .

         Bu serideki ilk dersi ve html öğrenmeye henüz aşina olmayanlar için giriş niteliğinde bir makaleyi okumanızı şiddetle tavsiye ederim.

         Şimdi etiketleri incelememize devam edeceğiz. Okuyucunun yukarıdaki makalelerin materyallerine zaten aşina olduğunu varsayacağım.

         Her zaman olduğu gibi, çalışma planı:

         1. Paragraflar
         2. Satır sonları
            
         3. Listeler ve liste öğeleri
         4. Başlıklar
         5. Yatay cetveller

            ---

         Paragraflar

         Metin neredeyse her zaman paragraflardan oluşur. Paragraf, tam bir düşünce taşıyan bir metin unsurudur.

         Html'de, başlıktan da anlaşılacağı gibi bir paragraf belirlenir. "P" harfi, sadece "paragraf" anlamına gelen "paragraf" kelimesinden alınmıştır.

         Bir örnek ele alalım:

         İlk paragrafın metni. Düşünceyi içerir. Ama sonra düşünce sona erdi.
         

         
         

         Başka bir düşünce çoktan başladı ve onu başka bir paragrafta yazıyoruz.
         

         Gördüğünüz gibi paragrafların uygulanması çok basittir ve özel yorumlar gerektirmez. Bu koda bir tarayıcıda bakarsak, aralarında bir satır boş olan iki satır göreceğiz. Rusça metinlerde, bir paragrafı boş bir satırla değil, ilk satırı sağa kaydırarak ayırmak gelenekseldir. Ancak İnternette bu tür biçimlendirme sıklıkla kullanılır, bu nedenle genellikle Rusça metinlerde de bırakılır. Ancak, bu davranış size uymuyorsa, CSS kullanarak değiştirebilirsiniz.

         Satır sonları
         

         Bazen bir satırı paragrafı kapatmadan, düşünceyi bitirmeden çevirmeniz gerekir. Yani, sadece yeni bir satıra gidin. Bunun için tek bir etiket var
         ... İşte uygulamasına bir örnek:

         Rüzgar neşeyle yürüyor
         
         Ve tekne ısrar ediyor
         
         Dalgaların içinde kendine koşar
         Yelkenler kaldırılmış halde.
         

         A.S.'nin bir şiirinden bu bölüm. Puşkin, etiketin eylemini göstermemize yardımcı oldu
         ... Satır sonlarını yerleştirdiğimiz için değil, etiket yerleştirdiğimiz için satırların yeni bir satıra sarıldığını göstermek için kasıtlı olarak bu dördün son iki satırını bir kod satırına yerleştirdim.
         ... Bu etiket çok basittir ve ayrıntılı açıklamaya ihtiyaç duymaz, bu nedenle tartışmamızı burada bitireceğiz.

         Listeler,

         ve öğeleri listeleyin

         Bazen metinde bir şeyler listelemeniz gerekir. Bu amaçla üç etiket kullanılır: ul, ol, li. Tüm bu etiketler kapsayıcı etiketlerdir, ancak etiket her zaman kapsayıcılardan birinde veya bunların dışında bir anlam ifade etmez. Ul kapsayıcı, listelenen öğelerin sırasını önemsemediğimizde kullanılır ve gittikleri sıraya odaklanmak istemiyoruz. Öte yandan ol etiketi, her satırı otomatik olarak numaralandırarak öğelerin sırasını vurgular. Bir örnek ele alalım:

         
         
         • Bulka
         
         
         • Turta
         
         
         • Somun
         
         
         • Turta
         
         

         Tarayıcı ekranında bu kod şöyle görünecektir:

         • Bulka
         • Turta
         • Somun
         • Turta

         Ul etiketini ol etiketiyle değiştirirsek, numaralı bir liste elde ederiz:

         
         
         1. Bulka
         
         
         2. Turta
         
         
         3. Somun
         
         
         4. Turta
         
         

         Şimdi şuna benziyor:

         1. Bulka
         2. Turta
         3. Somun
         4. Turta

         Kimse bir listeyi diğerinin içine yerleştirmeyi, alt listelerle iç içe geçmiş listeler oluşturmayı yasaklamaz:

         
         Araçlar:
         
         • Testere
         
         
         • Tornavida
           
           
           
           1. Düz
           
           
           2. Çapraz
           
           
           
           
         
         
         • Matkap
         
         

         Kullanmaya alışmak için bu listeleri biraz denemelisiniz. Başka tür listeler var, ancak nadiren kullanılıyor, bu yüzden şimdi bunun hakkında konuşmayacağım. Belki başka bir makalede.

         Tabii ki, her şey gibi, bu öğelerin görünümü de CSS ile tanınmayacak şekilde değiştirilebilir.

         Başlıklar

         Elbette paragraflar belgelerin yapılandırılmasına yardımcı olur. Ancak büyük bir metni daha küçük mantıksal bölümlere ayırmak için her birine başlık ekleyebilirsiniz. Her bölüm, kendi alt düzey başlıklarıyla vb. Daha fazla alt bölüm içerebilir. Başlığı ayarlamak için etiketleri kullanın , burada "x" 1'den 6'ya kadar bir sayıdır. Sayı ne kadar büyükse, başlık o kadar düşük olur. Yani, üst düzey başlık h1 olarak adlandırılacak ve en alttaki başlık h6 olacaktır. Varsayılan olarak, bu başlıklardaki metin büyük, girintili yazı tipinde görüntülenir. Bu metin tüm satırda görüntülenir, yani hx etiketleri blok tabanlıdır. H1 etiketi en büyük yazı tipine ve h6 etiketi en küçük yazı tipine sahiptir. Kural olarak, bir sayfada bir, en fazla iki üst düzey h1 etiketi vardır. Seviye azaldıkça etiket sayısı artar. Ancak bir web yöneticisi nadiren metni 5 veya 6 seviyeli başlıklara ihtiyaç duyacak şekilde bölebilir. 4. seviye bile nadiren kullanılır.

         Daha az konuş, daha çok çalış!

         Listeler numaralandırılmış veya numarasız olabilir.

         Numaralı listeler koda göre çıkarılır:

         Sayılarla liste
         1. paragraf 1
         2. 2. nokta
         3. 3. nokta

         Numaralandırılmamış listeler koda göre görüntülenir:

         Onay işaretleri veya başka semboller içeren liste
         • paragraf 1
         • paragraf 1
         • paragraf 1

         Herhangi bir listedeki her öğe bir li etiketi içine alınır. Tüm liste öğeleri tek bir ortak ul veya ol etiketi içine yerleştirilmiştir. Bu etiketlerin stilleri stil sayfasında yazılmıştır.

         Her etiket için belirli görsel stiller atanır. Metindeki girintileri gösterirler.

         Numaralandırılmış bir liste için, her öğe için numaralandırma stilleri belirlenir.

         Standart Arap rakamları, ondalık değerle tanımlanır.

         liste stili türü: ondalık; /*Arap rakamları*/

         Madde işaretli bir liste için, karakter stilini (kareler veya daireler) belirtirsiniz.

         liste stili türü: daire; / * çevreler * /
         liste stili türü: kare; / * kareler * /

         Her menü öğesine bir görüntü atanabilir.

         liste stili resim: url ("resmin yolu");

         Genellikle şablonlarda, numaralandırılmış bir liste basit sayılarla biçimlendirilir ve numaralandırılmaz - siyah kareler ve dairelerle. Sıkıcı ve anlamsız. Bunu düzeltelim.
         

         Twenty Eleven şablonundaki liste stilleri nerede?

         Stil sayfası style.css dosyasını açın. / * Metin öğeleri * / adlı bölümü bulun

         Standart kod şuna benzer:

         Numaralı bir listeyi nasıl düzenlerim?

         Arka plan kullanılarak numaralandırılmış liste

         Bu güzel numaralandırılmış liste tasarımına bakın.

         Sevmek? Hadi yeniden yapalım.

         Ol etiketi için stilleri bulun. Yeni mülkler ekleyin.

         Ol (dolgu: 0px 0 0 20px; kenar boşluğu: 0.5em 0 1.571em 1.9em; renk: # 2E2E2E; liste stili türü: yok; yazı tipi: 15px / 17px Verdana, Arial, Helvetica, sans-serif; z-endeksi : 2; counter-reset: point;) ol li (margin-bottom: 4px; line-height: 1.6; color: # 2E2E2E; pozisyon: göreli;) ol li: before (margin-bottom: 4px; counter-artış: nokta 1; satır yüksekliği: 1.6; yükseklik: 24px; kenar boşluğu: -36px; sol: 0px; genişlik: 24px; kenar boşluğu: 1px; arka plan: # BDC3C7; içerik: sayaç (nokta); metin hizalama: merkez; konum: mutlak; yazı tipi ağırlığı: kalın;)

         Tasarımınız için neyi değiştirmeniz gerektiğini anlamanız için bu kodu raflardan aşağıya indirelim.

         liste stili türü: yok; - standart basamakların çıktısını devre dışı bırakır
         karşı sıfırlama: nokta; - numaralandırma sayacı için bir değişken ayarlar
         konum: göreceli; - noktaların yakınında numaralandırılan yerler

         before ol li etiketi için sözde bir öğedir. Aşağıdaki stillere sahiptir:
         içerik: sayaç (puan); - bir değişkenin değerini gösterir
         sayaç artışı: nokta 1; - sayacı 1 artırır
         konum: mutlak;
         arka plan: # BDC3C7; - sayılar için arka plan (arka plan renkli veya güzel bir simge ile ayarlanabilir
         marj - marjlar
         dolgu - dolgu
         renk - eleman metninin rengi
         arka plan - arka plan
         metin hizalama - metin hizalama
         yazı tipi ağırlığı - yazı tipinin ağırlığı (ağırlığı)

         Stillerinizde herhangi bir rengi, hizalamayı, yazı tipi boyutunu ve girintileri ayarlayabilirsiniz.

         Her öğe için benzersiz bir resim içeren numaralı liste

         Kadınlar için bir sitede çok çekici numaralandırılmış listeler var.

         Bu nasıl uygulanır? Aşağıdaki koda bir göz atalım:

         / * birinci numara * / ol li: birinci-çocuk (liste-stili-resim: url (1 numaralı görüntünün yolu);) / * ikinci numara * / ol li: nth-çocuk (2n) (liste stili- image: url (2 numaralı resmin yolu);) / * üçüncü numara * / ol li: nth-child (3n) (liste stili-resim: url (3 numaralı resmin yolu);) / * dördüncü sayı * / ol li: nth-child (4n) (list-style-image: url (4 numaralı görüntünün yolu);) / * Sonra, sadece aşağıdaki öğe numaraları için aynı şekilde yazıyoruz * /

         Böyle numaralandırılmış bir listenin kodunda, tüm öğe numaralarını listelemeniz ve her birine benzersiz bir simge atamanız gerekir.

         Makalelerdeki listelerde 20'ye kadar numaralandırılmış öğe kullanıyorsanız, nth-child (An) sözde sınıfını 20 kez kaydetmeniz gerekir. Böylece stillerdeki sonuncusu nth-child (20n) sözde sınıftır.

         Numaralandırılmış listenin (ol li etiketleri) görünümünü tanımlayan stil sayfasındaki satırları bulun.

         Birinci çocuk sözde sınıfını buna ekleyin. Bir kez kopyalayıp yapıştırın, ardından bu özelliği nth-child (An) olarak değiştirin ve simgenizin sahip olmasını istediğiniz kadar sayıyı kopyalayın. Ürün numaralarını ekleyin.

         Her numara için, kendi benzersiz simgesi olan bir liste stili resim özelliği ekleyin.

         Sitedeki simgeler noktalardan uzakta bulunuyorsa veya bunlarla örtüşüyorsa, dijital simgelerin veya noktaların metninin hizalamasını ve girintilerini düzenlemeniz gerekir.
         

         Madde işaretli (numarasız) liste nasıl düzenlenir?

         Alternatif simgeler içeren Ul li madde işaretli liste

         Bu madde işaretli listeyi gerçekten beğendim.

         Ul (padding: 11px 0 5px 0;) ul li (padding-left: 32px; margin-bottom: 10px; yazı tipi: normal 15px Verdana, sans-serif; renk: # 2E2E2E; satır yüksekliği: 1.6; kenarlık-alt: 1px kesikli #ccc; padding-bottom: 10px;) ul li: before (içerik: ""; konum: mutlak; genişlik: 27px; yükseklik: 24px; margin-left: -35px; margin-top: -2px; arka plan: url ("images / sprite.jpg") 0px 2px no-rep; list-style-type: circle;) ul li: nth-child (2n): before (content: ""; konum: mutlak; genişlik: 27px; yükseklik: 43px; margin-left: -35px; margin-top: -2px; arka plan: url ("images / sprite.jpg") 0px -17px no-rep; liste-stili-türü: daire;)

         Standart liste stili tür stili yerine, "simgeye giden yol" özelliğini - liste stili resim: url'yi atayabilirsiniz. Ancak daha sonra, dış sol kenar boşluğunu sitenin kenarlarından kaydetmeniz gerekir - bu olmadan simgeler görüntülenmez, içerik alanının ötesine geçerler.

         Deney için girintiler atayabilirsiniz:

         Ul li (liste stili resim: url (resimler / radyo.png); kenar boşluğu: 30px;)

         Simgelerin değişimi nth-child (An) özelliği ile ayarlanabilir. Yukarıdaki örnek, önceki sözde öğeyi kullanır.

         Kod, bir sözde sınıf nth-child (2n) içerir. Değeri 2'dir. Her çift öğenin farklı bir ikonu olduğu ortaya çıkar. 2n yerine 2n + 1 yazarsanız, diğer simge tek noktalara düşecektir.

         Listedeki her bir öğe için bir alt çizgi belirleyebilirsiniz. Gösterilen örnekte, öğelerin altı noktalı çizgilerle çizilmiştir.

         Ayrıca, her öğeye çerçeveler, arka plan, simgeler atanabilir. Sadece çok akıllı olma. Görevimiz, süslü bir tasarımla herkesi yenmek değil, içerik algısının kalitesini iyileştirmektir.
         

         Bir sayfada farklı tasarıma sahip birden çok liste nasıl görüntülenir?

         Bazen farklı stillere sahip birkaç liste yerleştirmeniz gerekir.

         Ortak stiller atarsanız, aynı görünüm tüm listelere atanacaktır. Ol veya ul etiketine ayrı bir kimlik atarsanız ve html makale düzenleme modunda kaydederseniz farklı listeler görüntülenebilir. Peki, bu kimliğin stil sayfasında, ayrı stilleri kaydetmeniz gerekiyor.

         Örneğin, içerik için güzel bir düzen:

         HTML'de listeyi şöyle yazarsınız:

         İçerik
         1. paragraf 1
         2. 2. nokta
         3. 3. nokta

         CSS'de aşağıdaki gibi stiller yazarsınız:

         Ol # sod (dolgu: 0px 20px 10px 51px; kenar boşluğu: 0.5em 0 0em 1em; renk: # 2E2E2E; liste stili türü: yok; arka plan: # f1f4f5; kenarlık-sol: # BDC3C7 4px katı; ekran: satır içi- block;) ol # sod li () ol # sod li: before (yazı tipi ağırlığı: normal! önemli)

         Yeni stil ana etiket etiketinden farklıdır: arka plan, görüntüleme stili, içeriğin solundaki satır.

         Metinde farklı tasarıma sahip birkaç liste kullanarak, bilgilerin sunumunu daha da ilginç hale getireceksiniz. Herhangi bir öğeyi listelerken, bazı simgeleri ve eylemleri listelerken diğerlerini ayarlayabilirsiniz. Burada tasarım sadece sizin hayal gücünüzle sınırlıdır.

         Bu yöntemler aynı zamanda menü öğelerinin, kategorilerin ve sitenin diğer öğelerinin tasarımında da geçerlidir.
         

         Bir içerik listesinde bağlantı bağlantılarını nasıl oluştururum?

         Bunları HTML kodunda nasıl yazabilirim? Bir kod parçası bağlantının çapasını çerçeveler ve başka bir kod parçası, bağlantıya tıklandığında bırakılmamız gereken yerin yanına yerleştirilir.

         İçerik
         1. Başlık 1
         2. Başlık 2
         3. Başlık 3

         Ve makalenin metninde şöyle yazmanız gerekiyor:

         Başlık 1 ... Başlık 2 ... Başlık 3 ...

         Belki daha deneyimli web yöneticileri beni bir konuda düzeltir. Ben sadece pratikte denediğimi kendim tavsiye ederim.

         Hala sorularınız varsa, yorumlarda görmekten memnuniyet duyarım.

         Ageeva Veronika.

         Belki şunlarla da ilgileneceksiniz:

         Varsayılan ul ve li listelerini değiştirmeye karar verirseniz, bu konu ilginizi çekecektir. Buradan beri birkaç orijinal çözüm bulacaksınız. Bu, listelerin tasarımı için standart görünümü CSS stilinin gittiği benzersiz bir görünümle değiştirmenize kesinlikle yardımcı olacaktır. Artı, her şeyde yalnızca bir sınıf kullanacağımızdır, bu da görünümü kökten değiştirecektir. Bu parametrelere ek olarak, listenin hangi numaradan başlaması gerektiğini belirtebilirsiniz, burada her şeyi kendiniz yapabilirsiniz. Numaralı listeler için ilk varsayılan, ilk veya A harfindedir.

         Temel bilgilere dayanarak, şimdi tasarımın çeşitli bölümlerine yapı ve anlam sağlamak için kullanılan öğelere daha yakından bakacağız. Kimse bilmiyorsa, ul ve li düz metinden çok daha iyi seçeneklerdir, çünkü metin özellikle mobil cihazlarda kaydırıldığında mükemmel bir şekilde girintilidir ve işaretleyicinin etrafına sarılmaz.

         Listeler, okunması kolay ve güzel göründükleri için sayfalarda bilgi sunmanın harika bir yolu olarak kabul edilir. Pek çok insan madde işaretlerinin küçük resimler olduğunu düşünür, ancak gerçekte hepsi oldukça basit HTML koduyla oluşturulur. İsterseniz farklı türde listeleri iç içe yerleştirebilirsiniz, yalnızca doğru şekilde kapatmayı unutmayın. Tüm bu liste komutlarında istediğiniz metinle oynayabilirsiniz.

         Ayrıca listelerin başlangıçta birkaç öğe içerdiğini de bilmeniz gerekir:

         1 ... Düzensiz bilgi.
         2 ... Sıralı bilgiler.
         3 ... Tanımlar.

         Kuruluma başlarken:

         1. Seçenek:

         
         
         • Liste öğesi
         
         
         • Benzersiz liste
         
         
         • Orijinal Listeler
         
         
         • ZORNET.RU - Webmaster için
         
         
         • Başka bir liste
         
         
         
         CSS

         Ksangelopan (
         kenar boşluğu: 19px 0 0;
         dolgu: 0;
         liste stili: yok;
         karşı sıfırlama: li;
         }
         .ksangelopan li (
         kenarlık: 2px katı # 3575ad;
         arkaplan: # d7dee4;
         konum: göreceli;
         kenar boşluğu alt: 17px;
         dolgu: 15px 9px;
         }
         .ksangelopan li: vurgulu (
         z-endeksi: 1;
         }
         .ksangelopan li: önce (
         kenarlık: 2px katı # 2270b3;
         konum: mutlak;
         üst: -14px;
         dolgu: 3px 9px;
         yazı tipi boyutu: 11px;
         yazı tipi ağırlığı: kalın;
         renk: # 246eaf;
         arka plan: # f2f4f7;
         karşı artış: li;
         içerik: sayaç (li);
         -webkit geçiş süresi: 0.4s;
         geçiş süresi: 0.4s;
         }
         .ksangelopan li: hover: önce (
         arka plan: # 2672b3;
         renk: # f7f9fb;
         -webkit-dönüşümü: translate (-11px, 0);
         -ms-dönüşümü: translate (-11px, 0);
         -o-dönüşümü: translate (-11px, 0);
         dönüştürme: translate (-11px, 0);
         }
         .ksangelopan li: after (
         içerik: "";
         konum: mutlak;
         geçiş süresi: 0.3s;
         -webkit-geçiş özelliği: genişlik;
         geçiş özelliği: genişlik;
         z-endeksi: -1;
         arka plan: #FFF;
         yükseklik:% 100;
         sol: 0;
         üst: 0;
         genişlik: 0;
         }
         .ksangelopan li: hover: sonra (
         genişlik:% 100;
         }

         
         Kurulumun tamamı budur.

         2 İkinci seçenek:

         

         
         
         • Liste öğesi
         
         
         • Benzersiz liste
         
         
         • Orijinal Listeler
         
         
         • ZORNET.RU - Webmaster için
         
         
         • Başka bir liste
         
         
         
         CSS

         Beleduzlopamges (
         kenar boşluğu alt: 8px;
         dolgu: 0;
         liste stili: yok;
         karşı sıfırlama: li;
         }
         .beleduzlopamges li (
         konum: göreceli;
         kenarlık: 2px katı # 195588;
         arkaplan: # eff3f7;
         dolgu: 15px 19px 15px 27px;
         kenar boşluğu: 12px 0 12px 40px;
         -webkit geçiş süresi: 0.3s;
         geçiş süresi: 0.3s;
         }
         .beleduzlopamges li: vurgulu (
         arka plan: #FFF;
         }
         .beleduzlopamges li: önce (
         satır yüksekliği: 32px;
         konum: mutlak;
         üst: 4px;
         sol: -39 piksel;
         genişlik: 39px;
         metin hizalama: merkez;
         yazı tipi boyutu: 16px;
         yazı tipi ağırlığı: kalın;
         renk: # f9f5f5;
         arka plan: # 275b88;
         karşı artış: li;
         içerik: sayaç (li);
         geçiş süresi: 0.2s;
         }
         .beleduzlopamges li: hover: önce (
         genişlik: 46px;
         }
         .beleduzlopamges li: after (
         konum: mutlak;
         sol: 0;
         üst: 4px;
         içerik: "";
         yükseklik: 0;
         genişlik: 0;
         border: 16px katı şeffaf;
         kenarlık-sol-renk: # 275b88;
         -webkit geçiş süresi: 0.2s;
         geçiş süresi: 0.2s;
         }
         .beleduzlopamges li: hover: after (
         kenar-sol: 6px;
         }

         
         Merkez ölçek, sitenin ana stiline uyacak şekilde bağımsız olarak ayarlanabilir.

         3 Üçüncü seçenek:

         

         
         
         • UCoz için komut dosyaları
         
         
         • UCoz için şablonlar
         
         
         • Web sitesi tasarımı
         
         
         • Site için stiller
         
         
         • CSS stili
         
         
         
         CSS

         Nizualisanelag (
         dolgu: 0;
         liste stili: yok;
         karşı sıfırlama: li;
         }
         .nizualisanelag li (
         konum: göreceli;
         dolgu: 9px 17px 17px 25px;
         kenar sol: 39px;
         geçiş süresi: 0.2s;
         imleç: işaretçi;
         yazı tipi ağırlığı: kalın;
         renk: # 343638;
         }
         .nizualisanelag li: önce (
         border: 3px katı şeffaf;
         satır yüksekliği: 35px;
         konum: mutlak;
         üst: 0;
         sol: -29px;
         genişlik: 41px;
         metin hizalama: merkez;
         yazı tipi boyutu: 14px;
         yazı tipi ağırlığı: kalın;
         renk: # 619dce;
         karşı artış: li;
         içerik: sayaç (li);
         geçiş süresi: 0.3s;
         
         kutu boyutlandırma: border-box;
         }
         .nizualisanelag li: hover: önce (
         renk: # 337AB7;
         }
         .nizualisanelag li: after (
         konum: mutlak;
         üst: 0;
         sol: -29px;
         genişlik: 41px;
         yükseklik: 41px;
         border: 5px katı # 468bd0;
         kenarlık yarıçapı:% 50;
         içerik: "";
         opaklık: 0.5;
         -webkit-box-boyutlandırma: border-box;
         -moz-box-boyutlandırma: border-box;
         kutu boyutlandırma: border-box;
         }
         .nizualisanelag li: hover: sonra (
         animasyon: 500ms kolay giriş-çıkış 0s sıçramaIn;
         opaklık: 1;
         }

         @keyframes bounceIn (
         0% {
         opaklık: 0;
         dönüşümü: scale3d (.3, .3, .3);
         }
         20% {
         dönüşümü: scale3d (1.3, 1.3, 1.3);
         }
         40% {
         dönüşümü: scale3d (.9, .9, .9);
         }
         60% {
         opaklık: 1;
         dönüşümü: scale3d (1.03, 1.03, 1.03);
         }
         80% {
         dönüşümü: scale3d (.97, .97, .97);
         }
         için (
         opaklık: 1;
         dönüşümü: scale3d (1, 1, 1);
         }
         }

         
         Güzel bir animasyonla birlikte gelir.

         4 Dördüncü seçenek:

         

         
         
         • Site için ilk öğe
         
         
         • Site için ikinci unsur
         
         
         • Site için üçüncü unsur
         
         
         • Site için dördüncü unsur
         
         
         • Site için beşinci unsur
         
         
         
         CSS

         Dolgu: 0;
         liste stili: yok;
         }
         .kudezamuden li (
         dolgu: 6px;
         }
         .kudezamuden li: önce (
         sağ dolgu: 11px;
         yazı tipi ağırlığı: kalın;
         renk: # 4979a0;
         içerik: "\\ 2606";
         geçiş süresi: 0.4s;
         }
         .kudezamuden li: hover: önce (
         renk: # 235e90;
         içerik: "\\ 2605";
         }

         
         Önceki sürümlere benzer şekilde, yalnızca simgenin kendisi değiştirildi.

         Genel olarak, bu küçük bir liste seçkisidir, web yöneticisine portalda, görmek istediği şekilde daha fazla düzenleyebileceği güzel bir liste verecektir.

         Maddeleri madde işaretli liste yerine numaralı bir listeye koymanız gerekirse, burada sıralı HTML kullanılacaktır. Bu liste ol etiketi kullanılarak oluşturulur. Numaralandırma birden başlar ve li etiketiyle sonraki her sıralı liste öğesi için bir artar.

         Eleman

         (İngilizce "sırasız listeden" - "sırasız liste") sırasız (sırasız) bir liste oluşturur. Tipik olarak eleman
         bu listedeki öğelerin sırasının değiştirilmesinin listenin anlamını önemli ölçüde değiştirmediği bu tür listeleri oluşturmak için kullanılır.

         Etiket

         blok elemanlarına atıfta bulunur, bu nedenle kendisi için mevcut olan tüm genişliği kaplar ve yüksekliğin boyutu içerik miktarına bağlı olacaktır.

         Numaralandırılmış listeler için öğeler, etiketi kullanılarak tanımlanır

         • , metne ek olarak diğer HTML öğelerini (listeler, resimler, başlıklar, paragraflar vb.) içerebilir. Varsayılan olarak, madde işaretli listeler web sayfasında küçük bir siyah daire ile başlayan bir liste olarak görüntülenir. Tarayıcılar liste öğelerini görüntülerken sola küçük bir kenar boşluğu ekler.

           Not:Eğer

           CSS özelliği uygulanır, ardından öğeler
           • bu özellikleri miras alır.

             Tavsiye:İşaretçi türünü değiştirmek için, işaretçileri görüntülerle değiştirmek üzere liste stili türü CSS özelliğini veya liste stili görüntü özelliğini kullanın. Numaralı listeler oluşturmak için etiketini kullanın

             .

             Sözdizimi

             ...
             • ...
             ...

             Bitiş etiketi

             Gereklidir.

             Öznitellikler

             kompakt HTML5'te Kullanımdan Kaldırıldı Girintileri ve satır aralığını azaltır. HTML5 türü Liste işaretçisinin görünümünü ayarlar.

             Bu ürün için mevcut genel özellikler ve gelişmeler.

             Varsayılan stil

             Çoğu tarayıcı öğeyi oluşturacaktır

             aşağıdaki varsayılan CSS değerleriyle:

             Ul (ekran: blok; liste stili türü: disk; kenar boşluğu-üst: 1em; alt kenar boşluğu: 1 em; kenar boşluğu: 0; sağ kenar boşluğu: 0; dolgu sol: 40 piksel;)

             HTML 4.01 ve HTML5 arasındaki farklar

             Compact ve type öznitelikleri HTML5'te desteklenmez.

             Kullanım örneği:

             Sırasız HTML listesi:

             Örnek HTML:

             Kendin dene
             • Kahve
             • Çay
             • Kakao

             Teknik Özellikler

             Şartname	Durum
             WHATWG HTML Yaşam Standardı (WHATWG)	Yaşam standartı
             HTML 4.01 (W3C)	Öneri
             HTML5 (W3C)	Öneri
             HTML 5.1 (W3C)	Öneri

             Tarayıcı desteği

             Kendiniz deneyin - Örnekler

             Listenin 1 dışında bir sayı ile başlaması