Создание шаблона для WordPress с нуля урок №22

Автор Nikita Stoianov
Создание шаблона для WordPress с нуля урок №22

продолжаем работать со страницы портфолио для нашего сайта и данном случае мы будем верстать анонсы для нашего портфолио и.

Какая здесь может быть разметка в принципе может разметку вы тоже можете уже сами свою делать. А почему. Потому, что вот.

Я когда смотрел значит предыдущий урок можно было сделать разметку немножко иную.

Да вот можно было сделать значит вот этот. Пейдж блок до который включает в себя всю нашу навигацию in a div сделать его. Вот как я отметила сейчас синим цветом до сделать ему бэкграундом обычный наш наклон. Вот который на всех страницах у нас предыдущий присутствовал далее внутри вот этого нашего привычного у нас идёт у вот этот ул у нас опять такие остаётся. Но вот он будет идти, но вот так вот как нарисовать зелёную. То есть у нас для нашего блока. Да будет наклон BG будет наклон тот который у нас есть остальные до ссылке мы дадим ему. Пойдём где-то там предположим 5 пикселей чтобы сверху и снизу просвечивал санаш наклонной for a для ул мы зададим фоновый. Цвет белый. Ну и получим. Примерно вот тоже самое то, что мы и получили при этом нам не понадобилось бы вырезать новую картинку скажем вот может быть. Вот как такой вариант решения вопроса тут возникает нюанс, что делать потом вот этим вот. Ну там тоже наверное что-то можно будет придумать вот поэтому to разметку общем, тогда даже которую я предлагаю. Она хорошая. Она грамотная и правильная. Но если у вас есть свой там вариант разметки и — это не значит, что — это неправильно. Я к тому, что в принципе в верстке может быть несколько вариантов разметки и никто вам не скажет. Какая из них правильная поэтому. Ну скажем так да. Главное чтобы работала. Главное чтобы каждый блок который вы создаете вы могли его чем-то обосновать. Для чего он почему он здесь и собственно. Какую функцию. Он выполняет. То есть просто чтобы лишнего не было лишних чтобы блоков не городить, но тем не менее чтобы всё работало масштабирование всё не разваливалась при расширении при добавление контента всё опять-таки оставалось нормально. Вот главные критерии которые должен быть верстки дали означает вот переходим уже непосредственно к, но надо немножко отвлекались будет блок включает все наши анонсы внутреннего у нас будет так внутреннего будет у нас картинка картинка анонса до доля будет блок заголовок анонс — это то есть ну вот такой будет блок. Ну и далее параграф один с текстом iPad 2 в общем-то который просто содержит в себе нашу ссылку, а внутри внутри нашего заголовка будет. Вот H1 название и ещё TP. Ну в общем название допустим категории в которой находится данный пост. Ну примерно вот такой смысл может быть. Вот поэтому разметка опять-таки очень простая div картинка ещё один div с головками параграфам и параграф и всё больше у нас ничего нет переходим в кот и набираем так я в общем-то вот он наш блог. Атик анонс Main наша главная картинка наш div с характером дата здесь заголовок поста и значит TP на видали. Вот наши 20. ГБ один из которых текст 2 из которых картинка до кнопка причём кнопка у нас является текстовым из-за дам ей класс ритма. Ну чтобы мы могли в общем-то управлять данные ссылкой на всё необходимое классы стиле и прочее переходим в браузер так смотрим. Что у нас всё в общем-то отобразилось единственное, что у нас остаётся — это назначить стиле. Так значит мы переходим в так переходим в стиль CSS. Только единственное захватим отсюда первое название первого нашего класса так. Атик анонс Main так. Ну первое опять-таки Overflow hidden поскольку картинка и текст у нас в один рядок следующее margin-bottom сразу же. Да тоже можно задать 30 пикселей. Ну почему. Потому, что у нас в ниже второй анонс располагаться между ними должно быть какое-то расстояние поэтому тут сразу же может быть. Вот — это так далее background background URL и делаем вот наш наклон смайл вот здесь подойдёт нам так где-то наклон будет смайл BG располагаемого снизу батон и повторяется он по иксам. Вот и чтобы соответственно он у нас не выходил за рамки мы должны задать ещё и padding 0 0 50 пикселей снизу и 0 пикселей слева далее мы переходим к нашей картинки да то есть вот у нас даже есть здесь специально для неё article Image article Image. И для него для данной картинки общем-то должны задать лифт выравниванием по левому краю и небольшой отступ слева то есть отступ справа 30 пикселей так. Я просто каждый раз уже не туда-сюда не перепрыгивают да. Ну я надеюсь. Просто по свойствам вы понимаете для чего они и о чём здесь как бы идёт речь так данный. Маркин, но он просто вот сделал вот — это вот расстояние у нас которые могут только, что добавил отдали мы должны перейти к отеку ahead Attack of Happiness следующий идёт выровняем ношу шапку для носа паста. Ну вот, что нам нужно для пока, что мы сказать как бы не можем может быть нам вообще для него ничего не понадобится. Но для. Аттика Head H1 мы можем назначить фонд так во-первых он будет Normal 16 пикселей и будет он Droid serif после колар так. Смотрим какой у нас будет сейчас цвет 36 36 6 так-то вот мы видим то же самое нам нужно сделать и для нашего. ТГП поэтому мы переходим в наш стиль CSS Tag Head P Font size так ну в общем-то. Нормально мы можем убрать размер будет у нас 12 пикселей. Ну и единственный здесь момент, что будет. ПТ Санс PT Sans на шрифт так цвет наверное будет опять-таки тоже немножечко другой чуть-чуть посветлее до 555. Так — это будет свет для нашего п. Ну в общем то, что нам тоже.

0 комментариев
0

Читайте также