Кантип Tag Cloud Style үчүн

бир Tag Cloud Style үчүн CSS колдонуу

теги булут заттар тизмесин көрүп түшүрүлгөн. Сиз көп блогдорго теги булуттарды көрүшөт. Бул Flickr окшош сайттарга таанымал болду.

Tag булуттар кээ бир өлчөнүүчү өзгөчөлүгүнө жараша көлөмү жана салмагы (да кээде түс) өзгөрүп байланыш тизмеси болуп саналат. Көбү теги булуттар популярдуулугу же өзгөчө тег с меткой барактарды санынын негизинде курулат. Бирок сен аларды көрсөтүп, жок дегенде, эки жол бар сиздин сайтка заттар ар кандай тизмесин бир теги булутту түзө аласыз. Мисалы:

Сиз Tag Cloud Build кылышыбыз керек?

Бул тег булутту куруу жеңил, силер эки гана нерсени керек:

Көбү теги булуттар байланыш тизмеси болуп саналат, ошондуктан, ар бир нерсе менен байланышкан URL болсо, жардам берет. Бирок бул көргөзмө иерархияны түзүү үчүн зарыл болгон эмес.

Популярные Шилтемелер бир Tag Cloud Build үчүн кадамдар

Менин сайт күн сайын бет пикир алууга макалалар бар, жана бул мага теги булутту түзүүгө пайдалануу үчүн жеңил ченем болуп саналат. Демек, бул, мисалы, биз макалалардын тизмесин бир теги булутту түзөсүз, 2007-жылдын 1-жумасында жогорку үчүн сайтында 25-макалалар.

  1. Эгер иерархиядагы келет канча өлчөмүн аныктоо.
    1. Сен тизмесине ден бар эле булуттардын ичинде көп өлчөмдө болушу мүмкүн, ал эми ушул Кодексте Уикипедияны болуп, айырмасы өтө аз болушу мүмкүн. Мен сенин иерархия эч кандай 10дон ашык өлчөмдө ээ сунуштайбыз.
  2. Ар бир де¾гээлде үчүн пунктка кесип жөнүндө чечим кабыл алат.
    1. башкача айтканда - бул 1/10 бүдүрчөлөр кирген күнүнө сиздин бет пикир кесүү сыяктуу эле жөнөкөй болот. Сиздин сайтка 100 бет күнү карайт сайын ири бет болсо, 100+ катары чийиндер мүмкүн, 90-100, 80-90, 70-80, ж.б. мен мода менин бет пикир болуп калбадыбы чейин.
  3. Бет көрүнүшү үчүн, силердин ден тизмесин, ошондой эле 2-кадам негизинде аларга наам берилсин
    1. эле булут кызыктуураак кылат, сен уячалары айрым бир дагы нерсе жок болсо, тынчсызданбай эле кой.
  4. Шансы (же кандай экинчи сорт сиз пайдалануудан баш тартпаган) менен тизмесин колдонушат.
    1. Бул булут кызыктуу кылат. Сиз бул наам боюнча иргелет калса, анда ал жөн гана түбүндө майда үстүнөн түшүп, учурда ири заттар менен бир тизме болот.
  5. Наамы класс саны кылып HTML жаз. класс = "tag4"> кошуу Streaming Audio Files

Эгер ар бир тизме элементине үчүн HTML бар, силер аларды каалаган бир жолу, андан кийин бир чечим кабыл алуу керек. Сиз пунктунда шилтемелерди коюп, эмне болот элем болот. Бирок бул семантикалык чейин белгиленген мүмкүн эмес болмок, сенин теги булут келип CSS жок Ким шилтемелердин көп пункт болмок. Тизмеге бул түрү боюнча HTML сыяктуу болушу мүмкүн:

<Б ID = "булут"> кошуу Streaming аудио <адреси = "/ html101classes / а / bl_xclass1_2a.htm" класс = "TAG3"> Желе Сайттын негизги Tags: мыкты Дизайн программалар <адреси = "/ beginningtutorials / а / aa033103a.htm "класс =" TAG2 "> Желе Page куруу үчүн бардыгы Lost Color каймана

Тескерисинче, мен Сиз бул иретсиз тизмесин аркылуу теги булутту түзүүнү сунуштайбыз. Бул HTML жана CSS кодексинин бир нече багыттар, бирок мазмуну кандай гана аны көрүү үчүн келген ким окула турган болот деп кепилдик берет. HTML сыяктуу болушу мүмкүн:

<Ул ID = "булут"> <ли>
кошуу Streaming Audio Files <ли> <Гуппи "/html101classes/a/bl_xclass1_2a.htm" класс = "TAG3"> Желе Сайттын негизги Tags <ли> <адреси = "/ htmleditors / а / aa121304.htm" класс = " tag7 "> мыкты Дизайн программалар <ли> Жалпысынан Lost үчүн Желе Page Building <ли> Color каймана

Бирок Tag Cloud үчүн стилдери кайда

Эми биз кызыктуу бөлүгү-CSS түрлөрүнө ээ. Эгер теги булутту стилдештирүүнү болгондо, адатта, ариптин өлчөмүнө жана арип салмагын өзгөртүү. Ошондой эле ариптер же тек же башка ар кандай стилдердин атрибуту түсүн өзгөртө алат, ал эми көлөмү жана салмагы салттуу болуп саналат.

10 стили класстарды, ар бир теги наам бири керек:

#cloud a.tag1 {арип өлчөмү: 0.7em; арип өлчөмү: 100; } #cloud a.tag2 {арип өлчөмү: 0.8em; арип өлчөмү: 200; } #cloud a.tag3 {арип өлчөмү: 0.9em; арип өлчөмү: 300; } #cloud a.tag4 {арип өлчөмү: 1.0em; арип өлчөмү: 400; } #cloud a.tag5 {арип өлчөмү: 1.2em; арип өлчөмү: 500; } #cloud a.tag6 {арип өлчөмү: 1.4em; арип өлчөмү: 600; } #cloud a.tag7 {арип өлчөмү: 1.6em; арип өлчөмү: 700; } #cloud a.tag8 {арип өлчөмү: 1.8em; арип өлчөмү: 800; } #cloud a.tag9 {арип өлчөмү: 2.2em; арип өлчөмү: 900; } #cloud a.tag10 {арип өлчөмү: 2.5em; арип өлчөмү: 900; }

Мен булут өзү айланасындагы кээ бир образын камтыйт келет: булут текст борбор, булут окулуучу экенин бир сап-бийик коюп, казык теги аларга, төшөмө менен камсыз кылып:

#cloud {толтургучтар: 2px; сызык бийиктиги: 3em; текстти тегиздөө: борбору; } Бир {толтургуч #cloud: 0px; }

Акыр-аягы, анда семантикалык стилдер ыкмасын (., Башкача айтканда бул иретсиз тизме) колдонуп жатасыз, анда тизме үчүн CSS эки дагы саптарды кошуу үчүн ок менен эмес, кемтик менен эмес, керек:

#cloud {margin: 0; } #cloud Ли {дисплей: саптагы; }