Съдържание
Сайтовете или уеб приложенията, които обработват всичко, свързано с рецепти за храни, трябва да имат дизайн, който е не само привлекателен, но и полезен, приятелски настроен и позволяващ на потребителите да изпълняват инструкциите, посочени в споменатите рецепти.Ако нашето ядро е точно това, тогава ние трябва да приложим добър дизайн за всяка от рецептите, публикувани на нашия сайт или уеб приложение, и въпреки че може да мислим, че имаме нужда от часове и часове в дизайна, истината е, че с някои стилове на CSS и добре планирана структура можем да постигнем това, от което се нуждаем.
HTML код
Нашите HTML Ще бъде съвсем просто, ще включим нашия файл styles.css в заглавката си и ще го структурираме в поредица от диви, където ще организираме информацията в списъци, в допълнение към идентифицирането на информационния блок с маркер на статия:
червено кадифе
Десерт
- 1
- 45 минути
- Трудност
- 560
Червена кадифена торта-на английски: Red velvet cake-е торта с тъмночервен, яркочервен или червено-кафяв цвят.
Съставки: Мляко, брашно, яйца, ванилия, оцветител, захар, масло.
Тук допълнително добавяме изображението за нашата рецепта, което всеки от вас ще модифицира според вашите нужди, нека видим какво ще носи нашият .css файл.CSS код
Като дефинираме нашата структура в .html, ние трябва само да създадем нашите стилове. За това ще използваме някои свойства, известни като поле, подплънки и позиции. В допълнение към това ще използваме свойства като градиенти или размер на кутията, да видим:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; размер на кутията: border-box; } html {височина: 100%; } body {background-color: # 57abf2; background-image: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); фоново изображение: линеен градиент (-45 градуса, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; размер на шрифта: 1rem; } img {max-width: 100%; височина: авто; вертикално подравняване: отдолу; } .recipe-card {фон: #fff; марж: 4em auto; ширина: 90%; макс. ширина: 496px; граница-горе-ляво-радиус: 5px; граница-горе-дясно-радиус: 5px; граница-долу-ляво-радиус: 5px; граница-долу-дясно-радиус: 5px; } В допълнение към това ще използваме свойствата на децата на нашия документ, а за иконите, които ще използваме в нашата рецепта, ще използваме .svg, за да ги извлечем и поставим в нашия HTML:
.recipe-card .icon {display: inline; дисплей: вграден блок; background-image: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); фон-повторение: без повторение; } .recipe-card .icon-калории, .recipe-card .icon-калории \: редовен {background-position: 0 0; ширина: 16px; височина: 19px; } .recepe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; ширина: 20px; височина: 20px; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; ширина: 16px; височина: 19px; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; ширина: 21px; височина: 26px; } .recipe-card .icon-users, .recipe-card .icon-users \: обикновен {background-position: 0 -84px; ширина: 18px; височина: 18px; }След като това стане, нека видим крайния резултат от това как би изглеждала нашата рецепта.
Увеличете
recept.zip 91.82K 415 изтеглянияХареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка 
