Skip to main content

Kaip stiliaus žymų debesis naudojant CSS jūsų svetainėje

Anonim

Žymų debesis yra elementų sąrašo vaizdinis vaizdavimas. 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į

Mūsų svetainėje yra straipsnių, kurie kasdien gauna puslapių peržiūras, ir tai yra lengva metrika, kurią mes galime naudoti 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.

    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.

    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ą

    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).

    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

  6. Viskas!

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:

Vietoj to rekomenduojame kurti žymų debesis, naudodamiesi nepakankamu sąrašu. 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:

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:

Mėgstame įtraukti tam tikrus stilius aplink debesį: centruokite debesies tekstą, nustatykite linijos aukštį, kad debesis būtų įskaitomas, ir įsitikinkite, kad tvirtinimo žymos neturi įklijos:

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.