Kaip stiliaus žymų debesis

Naudokite CSS, kad galėtumėte sukurti "Tag Cloud"

"tag cloud" yra vaizdinis elementų sąrašo vaizdas. Jūs dažnai matysite dienoraščių slapukų debesį. Tai buvo populiari svetainėse, tokiose kaip "Flickr".

Tag "debesys" yra nuorodų, pasikeitusių pagal dydį ir svorį (kartais ir spalvos), sąrašą, priklausomai nuo tam tikro išmatuojamo atributo. Dauguma "tag" debesų yra sukurta pagal populiarumą arba puslapių, pažymėtų šia konkrečia žyma, skaičiumi. Bet jūs galite sukurti žymų debesį iš bet kurio jūsų svetainės elementų sąrašo, kuriame yra bent du būdai juos rodyti. Pavyzdžiui:

• Straipsnių sąrašas abėcėlės tvarka su stiliais, rodančiais straipsnių populiarumą.
• Tinklalapių sąrašas abėcėline tvarka su stiliais, nurodančiais, kurie jums labiausiai patinka.
• Svetainių redaktorių, išvardytų kainų sąraše, sąrašas su stiliais, rodančiais, kaip kiekvienas iš jų pasiekia iš anksto nustatytą kriterijų rinkinį.
• Draugų su stiliais sąrašas, nurodantis atstumą nuo jūsų namų iki jų.

Ką reikia sukurti "Tag Cloud"?

Labai lengva sukurti žymų debesis, jums reikia tik dviejų dalykų:

• Elementų sąrašas (pvz., Interneto straipsniai, interneto svetainės ar jūsų draugai)
• Kiekvieno elemento matavimas (pvz., Peržiūrų per dieną, jūsų reitingas 1-10 ar atstumas iki jūsų namų).

Dauguma žymelių debesų yra nuorodų sąrašai, todėl tai padeda, jei kiekvienas elementas turi su ja susijusį URL. Bet to nereikia kurti vizualinės hierarchijos.

Žingsniai, kaip sukurti populiarių nuorodų slapyvardį

Mano svetainėje yra straipsnių, kurie kasdien gauna puslapio peržiūras, ir tai yra paprastas metrikas, naudojamas norint sukurti žymų debesis. Pavyzdžiui, 2007 m. Sausio 1 d. Savaitę mes sukursime žymų debesis iš straipsnių sąrašo, 25 geriausių mano svetainės straipsnių sąrašo.

1. Nustatykite, kiek norimų lygių savo hierarchijoje.
   1. Nepaisant to, kad jūsų debesyje galite turėti tiek daug lygių, kiek turite sąraše esančių elementų, tai tampa varginančiu kodu, o skirtumai gali būti labai maži. Rekomenduoju turėti ne daugiau kaip 10 lygių savo hierarchijoje.
2. Nuspręskite kiekvieno lygio nutraukimo taškus.
   1. Tai gali būti taip paprasta, kaip pjaustyti savo puslapio peržiūrą per 1/10 pjūvius, ty. jei didžiausias jūsų svetainės puslapis per dieną gaus 100 puslapių peržiūrų, galite jį supjaustyti kaip 100+, 90-100, 80-90, 70-80 ir tt Aš taip susmulkino mano puslapio rodinius.
3. Nurodykite savo elementus puslapio peržiūros užsakyme ir duokite jiems įvertinimą pagal 2 veiksmą
   1. Nesijaudinkite, jei jūs neturite jokių daiktų kai kuriose laiko tarpsnių, taigi debesis įdomiau.
4. Kurkite savo sąrašą abėcėlės tvarka (ar kitą rūšį, kurią norite naudoti).
   1. Tai daro debesis įdomu. Jei paliksite jį surūšiuoti pagal rangą, tai bus tik sąrašas su didžiausiais elementais nuo viršaus iki mažiausio apačioje.
5. Parašykite savo HTML kodą, kad rangas būtų klasės numeris. class = "tag4"> Streaming audio files pridėti

Kai turėsite HTML kiekvienam individualiam sąrašo elementui ir nurodymui, kurį norite rodyti, turite priimti sprendimą. Jūs galite įdėti nuorodas į pastraipą, ir jūs būsite padaryti. Bet tai nebūtų semantiniu požiūriu pažymėtas, o visi, neturintys CSS, pateks į jūsų žymų debesis, pamatysite tik didelę nuorodų dalį. Šio tipo sąrašo HTML turėtų atrodyti taip:

Streaming audio failų pridėjimas Pagrindinės svetainės žymos Geriausia programinė įranga Interneto puslapio kūrimas visiškai prarastam Spalvotas simbolizmas

Vietoj to aš rekomenduoju sukurti žymų debesis, naudodamas nepakankamą sąrašą. Tai dar kelios eilutės HTML ir CSS kodo, bet tai užtikrina, kad turinys bus skaitomas nesvarbu, kas jį peržiūrės. HTML turėtų atrodyti taip:

• Streaming Audio Files
• Pagrindinės svetainės žymos
• geriausia interneto dizaino programinė įranga
• Interneto puslapio kūrimas visiškai prarastam Spalvotas simbolizmas

  Bet kur yra "Tag Cloud" stiliai

  Dabar pateksime į įdomią dalį - CSS stilius. Kurdami žymų debesis, paprastai pakeičia šrifto dydį ir šrifto svorį. Taip pat galite pakeisti šrifto spalvą, foną ar bet kurį kitą stiliaus atributą, tačiau dydis ir svoris yra tradiciniai.

  Jums reikia 10 stiliaus klasių, po vieną kiekvienai žymų rangai:

  #cloud a.tag1 {font-size: 0.7em; šrifto svoris: 100; } #cloud a.tag2 {font-size: 0.8em; šrifto svoris: 200; } #cloud a.tag3 {font-size: 0.9em; šrifto svoris: 300; } #cloud a.tag4 {font-size: 1.0em; šrifto svoris: 400; } #cloud a.tag5 {font-size: 1.2em; šrifto svoris: 500; } #cloud a.tag6 {font-size: 1.4em; šrifto svoris: 600; } #cloud a.tag7 {font-size: 1.6em; šrifto svoris: 700; } #cloud a.tag8 {font-size: 1.8em; šrifto svoris: 800; } #cloud a.tag9 {font-size: 2.2em; šrifto svoris: 900; } #cloud a.tag10 {font-size: 2.5em; šrifto svoris: 900; }

  Man patinka įtraukti kai kuriuos stilius aplink debesį: centruokite debesies tekstą, nustatykite linijos aukštį, kad debesis būtų įskaitomas, ir įsitikinkite, kad tvirtinimo žymos neturi pamušalo.

  #cloud {padding: 2px; line-height: 3em; text-align: centras; } #cloud a {padding: 0px; }

  Galiausiai, jei naudojate semantinį stiliaus metodą (ty, nepakeistą sąrašą), turėsite pridėti dar dvi CSS eilutes, kad sąraše nebūtų kulka ir nebūtų įtrauktos.

  #cloud {margin: 0; } #cloud li {display: inline; }