Коришћење ЦСС мреже за распореде у стилу часописа

Коришћење ЦСС мреже за распореде у стилу часописа
Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

ЦСС вам пружа доста флексибилности да дизајнирате привлачне изгледе који реагују. Изглед у стилу часописа организује мешани садржај текста и слике у атрактивном формату који привлачи погледе, што га чини популарним избором.





МУО Видео дана ПОМЕРИТЕ ДА БИСТЕ НАСТАВИЛИ СА САДРЖАЈЕМ

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



најбољи извори вести на свету

Шта су изгледи у стилу часописа?

Распореди у стилу часописа користе структуру налик мрежи за распоређивање садржаја у колоне и редове.





Они су одлични за приказивање различитих типова садржаја попут чланака, слика и огласа на организован и привлачан начин.

Разумевање ЦСС Грид-а

ЦСС Грид је робустан алат за распоред који вам омогућава позиционирати елементе у дводимензионалном простору , што олакшава да креирајте колоне и редове .



Са овом врстом распореда, две примарне компоненте долазе у игру: мрежни контејнер, одговоран за дефинисање структуре мреже, и ставке мреже, које су подређени елементи контејнера.

Ево једноставног примера како можете користити ЦСС Грид за креирање 3к3 мреже:



4БЕ75328ДЦА7874Ф6ФД13Ф3Ц4Е1185ЦЕА6615164

Овај код дефинише мрежни контејнер са три колоне једнаке ширине и размаком од 20 пиксела између ставки. Ево резултата:

Тестирање цсс мреже са једноставним примером

Подешавање ХТМЛ структуре

За изглед у стилу часописа, биће вам потребан добро структуиран ХТМЛ документ. Размотрити користећи семантичке елементе за организовање вашег садржаја као што су <чланак> и <одељак>. Ево добре почетне тачке:



4Е279234Е0А526Б127ФФФАФ1АБФБЦ326Е77ДД4Д8

Дефинисање мрежног контејнера

Да бисте креирали мрежу за изглед у стилу часописа, додајте следећи ЦСС код:

0ФЦ1Д677ФФ439682А9Б4ЦФЦ04Д07БА3Д50372АДА

Овај ЦСС специфицира да елемент контејнера, .часопис-изглед , је мрежни контејнер који користи декларацију приказ: мрежа .

Својства грид-темплате-цолумнс и грид-темплате-ровс користе комбинацију понављање , ауто-фит , и минмак . Они осигуравају да су ширине колона и висине редова најмање 250пк , а у сваки стане што више предмета.

Постављање ставки мреже

Сада стилизујте сваки чланак и његов садржај да бисте направили атрактивне елементе у стилу сличица:

1ЕЦ65286ФФФД9АА8478ДБ58ЦБ1Ф10828358ФЕЦ38

У овом тренутку, ваша веб страница би требало да изгледа отприлике овако:

Изглед часописа пре елемената мреже

Креирање изгледа у стилу часописа

Да бисте постигли прави изглед у стилу часописа, додајте ЦСС стилове да бисте обухватили елементе чланка било којим редоследом који желите:

861ЦБ0БЕ71ЕА763ЦБ9Е29Ц66А430Е20Ц78Е2Б275

Ваша страница би сада требало да изгледа овако:

Изглед часописа након елемената мреже

Респонзивни дизајн са ЦСС мрежом

Једна од предности ЦСС Грид-а је његов инхерентан одзив. Можете користите медијске упите да бисте прилагодили изглед за различите величине екрана. На пример:

74113727298Ц418Е0А762122А2271963ЦАЕБ1316

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

Трансформисање изгледа помоћу ЦСС мреже

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

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