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

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

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

Вот про выношу колонку, но по большому счёту если мы посмотрим то заголовки у нас имеют примерно такие же стиле. Да как и заголовок для нашей. В центральной части да то есть вот этот заголовок по сути.

Это тот же самый заголовок как и в центральной части.

Да только без изображения поэтому работаю тут будет много будем много использовать из того, что уже есть. Поэтому переходим в файл стилей CSS так вот она наша Right Bar, что мы здесь будем видео Bright Bar H3. Так значит так и задаем даны класс для заголовков H3 которые внутри находится нашего двора мы будем делать. У нас вот он наш дескрипшн главный заголовок для основного нашего текста делаем здесь ну в общем-то собственно тоже самое только — это будет наш заголовок H3 Normal 16 пикселей Droid serif background здесь можно сделать менее 12 пикселей. ООО ровненько сделать его по центру располагается слева и по центру репетиция по иксам. Так ну и вот стук снизу нам в общем-то тоже никакой не повредит. А вот пикселей если мы посмотрим на макиту тоже здесь вот в общем-то достаточно. Кто такой 20 пикселей и на получается у нас, что всё в общем-то выровнялась. Да неплохо в следующий момент который мы с вами сделать — это назначить стиле для нашего. Спан то есть чтобы у нас контент заголовка был на белом фоне имел некоторые воздух опять-таки всё будет у нас тоже самое. Да вот драй бар H3. Спан тоже самое будет, что и для нашего предыдущего спора берём копируем background белый цвет эп1 справа назначаем 20 пикселей вот до нас получается следующий момент который мы должны сделать — это уже буду касаться нашего. Була из наших непосредственно уже списков с перечислением ссылок. Так значит идём Right Bar так Rainbow. Ну, что нам нужно значит list-style None опять-таки указываем. Ну и далее, что она может быть ещё понадобится — это значит 30 где-то пикселей снизу то есть чтобы у нас не прилипали наши последующие заголовки эдак нашем предыдущем улам. Ну и собственно, что остается нам сделать — это цвет для наших ссылок. Так значит делаем Right Bar. А так назначаем Color 33 так вот собственно. Всё у нас получается и готова. Единственное что. В правой колонке у нас по наведению цвет ссылки получается вот такой. Лондон так делаем на чит код для ссылки в наведенным состоянием и Color. Так эколор мы берём тот который у нас есть вот собственно всё, что нам нужно сделать. Ну если. Скажи точно в соответствии с макетом то мы видим, что у нас вроде бы и подчёркивание убирается можно убрать подчёркивание можно оставить — это не самый принципиальный момент текст decoration можем указать, но он можем не указывать. Вот ты теперь у нас видит. Да все наши ссылки работают и адекватно реагирует единственный момент опять такие выровнены вида, что здесь в одну линию у нас по макету немножко не неодинаково ни на одном уровне стоят значит для этого можно назначить некоторые padding вот здесь вот сверху но. Давайте попробуем 10 пикселей начать, но там потом. Ну хотя вот 10 пикселей наверное даже перебрали. Да я думаю пиксели 5-6 может быть всем может 6 попробуем где-то может 6 примерно так вот должно подойти. Может всем в общем-то — это величина подбирается чтобы было прямо вот в. Ровно в одну линию так основной контент у нас в общем-то есть досмотрим дальше, что у нас идёт ещё по нашим значит по-нашему Content to read Project идёт у меня в общем-то вот эти relay Test Project — это не, что и как можно взять и скопировать просто. А волонтерство. Все наши вот эти вот классы они все отлично подходят и становятся в общем-то так как и должны быть. Для нашей страницы портфолио Single поэтому идём можем идти на главную страницу так. Андерс слайдер вот он наш Content Button H1 наши последние работы копируем авава cmain пошёл вот до класса Advanced преимуществ копируем. Весь вот этот вот блок и ставим его вот здесь вот наше портфолио так на главной. Ну понятно ничего не изменилось. А вот на нашей странице портфолио символ мы наверное его не туда. Просто не туда вставил так наверное. Кстати мы поставили его туда, но мы не отменили обтекания поэтому так Raider у нас-то завершил контент. У нас завершился вот здесь мы должны сделать своими Def назначить ему там например Style калибос то есть отменить выравнивание отменить выравнивание влево отменить выравнивание вправо которые у нас применилась в предыдущем блоком. И теперь мы видим, что у нас всё в порядке так единственный момент, что она. Вот последняя ссылка абсолютно ненужно нас такой заголовок вполне устроит What a valid astvac мы можем заменить на рейд Project на похожие проекты и единственное, что нам осталось сделать. Ну скажем если подразумевается, что по наведению вот что-то происходит. Да и какой какие-то вот такие подсказки формируется то в общем-то можем и ничего не делать и так вот и оставить, но вот вроде бы как идет по макету то внутренние блоки ваших ссылок. Да мы можем как бы убрать. А ссылка у нас будет просто вот наша внутренняя картиночка так раз-два-три-четыре вот просто наши изображение они являются ссылкой. То есть если кликнуть мы куда-нибудь переходим на подробная там того или иного проекта. А вот картинки здесь немножко другие. Ну я уже в общем-то перерезать не буду вот, а что ещё здесь можно сделать сделать. Можно немножко больше отступ на. Ну вот например от нашего блока Clear вот здесь вот допустим 1br поставить Tele2. Баира поставить чтобы немножко. Вот опустился ниже наш блог related Projects. А так вроде бы вроде бы всё выстроена неплохо так. Единственное, что вот этот вот. Блок Мы можем сделать как.

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

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