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

Автор Maksim Inshakov
Создание шаблона для WordPress с нуля урок №25

продолжаем веб-страницу портфолио Single на.

Значит мы сделали слайдер нашу галерею и теперь переходим к основному контенту он у нас очень похож на тот контент на скажем так на структуру которая была у нас. Для обычного как бы. Благова сайта самого первого значит.

Ну вот-вот синеньким вот я сейчас до обрисовал — это наш контент который у нас собственно и есть до далее будет у нас по аналогии с первым макетам What Content Left dalia будет у нас контракт, что будет внутри скажем каждого внутри каждого из них ничего такого нового ним и не придумываем.

Да будет наш заголовок основной и далее идут обычные наши параграфы и ничего в общем-то интересного расправой колонкой немножко всё сложнее, но тем не менее идёт примерно такой же заголовок вот как и слева до Project примерно с такими же сетями мы видим да просто, что здесь чуть. Будет дополнительно картиночка вот, а каждый значит — это будет у нас каждый из наших заголовков до в баре вот, а все вот эти вот пункты перечисления — это будут наши книги у то есть вот — это будет у вот здесь вот ул и вот — это также будет наш ул которого располагаются в общем-то наши там тегель я со своими ссылками. Ну далее на то есть. Обычные такие вот вещи по большому счёту можно взять и наверное скопировать из первого нашего макета разметку вот ну можно набросать рука в принципе. Тут ничего как бы сложного абсолютно нету в любом случае — это разметку даже если мы возьмём из первой части то скорее всего она у нас не получится. Всё равно надо будет и поэтому проще сделать с нуля как бы разметку набросать самому вот поэтому делаем разметку так у меня она уже сделано вот он наш Can't Lift — это наш левый левый контент с основным как бы содержимым вот — это наш заголовок картинка есть и весь текст нашего заголовка в Word в. Спан Ну. Для чего технология точно такая же потому, что мы видим. А у нас есть наклонной фоновый цвет несколько отступает от нашего скажем текста заголовка далее значит div Class Red Bar всё как я и говорил заголовок тоже внутри нашего заголовка контент обернуть в span чтобы сделать белый фоновый цвет и дать отступ как бы для нашего цвета и каждые сыночек у нас имеют классы у. Да ну и каждый из них возглавляется своих заголовком вот собственно и вся размер переходим. Давайте посмотрим, что у нас получилось картиночка в общем-то вырезается отсюда обычная картинка поэтому я на этом даже и не останавливаюсь отображена. Теперь мы можем перейти в нашей стиле и ну назначить назначить IP начинает настраивать нашей стиле для контента так делаем Content Left Content Left. Ну первое, что мы должны для данного контента на значит Vitz ширину сделаем 710 пикселей и флот сделаем Right What для нашего для нашей правой колонке редвар сразу же мы давайте сделаем, но опять-таки сразу же первое, что нам нужно сделать — это Vitz шириной 200 пикселей и float выравнивание по правому краю делаем floatride так да вот у нас. Получилось Только единственное флота перепутал float Left у нас здесь должно быть лет, а там где Raider лазарет. Так теперь всё стало на свои места виде большего. Да у нас как бы и контент. Нашид обратился теперь теперь у нас становится в общем-то понятно да, что нам нужен некоторые. Ботом от слайдера вот ну и далее, тогда начнём уже заниматься так слайдер портфолио вот он делаем margin-bottom наверное пикселей нам 50 наверное надо сделать, тогда отодвинули. Ну и значит займёмся правой колонкой сейчас тут стилей в общем-то будет не так много будет только лишь под наш дескрипшн — это будет наш заголовок так Content Left Project description начинаем. Значит со шрифта dafont у нас Normal дали 16 пикселей Droid serif background. Мы назначаем наш вот наклон BG до всего нашего курса он идёт значит наш вот наклон BG с левого края начинается X. Вот давайте мы посмотрим, что у нас так забыли здесь поставить точку до для название нашего класса поэтому ничего не получилось видим, что у нас немножко нужно vaper код заголовка отступить перед параграфом последующим ее немножко сдвинуть на центр. Наш наш background наклона до ачита здесь делаем 12 пикселей отступ чтобы у нас получился сверху так и далее. Что нам ещё нужно было сделать margin-bottom нужно было сделать 20 пикселей делаем так. Марджанджа мы отступили так следующие, что нам нужно сделать — это ну картинку и соответственно спанда значит Project description Image значит vertical-align назначаем ботов выравниваем по. Нижней линии и назначаем некоторые. Маржан справа margin-right где-то там примерно на 15 пикселей нас устроит. Вот то есть у нас вырубилась наша картиночка да и всё у нас стало на свои места и появился наш отступ. Единственное, что нам осталось сделать — это назначить некоторые. Точнее не стилей для нашего. Спан, а точнее будет один-единственный стиль — это будет background белого цвета и padding чтобы немножко мы могли отступить справа 20 пикселей так обновляемся вот смотрим видео. Да, что у нас заголовок пришёл в соответствии с тем то, что нам до нужно да то есть он белого цвета под ним фона не видно фон продолжается чуть-чуть дальше отступить есть контент наш расположен так как он расположен всё в принципе смотрится вполне неплохо. На этом данный урок. Давайте приём и справа и колонкой мы уже со стилями правой колонке будем разбираться в следующем нашем уроке. Спасибо за внимание жду в следующем уроке.

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

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