Тегтер бұлтын қалай жасау керек

Тегтер бұлтын жасау үшін CSS-ні ​​қолданыңыз

тегтер бұлты - элементтер тізімінің визуалды сипаттамасы. Сіз блогтардағы тегтер бұлттарын жиі көресіз. Flickr сияқты сайттар танымал болды.

Тегтер бұлты - кейбір өлшенетін атрибутқа байланысты мөлшері мен салмағын (кейде түсі де) өзгеретін сілтемелер тізімі. Көптеген тегтер бұлттары танымал немесе тегті тегтелген беттердің саны негізінде салынған. Бірақ торабыңыздағы элементтердің кемінде екі түрін көрсететін кез-келген тізім тізімінен тег бұлтын жасай аласыз. Мысалға:

• Мақалалардың танымалдылығын көрсететін стильдермен алфавиттік тәртіптегі мақалалар тізімі.
• Веб-сайттардың алфавиттік тәртіпте стилі бар, олардың қайсысын жақсы көретінін көрсететін тізім.
• Стильдермен баға тәртіптемесінде тізілген веб-редакторлардың тізімі алдын-ала анықталған критерийлердің қаншалықты жақын екенін көрсететін тізім.
• Үйіңізден өздеріне дейінгі қашықтықты көрсететін стилі бар достар тізімі.

Тегтер бұлтын жасау үшін не қажет?

Тегтер бұлтын құру оңай, сізге тек екі нәрсе керек:

• Элементтер тізімі (веб-мақалалар, веб-сайттар немесе сіздің достарыңыз)
• Әрбір элемент үшін өлшеу (күніне арналған бет көріністері, 1-10 рейтингі немесе үйіңізге дейінгі қашықтық).

Көптеген тегтер бұлттары сілтемелер тізімі болып табылады, сондықтан әрбір элементте онымен байланысты URL болса, көмектеседі. Бірақ, визуалды иерархияны жасау талап етілмейді.

Танымал сілтемелердің тегтер бұлтын құру қадамдары

Менің сайтымда бет көріністері күн сайын алынатын мақалалар бар және бұл тегтер бұлтын жасау үшін пайдаланатын қарапайым метрика. Мәселен, осы мысал үшін біз мақалалар тізімінен тег бұлты жасаймыз, менің сайтымыздағы ең жақсы 25 мақала 2007 жылғы 1 қаңтардан бастап.

1. Сіздің иерархияңызда қаншалықты қажет деңгейлерді анықтаңыз.
   1. Егер сіздің тізіміңіздегі элементтердің саны көп болса да, бұл сіздің кодыңызда қиындықтар тудырады, ал айырмашылықтар өте төмен болуы мүмкін. Мен иерархияңызда 10 деңгейден артық емес ұсынамын.
2. Әр деңгей үшін кесілген нүктелерде шешіңіз.
   1. Күн сайынғы бет көріністерін 1/10 тілімге кесу сияқты қарапайым болуы мүмкін - яғни. егер сіздің торабыңыздағы ең үлкен бет күніне 100 бет көрініс болса, оны 100+, 90-100, 80-90, 70-80 және т.б. сияқты бөлуге болады. Мен осы бетті қарап шығардым.
3. Элементтеріңізді бет көрінісі тәртібінде тізімдеңіз және 2-қадамға негізделген оларды атаңыз
   1. Кейбір слоттарда ешқандай элементтерің жоқ болса, бұл жай ғана бұлтты қызықтырады.
4. Сіздің тізіміңізді алфавиттік тәртіппен (немесе сіз пайдаланғыңыз келген екінші сұрыпты) құрыңыз.
   1. Бұл жерде бұлтты қызықты етеді. Егер сіз оны дәреже бойынша сұрыптаған болсаңыз, онда ол ең төменгі жағындағы ең төменгі бөліктердің ең үлкен бөлшектері бар тізім.
5. Нысаныңыз сынып нөмірі болса, HTML-ді жазыңыз. class = «tag4»> Ағынды аудио файлдарды қосу

Әрбір жеке тізім элементі үшін HTML және оларды көрсету керек ретпен болғаннан кейін, сізге шешім қабылдау қажет. Сіз сілтемелерді ежеге орналастыра аласыз және сіз жасай аласыз. Бірақ бұл семантикалық түрде белгіленбейді және CSS-ті ешкім жоқ тегіңізге түсетін бұлтқа сілтемелердің үлкен парағын ғана көреді. Бұл тізімге арналған HTML келесідей болады:

Ағымдық аудио файлдарды қосу Веб-сайттың негізгі тегтері Үздік веб-дизайн бағдарламалары Толығымен жоғалтылған веб-парақты құру Түсті символизм a>

Оның орнына, тегтің бұлтығын реттелмеген тізім арқылы жасауды ұсынамын. Бұл HTML және CSS кодының бірнеше сызығы, бірақ ол мазмұнды кім көретініне қарамастан, оқылатын болады деп кепілдік береді. HTML келесідей болады:

• Ағымдық аудио файлдарды қосу
• Веб-сайттың негізгі тегтері
• Үздік веб-дизайн бағдарламасы
• Толығымен жоғалтылған веб-бетті құру
• Түсті символизм

  Бірақ тегтер бұлтының мәнері қайда

  Енді біз көңілді бөлікке - CSS стильдерін аламыз. Тегтер бұлтын стильдеңіз, әдетте қаріп өлшемін және қаріптің салмағын өзгерте аласыз. Сондай-ақ, қаріпті немесе өңді немесе басқа стиль атрибутының түсін өзгертуге болады, бірақ өлшемі мен салмағы дәстүрлі болып табылады.

  Сізге 10 стиль классы керек, олардың әрқайсысы біреуі үшін:

  #cloud a.tag1 {font-size: 0.7em; қаріптің салмағы: 100; } #cloud a.tag2 {font-size: 0.8em; қаріптің салмағы: 200; } #cloud a.tag3 {font-size: 0.9em; қаріптің салмағы: 300; } #cloud a.tag4 {font-size: 1.0em; қаріптің салмағы: 400; } #cloud a.tag5 {font-size: 1.2em; қаріптің салмағы: 500; } #cloud a.tag6 {font-size: 1.4em; қаріптің салмағы: 600; } #cloud a.tag7 {font-size: 1.6em; қаріп салмағы: 700; } #cloud a.tag8 {font-size: 1.8em; қаріптің салмағы: 800; } #cloud a.tag9 {font-size: 2.2em; қаріптің салмағы: 900; } #cloud a.tag10 {font-size: 2.5em; қаріптің салмағы: 900; }

  Мен бұлттың айналасындағы бірнеше стильтерді қосуды ұнатамын: бұлт мәтінін ортаға қоюға, бұлтты оқуға болатын етіп сызық биіктігін орнатуға және якорлар тегтерінің оларды толтырмайтындығына көз жеткізіңіз:

  #cloud {толтыру: 2px; line-height: 3em; мәтінді туралау: орталық; } #cloud a {толтыру: 0px; }

  Соңында, егер сіз семантикалық сәндеу әдісін (мысалы, реттелмеген тізім) пайдалансаңыз, тізімде таңбалауыштар жоқ және шегінбеу үшін тағы екі қосымша CSS жолын қосу керек:

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