Ki jan nan Style yon Cloud Tag

Sèvi ak CSS nan Style yon Cloud Tag

tag nwaj se yon ilistrasyon vizyèl nan yon lis atik. Ou pral souvan wè nyaj tag sou blogs. Li te fè popilè pa sit tankou Flickr.

Tag nwaj yo se yon lis lyen ki chanje nan gwosè ak pwa (pafwa koulè tou) depann sou kèk atribi mezirab. Pifò nwaj tag yo bati ki baze sou popilarite oswa nimewo a nan paj ki atenn ak ki tag an patikilye. Men, ou ka kreye yon nwaj tag soti nan nenpòt lis atik sou sit ou ki gen omwen de fason pou yo montre yo. Pa egzanp:

Ki sa ou bezwen bati yon Cloud Tag?

Li fasil yo bati yon nwaj tag, ou sèlman bezwen de bagay sa yo:

Pifò nwaj tag se lis lyen, kidonk li ede si chak atik gen yon URL ki asosye avèk li. Men, sa pa oblije kreye yon yerachi vizyèl.

Etap yo bati yon Cloud Tag nan Link popilè

Sit mwen an gen atik ki jwenn opinyon paj chak jou, e sa se yon metrik fasil pou m 'sèvi ak yo kreye yon nwaj tag. Se konsa, pou egzanp sa a, nou pral kreye yon nwaj tag nan yon lis atik, tèt 25 atik yo sou sit mwen an pou semèn nan 1 janvye 2007.

  1. Detèmine konbyen nivo ou vle nan yerachi ou.
    1. Pandan ke li posib yo gen nivo kòm anpil nan nwaj ou a menm jan ou gen atik nan lis ou a, sa a vin fatigan nan kòd, ak diferans ki genyen yo ka trè minim. Mwen rekòmande pou pa gen plis pase 10 nivo nan yerachi ou.
  2. Deside sou pwen yo koupe pou chak nivo.
    1. Li ta ka kòm senp tankou koupe opinyon paj ou chak jou nan 1/10 tranch - sa vle di. si paj nan pi gwo sou sit ou a vin 100 paj views yon jou, ou ta ka tranch li kòm 100+, 90-100, 80-90, 70-80, elatriye mwen koupe paj mwen wè opinyon nan ki alamòd.
  3. Ekri atik ou yo nan lòd paj wè, epi ba yo yon ran ki baze sou etap 2
    1. Pa enkyete w si ou pa gen okenn atik nan kèk nan fant yo, ki jis fè nwaj la plis enteresan.
  4. Resort lis ou a nan lòd alfabetik (oswa tou sa dezyèm sòt ou vle itilize).
    1. Sa a se sa ki fè nwaj la enteresan. Si ou kite li klase pa ran, Lè sa a, li pral jis pou yon lis ak atik yo pi gwo nan tèt la desann nan pi piti a nan pati anba a.
  5. Ekri HTML ou pou ran a se yon nimewo klas. klas = "tag4"> Ajoute Streaming Audio dosye

Yon fwa ou gen HTML la pou chak atik lis endividyèl, ak lòd ou vle montre yo, Lè sa a, ou bezwen pran yon desizyon. Ou ka mete lyen yo nan yon paragraf epi ou ta dwe fè. Men, sa a pa ta semantically make moute, ak nenpòt moun ki san CSS vini nan nwaj tag ou ta jis wè yon gwo paragraf nan lyen yo. HTML la pou kalite lis sa a ta sanble tankou sa a:

Ajoute Streaming Audio Files Debaz Tags pou yon sit entènèt Pi bon Software Design Web Symbolism koulè yon>

Olye de sa, mwen rekòmande ou kreye nwaj tag ou lè l sèvi avèk yon lis unordered. Li se yon liy kèk plis nan kòd HTML ak CSS men li asire ke kontni an pral lizib pa gen pwoblèm ki vini wè li. HTML la ta sanble tankou sa a:

  • Ajoute difizyon dosye Audio
  • Debaz Tags pou yon sit entènèt
  • Pi bon Software Design Web
  • Bati yon paj entènèt pou totalman pèdi a
  • Symbolism koulè

    Men, ki kote Styles yo pou Cloud nan Tag

    Koulye a, nou jwenn nan pati a plezi-CSS estil yo. Lè ou style yon nwaj tag, ou anjeneral chanje gwosè a font ak pwa font la. Ou kapab tou chanje koulè a ​​nan font la oswa background nan oswa nenpòt atribi style lòt, men gwosè ak pwa yo tradisyonèl yo.

    Ou bezwen 10 kou style, yon sèl pou chak ran tag:

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

    Mwen renmen gen ladan kèk estil alantou nwaj nan tèt li: sant tèks la nwaj, mete yon liy-wotè pou ke nwaj la se lizib, epi asire w ke tags yo jete lank pa gen okenn padding sou yo:

    #cloud {padding: 2px; liy-wotè: 3em; tèks aliman: sant; } #cloud yon {padding: 0px; }}

    Finalman, si w ap sèvi ak metòd la manier semantik (sètadi lis la unordered), ou pral bezwen ajoute de liy plis nan CSS pou ke lis la pa gen bal epi li pa sezene:

    #cloud {maj: 0; } #cloud li {ekspozisyon: aliye; }}