A HTML listák ragyogó használata a Web Designban

Jól megtervezett listákat találhat az interneten. A tervezők évtizedek óta használják őket koordinálja az oldal információkat és elrendezéseket, és a mai weben láthatjuk a nagy kreativitást abban, hogyan használják a webes tervezők listákat. Ezek közé tartoznak a navigációs menük, a profilhivatkozások, az archívumok, a feladatok / ellenőrzőlisták és az egyéb felhasználási tételek!

Ebben a bejegyzésben különböző HTML-listákat fogok bemutatni, és tanácsokat adok ezek tervezésére, különös tekintettel arra, hogyan egyedi listát adjon hozzá a listához. Szintén néhány példát fogok találni a fantasztikus listákkal ellátott weboldalakról, és végül listát fog kapni a jól megtervezett HTML listákkal rendelkező webhelyekről. Nincs többé kétséges, hogy miként tehetné egyedülállónak az egyszerű megjelenésű listáit, és kezdjük el a legtöbbet tőlük!

A listaelemek

A webes tervezők folyamatosan ugrálnak az egyik sávvonalból a másikra, így a weboldal stílusai idővel megváltoznak, de a listák az idő próbáját mutatták, és nagyon jól lehetnek a világháló jövőbeli innovációjában..

A példák ellenőrzése előtt néhány pontot szeretnék a HTML listákkal lefedni. Kevés különböző típusú lista létezik, amelyeket a saját tervezési munkájában felhasználhat. A webes tervezők többsége azokra összpontosít Rendezetlen listák amelyek a

címke, de van még két kevésbé népszerű változat: Rendelt listák és Adatmeghatározások. Az alábbiakban további részletekbe mentem.

Rendezetlen listák (

)

Talán az egyik legelterjedtebb elem a HTML4 / HTML5 szabványokban. A rendezetlen listák ugyanúgy adják meg az adatokat, mint egy rendezett lista, azonban Ön nem lát numerikus jelölőket az oldalon. Ehelyett minden elem a kis kör vagy lemez és egy új vonalra bontva. Ez az ikon a lista-stílusú tulajdonságokkal is módosítható megtalálható a CSS-ben.

Az alábbiakban a rendezetlen lista példakódja látható:

 
 
1. tétel
 
2. tétel
 
3. tétel
 
 

A rendezetlen listák a tökéletes megoldás az épület számára navigációs linkek. Mivel könnyen lehet egész listákat fészkelhet bármely listaelemben ez egy egyszerű al-navigációs linkek létrehozása is. A listastílus eltávolítása után egy üres elemelem marad. Innen a horgony hivatkozásokat úgy tervezheti meg, hogy blokk elemként jelenjen meg az oldalon, így kitölti a navigációs menü tervét, és néhány jQuery kóddal összeállíthat egy szép fejlécet a webhelyére.

Leggyakrabban rendezetlen listákat talál a webes cikkek vagy a telepítési utasítások közepén. Vegyük észre ezt A Google és más keresési botok nem dolgozzák fel másképpen az oldal tartalmát, tehát a te A SEO-t nem szabad befolyásolni, függetlenül attól, hogy melyik típust választja.

Rendelt listák (

)

Ha meg kell rendelni egy sor adatállományt, akkor lehetséges, hogy saját elrendezési keretet állítson be semmiből, de így minden kézzel növekményes számot kell hozzáadnia, ami fárasztó lehet. A rendezett listák nagyszerűek számozott feladatok sorba rendezése csavarozás nélkül. A belső listaelemek sorrendje (

• ) diktálja az adatok bemutatásának módját.

  Az alábbiakban a rendezett lista példakódja látható:

   
   
  1. tétel
   
  2. tétel
   
  3. tétel
   
   

  Ez is lehetséges változtassa meg a számlálót a szokásos számoktól néhány más lehetőséghez. Ezek tartalmazzák betűrendes betűk és római számok, hogy csak néhányat említsünk. A webes tervezők a tartalom-specifikus listák rendezett listáját használnák. Receptadatok, napi feladatok, kedvencek, vagy Top / Legutóbbi bejelentkezett felhasználók csak néhány példa. Gyakran látni fogod blog megjegyzések a megrendelt listák használatával építették, hogy minden megjegyzést számozott sorrendben tartsanak.

  Adatmeghatározási listák (

  )

  A definíciós listákat már nem látják nagyon gyakran (nem olyanok, mint valaha népszerűek). A webes tervezőknél a linkek vagy a doboz tartalmának összetett formátumát hozta létre. A adatlista címke (

  ) ma a kódolók gyakran félreértik. A HTML4.01-ben a specs adatlistákat használták párosítsa a tételeket a leírásokkal. Ezeket definíciós listának nevezték.

  Az alábbiakban az adatmeghatározási lista példakódja látható:

   
   
  1. tétel
   
  Leírás
   
  2. tétel
   
  Leírás
   
  3. tétel
   
  Leírás
   
   

  Az új HTML5 specifikációkkal azonban az adatlisták átírást kaptak. A szintaxisok között nincs különbség az elemek használatának módjában, azonban céljukat frissítettük a egy vagy több adatfeltételből álló leírási lista (

  ), amelyet egy vagy több adatmeghatározás követ (

  ).

  Erős példa a HTML5 doktor cikkében a metaadat-formázott lista. Egyetlen belsejében dl listaelemet határozza meg a kifejezést, például a neved, majd minden később a definíció címke leírhatja az adatokat rólad, esetleg korodról, foglalkozásodról, jelenlegi városodról stb. Végül a kulcs / érték párokkal rendelkező adatcsoportok jól illeszkednek a leírás listájához. A listában egynél több adat-kifejezést használhat, de a W3C azt állítja minden egyes kifejezésnek egyedinek kell lennie listában.

  Most, hogy a 3 népszerű listatípust beillesztettük, lépjünk tovább néhány példára! A webes tervezők nagyon kreatívak voltak az elmúlt évek listáival. Az alábbiakban 7 kedvenc weboldalaimat katalogizáltam, különös tekintettel a listák kreatív használatára.

  Egyszerű rendezetlen lista navigáció

  A navigációs menük sokkal egyszerűbbek a modern CSS technikákkal. Ez az oka annak, hogy a rendezetlen listák és még a rendezett listák is népszerű választássá váltak. Ennek egyik kedvenc példája a Mashable szociális média blogjában jelenik meg.

  

  A fejléc tetejére 2 fő linket fogunk látni. Közvetlenül a logójuk tetejére egy kis rendezetlen lista, amely olyan közösségi hivatkozásokat tartalmaz, mint a Top Stories, Trending Topics és People. A tervező létrehozott egy sima lebegő stílust, amely szilárd hátteret és színsémát tartalmaz.

  Közvetlenül ezen alatt láthatja az al-navigációs linkeket. Ez a navigációs menü olyan blogkategóriákhoz vezet, mint a Social Media vagy a Tech. Mindkét rendezetlen lista a HTML5