Преглед садржаја
Веб локације или веб апликације које обрађују све што се односи на рецепте за храну морају имати дизајн који није само атрактиван, већ и користан, пријатељски и који омогућава корисницима да извршавају упутства наведена у рецептима.Ако је наша срж управо то, онда морамо имплементирати добре дизајне за сваки од рецепата објављених на нашој веб страници или веб апликацији, и иако можда мислимо да су нам потребни сати и сати у дизајну, истина је да с неким стиловима ЦСС и добро испланирану структуру можемо постићи оно што нам је потребно.
ХТМЛ код
Наш ХТМЛ Биће прилично једноставно, укључићемо нашу датотеку стилес.цсс у заглавље и структурираћемо је у низу дива, где ћемо информације организовати у листе, поред идентификовања информационог блока ознаком чланка:
Ред Велвет
Десерт
- 1
- 45 мин
- Тешкоће
- 560
Торта од црвеног баршуна-на енглеском: Ред велвет цаке-је колач тамно црвене, светло црвене или црвено-смеђе боје.
Састојци: Млеко, брашно, јаја, ванилија, боја, шећер, путер.
Овде додатно додајемо слику за наш рецепт, коју ће свако од вас изменити према својим потребама, да видимо шта ће носити наша .цсс датотека.ЦСС код
Пошто је наша структура дефинисана у њему .хтмл, морамо само да креирамо наше стилове. За ово ћемо користити нека својства позната као маргин, паддинг и положаји. Поред овога користићемо својства као што су нагиби или димензије кутије, Хајде да видимо:
* {-вебкит-бок-сизинг: бордер-бок; -моз-бок-сизинг: бордер-бок; оквир величине: бордер-бок; } хтмл {висина: 100%; } боди {бацкгроунд-цолор: # 57абф2; бацкгроунд-имаге: -вебкит-линеар-градиент (-225дег, # 19д3д1 5%, # 57абф2); бацкгроунд-имаге: линеар-градиент (-45дег, # 19д3д1 5%, # 57абф2); фонт-фамили: 'Опен Санс', санс-сериф; величина фонта: 1рем; } имг {мак-видтх: 100%; висина: ауто; вертикално поравнати: доле; } .реципе-цард {бацкгроунд: #ффф; маргина: 4ем ауто; ширина: 90%; мак-ширина: 496пк; бордер-топ-лефт-радиус: 5пк; бордер-топ-ригхт-радиус: 5пк; бордер-боттом-лефт-радиус: 5пк; бордер-боттом-ригхт-радиус: 5пк; } Поред овога, користићемо својства деце нашег документа, а за иконе које ћемо користити у нашем рецепту користићемо .свг да бисмо их издвојили и поставили у наш ХТМЛ:
.реципе-цард .ицон {дисплаи: инлине; приказ: инлине-блоцк; бацкгроунд-имаге: урл (хттпс://с3-ус-вест-2.амазонавс.цом/с.цдпн.ио/203277/реципе-цард-ицонс.свг); бацкгроунд-репеат: но-репеат; } .реципе-картица .ицон-калорије, .реципе-цард .ицон-калорије \: регуларна {бацкгроунд-поситион: 0 0; ширина: 16пк; висина: 19пк; } .реципе-картица .ицон-сат, .реципе-картица .ицон-сат \: регуларна {бацкгроунд-поситион: 0 -19пк; видтх: 20пк; висина: 20пк; } .реципе-цард .ицон-левел, .реципе-цард .ицон-левел \: регулар {бацкгроунд-поситион: 0 -39пк; ширина: 16пк; висина: 19пк; } .реципе-цард .ицон-плаи, .реципе-цард .ицон-плаи \: регулар {бацкгроунд-поситион: 0 -58пк; ширина: 21пк; висина: 26пк; } .реципе-цард .ицон-усерс, .реципе-цард .ицон-усерс \: регулар {бацкгроунд-поситион: 0 -84пк; ширина: 18пк; висина: 18пк; }Када се ово уради, да видимо коначан резултат како би изгледао наш рецепт.
ЕНЛАРГЕ
рецепт.зип 91.82К 415 преузимањаДа ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
