Док мијењате величину странице, ови елементи блока грациозно падају један испод другог. Поставио сам неколико различитих инстанци медијских упита у спољној табели стилова. То олакшава праћење стилова када се враћате касније да бисте уредили нешто.

 
 
 
Јаке Роцхелеау
 
Фрееланце Вритер & Веб Девелопер
  Худсон, Массацхусеттс, сад  јакероцхелеау@гмаил.цом Мој портфолио • @јакероцхелеау 
 
  
 
 

Пре него што скочимо у детаљни ЦСС желим да објасним више о употреби микроподатака. Ако пажљиво погледате, ја сам обележио атрибуте унутар многих различитих елемената са именима Тип ставка, итемсцопе, и итемпроп. Све се то односи на пројекат Сцхмеа који се нада да ће понудити структуру података за веб.

Форматтинг Усефул Мицродата

Сви главни претраживачи, укључујући Гоогле, Иахоо !, и Бинг, прихватили су Сцхему као најбољу синтаксу за означавање података. Означавањем детаља о себи помаже овим претраживачима да прикажу одговарајуће резултате за ваш садржај на мрежи. Хајде да разбијемо како да их поставимо.

Атрибут итемсцопе примењује се на било који контејнер који садржи информације о ставци шеме. Ово увек прати атрибут итемтипе, који у овом сценарију описује особу. Унутар овог омота див могу да означим било који садржај помоћу ставке итемпроп заједно са било којим детаљима наведеним на њиховој страници са документацијом.

Препоручени метод је да умотате садржај у ознаку спан уместо да додате директно елементу. Када означавате нешто као фотографију, морате приложити итемпроп имг елемент директно. Али иначе ћете имати много чишћу ознаку тако што ћете омотати своје податке у ознаке за спан.

Колико је превише?

Тврдим да нема ограничења у количини детаља у које можете ући. Микроподаци су доступни да помогну рачунарима да препознају људе, организације, производе и друге ставке у контексту на мрежи. Што више информација можете понудити, то боље.

Вриједи задржати и отворити ум и видјети како можете користити ове микроподатке у аспектима ваше властите веб странице. Ако потрошите 10-15 минута кроз документацију из схеме, много је лакше него што мислите. Можемо да погледамо два чврста примера из демо снимка:

 
 
Скиллсет
 
 
Развој
 
 
ХТМЛ5 / ЦСС3
 
ЈаваСцрипт & јКуери
 
ПХП Бацкенд
 
СКЛ базе података
 
Вордпресс
 
Плигг ЦМС
 
Неки Објецтиве-Ц
 
 
 
 
Софтвер
 
 
Адобе Пхотосхоп
 
Адобе Дреамвеавер
 
МС Оффице 2007-2010
 
цПанел & пхпМиАдмин
 
Ксцоде 4
 
 
 
 

Приликом навођења мојих различитих вештина поставила сам нови контејнер који дефинише шему ИтемЛист. Није било ниједног типа вештине или искуства за листање под Особом, тако да је ово сигурна алтернатива. Вредност је да Гоогле може да разуме сваку од њих итемЛистЕлемент је међусобно повезана. У овом случају имамо листу језика и софтвера са којима знам да радим.

 
 
Рецент Артицлес
 
  10 корисних метода за ЦСС и Јавасцрипт • Објављена у Јул 2012
 
  Преписивање УРЛ-ова у ВордПресс-у: Типс анд Плугинс • Објављена у Јул 2012
 
  ЈПЕГ Оптимизација за Веб - Ултимате Гуиде • Објављена у Јул 2012
 
  9 трикова за дизајнирање савршеног ХТМЛ билтена • Објављена у Мај 2012
 
  Водич за А / Б тестирање помоћу Гоогле оптимизатора веб страница • Објављена у Март 2012
 
 

Још један добар примјер је попис чланака који се налази на самом дну. Постоји поставка шеме за чланке и постове на блогу, а све се односи на садржај који се налази на мрежи. Назначио сам УРЛ чланка и датум објављивања који је више него довољно информација за ове алате за претраживање.

Само имајте на уму да су микроподаци све о обликовању садржаја који ће бити организовани помоћу рачунара. Овај резиме на једној страници је савршен пример за дефинисање особина о одређеној особи. Ово неће бити корисно на сваком веб сајту, али то је узбудљива методологија за разумевање.

Релативни ЦСС стилови

У овом последњем делу погледајмо како да стилизујемо целу ову страницу. Према врху нашег стила дефинишем почетне ресетове и основне особине елемената. То укључује заглавља, ставке листе и ефекте лебдења везних веза.

* маргин: 0; паддинг: 0;  хтмл висина: 101%;  боди бацкгроунд: # ф2ф2ф2 урл ('хттпс://ассетс.хонгкиат.цом/уплоадс/респонсиве-ресуме/бг-тиле.пнг'); фонт-сизе: 62.5%; паддинг-боттом: 65пк;  х1 фонт-фамили: "Симонетта", "Требуцхет МС", Ариал, санс-сериф; цвет: # 454545; фонт-сизе: 3.6ем; маргин-боттом: 6пк;  х2 фонт-фамили: "Симонетта", "Требуцхет МС", Ариал, санс-сериф; цолор: # 484848; фонт-сизе: 2.5ем; маргин-боттом: 10пк; тект-децоратион: ундерлине;  х3 фонт-фамили: "Требуцхет МС", Вердана, Ариал, санс-сериф; цолор: # 777; фонт-веигхт: нормал; фонт-сизе: 1.8ем; маргин-боттом: 10пк;  х4 фонт-фамили: "Требуцхет МС", Вердана, Ариал, санс-сериф; цвет: # 656565; фонт-веигхт: болд; фонт-сизе: 1.75ем; маргин-боттом: 4пк;  п фонт-фамили: "Балтазар", "Дроид Сериф", Тимес Нев Роман, сериф; цвет: # 565656; фонт-сизе: 1.8ем; лине-хеигхт: 1.4ем; маргин-боттом: 15пк; паддинг-лефт: 35пк;  мала фонт-фамили: "Балтхазар", сериф; цвет: # 656565; фонт-сизе: 1.6ем; дисплеј блок; маргин-боттом: 6пк;  ул дисплаи: блоцк; лист-стиле: нема;  ул ли паддинг-лефт: 45пк; лист-стиле-типе: не постоји; вертикално поравнавање: врх; бацкгроунд: урл ('хттпс://ассетс.хонгкиат.цом/уплоадс/респонсиве-ресуме/буллет.пнг') 25пк 5пк но-репеат; маргин-боттом: 5пк; фамилија фонтова: "Балтхазар", сериф; цолор: # 666; фонт-сизе: 1.6ем; лине-хеигхт: 2.3ем;  имг бордер: 0; мак-видтх: 100%;  а цолор: # 5582д6; тект-децоратион: ноне;  а: ховер тект-децоратион: ундерлине;  

Ништа превише интересантно осим за неке од прилагођених фонтова. Такође сам узео јединствену икону метка уместо да користим подразумевану “диск”. Можете покушати да претражите директоријум као што је Ицон Финдер када покушавате да пронађете сличан дизајн.

/ ** @гроуп цоре лаиоут ** / #в маргин: 0пк 50пк; паддинг: 20пк 40пк; паддинг-топ: 35пк; бацкгроунд: #ффф; мин-видтх: 260пк; мак-видтх: 900пк; бордер-боттом-ригхт-радиус: 8пк; бордер-боттом-лефт-радиус: 8пк; -вебкит-бордер-боттом-лефт-радиус: 8пк; -вебкит-бордер-боттом-ригхт-радиус: 8пк; -моз-бордер-радиус-боттомлефт: 8пк; -моз-бордер-радиус-боттомригхт: 8пк;  хеадер ширина: 100%;  / ** @гроуп персонал сеттингс ** / #инфо флоат: лефт; маргин-боттом: 12пк;  #пхото флоат: ригхт;  #пхото имг -вебкит-бордер-радиус: 3пк; -моз-бордер-радиус: 3пк; бордер-радиус: 3пк; -вебкит-бок-схадов: 0 2пк 4пк ргба (0, 0, 0, 0.2); -моз-бок-схадов: 0 2пк 4пк ргба (0, 0, 0, 0.2); бок-схадов: 0 2пк 4пк ргба (0, 0, 0, 0.2); бацкгроунд-цолор: #ффф; бордер: 1пк солид #ццц; паддинг: 5пк;  

Постоји само неколико важних блокова на страници који захтевају пажњу. Наравно, омотач див је подешен са додатним маргинама и паддинг-ом. Такође максимална ширина је ограничена на 900пк, јер било која већа величина изгледа као да страница има превише празног простора. Користио сам и заобљене углове на дну странице да би постигао глаткији ефекат на очи.

Нацрт са одзивом

Вероватно најважнији аспект овог онлине биографије је функционалност која одговара. Имам пет различитих тачака прекида за постизање различитих ефеката приликом промене величине прозора претраживача.

@медиа само екран и (мак-видтх: 740пк) х1 фонт-сизе: 4.5ем;  х3 фонт-сизе: 2.2ем;  х2 дисплаи: блоцк; тект-алигн: центар;  #инфо флоат: ноне; дисплеј блок; тект-алигн: центар;  #пхото флоат: ноне; дисплеј блок; тект-алигн: центар;  #в паддинг: 20пк 15пк;  п паддинг: 0;  

Почетни 740пк је тачно тамо где ће фотографија бити у сукобу са нашим текстом у заглављу. Уместо да фотографији падају на десну страну, обришемо оба елемента и центрирамо цео распоред. Такође сам повећао величину текста заглавља да би оставио солиднији утицај.

Како се прозор смањује, уклонио сам неке додатне облоге из див и параграфа. Следећи проблем на који смо наишли након заглавља је из УЛ списка вјештина. Раскидам приступ у две колоне и уместо тога ставке листе лебде једна поред друге.

@медиа онли сцреен и (мак-видтх: 570пк) ул ли дисплаи: инлине-блоцк; паддинг-лефт: 15пк; видтх: 140пк; бацкгроунд-поситион: -5пк 0пк; маргин-ригхт: 6пк; лине-хеигхт: 1.7ем;  # скилл-лефт, скиллс-ригхт маргин-боттом: 15пк;  

Ово такође захтева репозиционирање многих подразумеваних својстава текста. Морамо да ажурирамо висину линије и да поново поставимо икону метка сваке ставке листе. Поставио сам фиксну ширину тако да се решетка више организује до следеће тачке прекида.

Кодирање за паметне телефоне

Посљедња три медијска упита су мала, али врло важна. Док се пребацујете из режима за пејзаж и портрет, иПхоне ће променити величину било ког мобилног претраживача. То је случај и код већине Андроид уређаја и Виндовс Мобиле телефона.

@медиа онли сцреен и (мак-видтх: 480пк) ул ли видтх: 120пк;  #в маргин: 0 20пк;  @медиа онли сцреен и (мак-видтх: 320пк) #в маргин: 0 10пк;  / ** иПхоне само ** / @медиа екран и (мак-девице-видтх: 480пк) ул ли ширина: 150пк;  

Када први пут притиснете 480пк или мањи, уклањамо још неке облоге од омотача и поново промените величину ставки листе. Онда на 320пк уклонио сам део маргиналног простора изван документа. Још увек можете да видите текстурирану позадину, али она није толико важна на тако танком вертикалном приказу.

На крају користим мак-девице-видтх да бисте циљали сам уређај иПхоне, односно било који други мобилни екран максималне ширине 480пк. У овом случају желим ажурирати ставке листе мало шире, тако да оне попуне цијели екран. То ће утицати само на унос вештина у пејзажном погледу, јер је портрет превише мршав да бисте приметили разлике.

• Демо
• Преузмите изворни код

Последње мисли

Рад преко Интернета често захтијева барем неку врсту портфеља на интернету. Када можете да се повежете на једну страницу са свим својим детаљима организованим заједно, то значи да мислите на посао. Озбиљни послодавци и потенцијални клијенти ће се повући за таквим каризматичним приказом професионализма у веб дизајну.

Надам се да можете одвојити неке кључне тачке од овог туториала. Слободњаци на било којој локацији широм свијета могу се пласирати на тржиште само уз мало техничких напора. Слободно преузмите мој демо изворни код изнад, и поделите своја размишљања о овом чланку у нашој области за коментаре.