Jinsi ya Kufanya Tag Cloud Cloud

Tumia CSS kwa Wingu la Mtindo wa Sinema

Wingu la wingu ni picha inayoonekana ya orodha ya vitu. Mara nyingi utaona mawingu kwenye blogi. Ilifanywa maarufu na maeneo kama Flickr.

Maandishi ya alama ni orodha ya viungo vinavyobadilisha ukubwa na uzito (wakati mwingine rangi pia) kulingana na sifa fulani inayoweza kupimwa. Maandishi mengi ya lebo hujengwa kulingana na umaarufu au idadi ya kurasa ambazo zimewekwa na tag hiyo. Lakini unaweza kuunda wingu kutoka kwenye orodha yoyote ya vitu kwenye tovuti yako ambayo ina angalau njia mbili za kuwaonyesha. Kwa mfano:

• Orodha ya makala katika utaratibu wa alfabeti na mitindo inayoonyesha umaarufu wa makala.
• Orodha ya Mtandao katika utaratibu wa alfabeti na mitindo inayoonyesha ambayo unapenda bora zaidi.
• Orodha ya wahariri wa Mtandao waliorodheshwa kwa utaratibu wa bei na mitindo inayoonyesha jinsi karibu kila huja kwenye vigezo vya kabla ya kuchaguliwa.
• Orodha ya marafiki na mitindo inayoonyesha umbali kutoka nyumba yako hadi kwao.

Unahitajije kujenga Cloud Tag?

Ni rahisi kujenga wingu la tag, unahitaji mambo mawili tu:

• Orodha ya vitu (kama makala za wavuti, wavuti, au marafiki zako)
• Kipimo cha kila kitu (kama maoni ya ukurasa kwa siku, cheo chako 1-10, au umbali wa nyumba yako).

Maandishi mengi ya lebo ni orodha ya viungo, hivyo husaidia ikiwa kila kitu kina URL inayohusishwa na hilo. Lakini hiyo haihitajiki kuunda utawala wa maonyesho.

Hatua za Kujenga Tag ya Viungo maarufu

Tovuti yangu ina makala ambazo hupata maoni ya ukurasa kila siku, na hii ni metali rahisi kwangu kutumia ili kujenga wingu la wingu. Hivyo kwa mfano huu, tutaunda wingu ya tambulisho kutoka kwenye orodha ya makala, makala 25 juu kwenye tovuti yangu kwa wiki ya Januari 1, 2007.

1. Tambua ngazi ngapi unayotaka katika uongozi wako.
   1. Ingawa inawezekana kuwa na ngazi nyingi katika wingu yako kama una vitu katika orodha yako, hii inapendeza kwa msimbo, na tofauti zinaweza kuwa ndogo sana. Ninapendekeza kuwa na ngazi zaidi ya 10 katika utawala wako.
2. Panga juu ya pointi zilizokatwa kwa kila ngazi.
   1. Inaweza kuwa rahisi kama kukata maoni yako ya ukurasa kwa siku katika vipande 1/10 - yaani. ikiwa ukurasa mkubwa kwenye tovuti yako unapata maoni ya ukurasa 100 kwa siku, unaweza kuifanya kama 100+, 90-100, 80-90, 70-80, nk. Nilichagua maoni yangu kwenye ukurasa huo.
3. Weka vitu vyenye kwenye utaratibu wa kutazama ukurasa, na uwape cheo kulingana na hatua ya 2
   1. Usiwe na wasiwasi ikiwa huna vitu vilivyomo katika hali fulani, ambayo inafanya tu wingu kuvutia zaidi.
4. Panga orodha yako katika utaratibu wa alfabeti (au chochote aina ya pili unayotaka kutumia).
   1. Hii ndiyo inafanya kuvutia kwa wingu. Ikiwa utaondoka umewekwa kwa cheo, basi itakuwa tu orodha na vitu vikubwa zaidi hadi chini chini.
5. Andika HTML yako ili cheo ni namba ya darasa. darasa = "tag4"> Inaongeza Faili za Sauti za Streaming

Mara tu una HTML kwa kila kipengee cha orodha ya mtu binafsi, na utaratibu unayotaka kuwaonyesha, basi unahitaji kufanya uamuzi. Unaweza kuweka viungo katika kifungu na ungependa kufanyika. Lakini hii haikuwekwa alama, na mtu yeyote asiye na CSS akija kwenye wingu la wingu angeona tu kifungu kikubwa cha viungo. HTML ya aina hii ya orodha itaonekana kama hii:

Kuongeza Files Audio Streaming Vitambulisho vya Msingi kwenye Tovuti Programu Bora ya Mtandao wa Kubuni Jenga Ukurasa wa Mtandao wa Waliopotea kabisa Muhtasari wa rangi

Badala yake, ninakupendekeza uunda wingu lako la wingu kwa kutumia orodha isiyosaidiwa. Ni mistari michache zaidi ya msimbo wa HTML na CSS lakini inathibitisha kwamba maudhui yatahesabiwa bila kujali nani anayeiangalia. HTML itaonekana kama hii:

"wingu">
• Inaongeza Files za Sauti za Kusambaza
• Maelezo ya Msingi kwa Tovuti
• Programu bora ya kubuni wavuti
• Kujenga ukurasa wa wavuti wa Waliopotea kabisa
• Muhtasari wa rangi

  Lakini wapi Mitindo ya Wingu la Tag

  Sasa tunapata sehemu ya kujifurahisha-mitindo ya CSS. Unapotaka wingu la lebo, huwa kawaida kubadilisha ukubwa wa font na uzito wa font. Unaweza pia kubadilisha rangi ya font au historia au sifa yoyote ya mtindo, lakini ukubwa na uzito ni wa jadi.

  Unahitaji madarasa ya mitindo 10, moja kwa kila cheo cha lebo:

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

  Napenda kuingiza mitindo mingine karibu na wingu yenyewe: katikati ya maandishi ya wingu, weka urefu wa mstari ili wingu iweze kuonekana, na uhakikishe kwamba vitambulisho vya nanga havikuwapoza:

  #cloud {padding: 2px; urefu wa mstari: 3m; kuandika maandishi: kituo; } #cloud {padding: 0px; }

  Hatimaye, ikiwa unatumia mbinu ya kupima semantic (kwa mfano orodha isiyojidhiliwa), utahitaji kuongeza zaidi mistari miwili ya CSS ili orodha haiwe na risasi na haijaingizwa:

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