Web Tasarımında HTML Listelerinin Mükemmel Kullanımı

İnternetin her yerinde iyi tasarlanmış listeleri bulabilirsiniz. Tasarımcılar onları yıllardır kullanıyor sayfa bilgisi ve düzenleri koordine etmek, ve günümüzün web'inde, web tasarımcılarının listeleri kullanma şeklindeki harika yaratıcılığı görebilirsiniz. Bunlar arasında gezinme menüleri, profil bağlantıları, arşivler, görevler / kontrol listeleri ve diğer birçok kullanım alanı bulunmaktadır.!

Bu yazıda, özellikle nasıl yapılacağına ilişkin tasarım önerileri ile çeşitli HTML listeleri tanıtacağım. listenize benzersiz bir kenar ekleyin. Ayrıca sizi harika liste tasarımlarına sahip birkaç web sitesi örneğinden geçireceğim ve sonunda güzel tasarlanmış HTML listelerine sahip web sitelerinin bir listesini alacaksınız. Düz görünüşlü listelerinizi nasıl eşsiz göstereceğiniz konusunda şüphe yok ve bugün bunlardan en iyi şekilde yararlanmaya başlayalım.!

Liste Öğeleri

Web tasarımcıları bir gruptan diğerine sürekli atlıyor, böylece web sitesi stillerinin zaman içinde değişmesine neden oluyor, ancak listeler zamana dayanıyor ve World Wide Web'in gelecekteki inovasyonunda çok iyi olabilir..

Örnekleri incelemeden önce, HTML listelerinde birkaç noktayı ele almak istiyorum. Kendi tasarım çalışmalarınızda kullanabileceğiniz birkaç farklı liste tipi vardır. Web tasarımcılarının çoğunluğu Sırasız Listeler ile açılan

etiketi, ancak iki tane daha az popüler varyasyon vardır: Sıralanan Listeler ve Veri tanımları. Aşağıda daha fazla ayrıntıya girdim.

Sırasız Listeler (

)

Muhtemelen HTML4 / HTML5 standartlarında en çok kullanılan unsurlardan biridir. Sırasız listeler, sıralı listeyle aynı şekilde veri gönderir; taraftaki herhangi bir sayısal işaretleyiciyi görmeyecek. Bunun yerine her maddeye bir küçük daire veya disk ve yeni bir çizgiye bölündü. Bu simge liste tarzı özelliğiyle de değiştirilebilir CSS’de bulundu.

Sırasız listenin örnek kodu aşağıdadır:

 
 
Madde 1
 
Madde 2
 
Öğe 3
 
 

Sıralanmamış listeler bina için mükemmel bir çözümdür gezinti bağlantıları. Kolayca yapabilirsiniz beri tüm listeleri herhangi bir liste öğesine yerleştir bu bir alt gezinti bağlantıları oluşturmak için basit bir konu yanı sıra. Liste stilini kaldırdıktan sonra boş bir öğe ile bırakılacaktır. Buradan sayfanızda blok öğeler olarak görünecek şekilde bağlantı linkleri düzenleyebilir, böylece bir gezinme menüsü tasarımını doldurabilir ve bazı jQuery kodlarıyla siteniz için güzel bir başlık oluşturabilirsiniz.

En sık olarak sıralanmamış listeleri web makalelerinin ortasında veya yükleme yönergelerinde bulabilirsiniz. Dikkat edin Google ve diğer arama botları, sayfa içeriğinizi farklı bir şekilde işlemez, yani senin SEO, seçtiğiniz liste türünden bağımsız olarak etkilenmemelidir.

Sıralı Listeler (

)

Bir veri seti sipariş etmeniz gerektiğinde, kendi mizanpaj çerçevenizi sıfırdan ayarlamak mümkündür, ancak bu şekilde her artan sayıyı elle eklemeniz gerekir; bu da yorucu olabilir. Sipariş edilen listeler numaralandırılmış görevleri aynı hizada tutmak vidalanma olmadan. Dahili liste öğelerinizin sırası (

• ) verilerin nasıl sunulduğunu belirleyecektir.

  Aşağıda, sipariş verilen listenin örnek kodu verilmiştir:

   
   
  Madde 1
   
  Madde 2
   
  Öğe 3
   
   

  Mümkün Sayacı normal sayılardan bir avuç başka seçenekle değiştirin. Bunlar arasında alfabetik yazı ve Roma rakamları, birkaç isim. Web tasarımcıları içeriğe özgü listeler için sıralı listeyi kullanır. Tarif verileri, günlük görevler, Favoriler, veya En son / en son giriş yapan kullanıcılar sadece birkaç örnek. Genellikle göreceksiniz blog yorumları Her yorumu numaralı sırada tutmak için sıralı listeler kullanılarak oluşturulmuştur.

  Veri tanımı listeleri (

  )

  Tanım listeleri artık çok sık görülmüyor (hiç popüler olmadıkları gibi değil). Web tasarımcılarıyla karmaşık bağlantı biçimleri veya kutu içeriği oluştururken görüldü. veri listesi etiketi (

  ) Günümüzde kodlayıcılar tarafından sıklıkla yanlış anlaşılmaktadır. HTML4.01'de veri listeleri için kullanıldı öğeleri açıklamalarıyla eşleştirme. Bunlara tanım listeleri adı verildi..

  Aşağıda veri tanım listesinin örnek kodu verilmiştir:

   
   
  Madde 1
   
  Açıklama
   
  Madde 2
   
  Açıklama
   
  Öğe 3
   
  Açıklama
   
   

  Ancak yeni HTML5 özellikleriyle veri listelerine bir transkripsiyon verilmiştir. Öğeleri nasıl kullandığınız konusunda sözdizimi açısından herhangi bir fark yoktur, ancak amaçları bir Bir veya daha fazla veri teriminden oluşan açıklama listesi (

  ) ardından bir veya daha fazla veri tanımı (

  ).

  HTML5 Doktor'un makalesinden güçlü bir örnek meta veriler biçimlendirilmiş liste. Bir tek içinde dl Yapacağınız liste elemanı terim tanımlamak, adınız gibi, ardından her biri tanım etiketi verileri tanımlayabilir hakkınızda, muhtemelen yaşınız, mesleğiniz, bulunduğunuz kasaba / şehir vb. Anahtar / değer çiftli herhangi bir veri seti bir açıklama listesine tam olarak uyar. Bir listede birden fazla veri terimi kullanabilirsiniz, ancak W3C her terim benzersiz olmalı listede.

  Şimdi 3 popüler liste stilini belirledik, hadi bazı örneklere geçelim! Web tasarımcıları son yıllarda listelerinde çok yaratıcı oldular. Listelerimin yaratıcı kullanımına özel olarak aşağıdaki favori web sitelerimden 7'sini katalogladım.

  Basit Sırasız Liste Gezintisi

  Gezinme menüleri, modern CSS teknikleriyle oluşturmak çok daha kolaydır. Bu nedenle sıralanmamış listeler ve hatta sıralı listeler popüler bir seçenek haline geldi. Bunun en sevdiğim örneklerinden biri sosyal medya blogu Mashable'de.

  

  Üstbilgilerinin üst kısmına doğru 2 ana bağlantı grubu göreceksiniz. Doğrudan logolarının en üstünde, En Çok Okunan Haberler, Trend Konuları ve Kişiler gibi topluluk bağlantıları içeren küçük bir sıralanmamış liste var. Tasarımcı, sağlam bir arka plana ve renk düzenine sahip şık bir hover tarzı oluşturdu.

  Bunun hemen altında alt gezinti bağlantılarını göreceksiniz. Bu gezinme menüsü, Social Media veya Tech gibi blog kategorilerine yönlendirir. Her iki sıralanmamış liste bir içinde bulunur. HTML5