Briljants HTML sarakstu lietojums Web Design

Jūs varat atrast labi izstrādātus sarakstus visā internetā. Dizaineri tos izmanto jau vairākus gadu desmitus koordinēt lapas informāciju un izkārtojumus, un šodienas tīmeklī jūs varat redzēt lielo radošumu, kā web dizaineri izmanto sarakstus. Tie ietver navigācijas izvēlnes, profila saites, arhīvus, uzdevumus / kontrolsarakstus un citu lietojumu tonnas!

Šajā amatā es iepazīstināšu ar dažāda veida HTML sarakstiem, ar padomiem par to izstrādi, jo īpaši par to, kā pievienojiet savam sarakstam unikālu malu. Arī es ņemšu jūs ar dažiem piemēriem, kas satur tīmekļa vietnes ar fantastisku saraksta dizainu, un galu galā jūs saņemsiet sarakstu ar tīmekļa vietnēm ar labi izstrādātiem HTML sarakstiem. Nav nekādu šaubu par to, kā padarīt jūsu vienkāršā skatījuma sarakstus unikālus, un sāksim to darīt šodien!

Listing Elements

Web dizaineri nepārtraukti paceļas no viena bandwagon uz nākamo, tādējādi laika gaitā mainot tīmekļa vietnes stilus, taču saraksti ir bijuši laika pārbaude, un tie var būt ļoti labi, lai nākotnē ieviestu World Wide Web jauninājumus..

Pirms pārbaudīt piemērus, kurus vēlos aptvert dažus punktus ar HTML sarakstiem. Ir daži dažādi saraksti, kurus varat izmantot savā projektēšanas darbā. Lielākā daļa tīmekļa dizaineru koncentrējas uz Neregulēti saraksti kuras tiek atvērtas ar a

tag, bet ir vēl divas mazāk populāras variācijas: Pasūtītie saraksti un Datu definīcijas. Tālāk es esmu nonācis sīkāk.

Neregulēti saraksti (

)

Iespējams, viens no visvairāk izmantotajiem elementiem HTML4 / HTML5 standartos. Neregulēti saraksti izvadīs datus tādā pašā veidā kā pasūtīts saraksts, tomēr jūs nebūs redzami skaitliski marķieri uz sāniem. Tā vietā katram postenim tiek dota a mazs aplis vai disks un sadalīts jaunā rindā. Šī ikona var mainīt arī ar saraksta stila tipa īpašumu atrasts CSS.

Zemāk ir neierobežota saraksta piemērs:

 
 
1. punkts
 
2. punkts
 
3. punkts
 
 

Neregulēti saraksti ir ideāls risinājums ēkas celtniecībai navigācijas saites. Tā kā jūs varat viegli ligzdo veselus sarakstus jebkurā sarakstā tas ir vienkāršs jautājums, lai izveidotu sub-navigācijas saites arī. Pēc saraksta stila noņemšanas jums tiks atstāts tukšs vienuma elements. No šejienes jūs varat veidot enkura saites, lai jūsu lapā parādītos kā bloku elementi, tādējādi aizpildot navigācijas izvēlnes dizainu, un ar dažiem jQuery kodiem jūs varat izveidot skaistu virsrakstu savai vietnei.

Visbiežāk jūs atradīsiet neregulētus sarakstus tīmekļa rakstu vai instalēšanas instrukciju vidū. Ņemiet to vērā Google un citi meklēšanas roboti neapstrādā jūsu lapas saturu citādi, lai jūsu SEO nedrīkst ietekmēt neatkarīgi no izvēlētā saraksta veida.

Pasūtītie saraksti (

)

Kad jums ir nepieciešams pasūtīt datu kopumu, ir iespējams izveidot savu izkārtojuma sistēmu no nulles, taču šādā veidā jums būs jāpievieno katrs pieauguma numurs ar roku, kas var būt nogurdinošs. Pasūtītie saraksti ir lieliski saglabājot numurētus uzdevumus bez skrūvēm. Jūsu iekšējo sarakstu vienību secība (

• ) noteiks, kā dati tiek prezentēti.

  Zemāk ir pasūtītā saraksta piemērs:

   
   
  1. punkts
   
  2. punkts
   
  3. punkts
   
   

  Tas ir iespējams arī nomainiet skaitītāju no parastiem numuriem līdz nedaudzām citām opcijām. Tie ietver alfabēta burti un romiešu cipariem, nosaukt dažus. Tīmekļa dizaineri izmantotu pasūtīto sarakstu satura specifiskiem sarakstiem. Receptes dati, ikdienas uzdevumus, izlase, vai top / nesen reģistrētie lietotāji ir tikai daži piemēri. Bieži jūs redzēsiet bloga komentāri būvēts, izmantojot sakārtotus sarakstus, lai katrs komentārs būtu numurēts.

  Datu definīciju saraksti (

  )

  Definīciju saraksti vairs netiek uzskatīti par ļoti bieži (ne līdzīgi kā tie bija populāri). Viņi agrāk bija redzami ar web dizaineriem, veidojot sarežģītus saites vai kastes satura formātus. The datu sarakstu atzīme (

  ) šodien kodētāji bieži nepareizi izprot. HTML4.01 tika izmantoti specs datu saraksti savienojiet vienumus ar to aprakstiem. Tos sauca par definīciju sarakstiem.

  Zemāk ir datu definīciju saraksta piemērs:

   
   
  1. punkts
   
  Apraksts
   
  2. punkts
   
  Apraksts
   
  3. punkts
   
  Apraksts
   
   

  Tomēr ar jaunajiem HTML5 specs datu sarakstiem ir piešķirta transkripcija. Elementu izmantošanā nav sintakses atšķirību, tomēr to mērķis ir atjaunināts kā a aprakstu sarakstu, kas sastāv no viena vai vairākiem datu \ t

  ), kam seko viena vai vairākas datu definīcijas (

  ).

  Spēcīgs piemērs no HTML5 ārsta raksta ir a metadatu formātu saraksts. Vienā dl saraksta elementu definēt terminu, piemēram, jūsu vārds, tad katrs nākamais definīcija tagu varētu aprakstīt datus par jums, iespējams, jūsu vecumu, nodarbošanos, pašreizējo pilsētu, utt jebkurš datu kopums ar atslēgu / vērtību pāriem labi iekļaujas aprakstu sarakstā. Sarakstā var izmantot vairāk nekā vienu datu terminu, bet W3C to norāda katram terminam jābūt unikālam sarakstā.

  Tagad, kad mēs esam ierindojuši 3 populāros saraksta stilus, pāriet uz dažiem piemēriem! Pēdējo gadu laikā tīmekļa dizaineri ir ieguvuši ļoti radošus sarakstus. Esmu sarakstījis 7 no manām iecienītākajām vietnēm, īpašu uzmanību pievēršot to radošajai saraksta izmantošanai.

  Vienkārša neierobežota saraksta navigācija

  Navigācijas izvēlnes ir daudz vienkāršākas veidot ar modernām CSS metodēm. Šī iemesla dēļ neregulēti saraksti un pat pasūtītie saraksti ir kļuvuši par populāru iespēju. Viens no maniem iecienītākajiem piemēriem parādās sociālo mediju blogā Mashable.

  

  Virsotnes virsotnē jūs redzēsiet 2 galvenās saites. Tieši uz to logotipa augšdaļu ir neliels neierobežots saraksts, kurā ir kopienas saites, piemēram, Top stāsti, Tendences un cilvēki. Dizainers ir izveidojis gludu hover stilu, kurā ir stabila fona un krāsu shēma.

  Tieši zem šīs vietas jūs redzēsiet savas apakšnavigācijas saites. Šī navigācijas izvēlne noved pie tādām emuāru kategorijām kā Sociālie mediji vai Tehn. Abi neierobežoti saraksti ir ietverti a HTML5