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

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

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

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

Вот наши навигация до 2 уровня будет включать в себя такой вот внутри данного блока у нас будет.

Ну ещё один там Tag с нашим списком и скажем все остальные внутренние наши. Ты где — это будут наши. Тагиле соответственно они будут ссылочка me по сути по большому счёту делаем обычные в общем-то меню на дисках. Поэтому вот в разметке здесь абсолютно ничего нового я вам не скажу ничего не придумаю единственный нюанс, что здесь у нас идёт вот наклонной наклонной вот эти. Ну я их так обозвал. Да значит вырезать их нужно будет. Вот Но таким образом вот по-другому чтобы они даже вот так вот вам нужно будет нам вырезать их чтобы они чтобы. Здесь был немножко, но другой высоты здесь наши вот эти наклонные линии так так мы наверное. Вот вот так вот. Вот наверное вот так всё-таки сначала я правильно показал. Вот всё-таки вот так вот будет нужно будет выезжать данную картинку так — это то, что будет у нас в нашем фоновым цветом дали разметка. Понятно поэтому на разметке. Я в общем-то. Останавливаться не буду. Сейчас переходим вот наш портфолио. А причём. А причём мы будем делать. Вот здесь до перед нашим контент мейном здесь делаем div Class. Ну я назову поджав так страничная навигация и заполнен просто его обычно в нашем списком вот, что у нас должно быть наш список пункт ссылке в общем-то ничего опять-таки нового здесь не не не сделано так вот он как он выглядит в размере собственное. Давайте, тогда будем назначать стиле и выравнивать наш 3G на так портфолио у нас будет делаем джинов назначаем background. Урал так я назвал наклон бгс вот маленькую 5 на 5 пикселей так получился до квадратик он должен повторяться у нас с низу и по горизонтали далее мы должны значит everflow для нашего блока поскольку он у нас должен значит внутреннего контент у нас платится, но и. Видимо нас наш background идёт. От края до края о должен идти, но с некоторыми отступами. Но с такими живот с тупыми которые у нас идут и в контенте поэтому здесь мы должны сделать ещё и. Маркин сверху не нужен справа 30 пикселей снизу. Давайте сразу пикселей 50 сделаем и 30 пикселей, а получается слева так вот теперь по фоновым изображением у нас на всё в порядке так фоновые изображения точнее в верхнюю полосочку верхнюю полосочку мы сделаем фоновым изображением для нашего ума то есть джинов ул далее делаем background в общем-то по большому счёту мы можем. Всё весь background скопировать он будет точно такой же только здесь укажем вместо Bottom Top. То есть он будет у нас повторяться по верхнему краю по горизонтали бот. То есть у нас получилось и нижняя и. Верхняя полоска с наклонными вот этими в ресничками. Да так Overflow hidden поскольку будет у нас всё флоте цену и list-style назначаем, но он так то, что касается нашего ул далее переходим к элементам списка ли сразу, что нам нужно сделать — это сделать float Left. Ну и назначить фонд фонд будет 15 фунт сайт будет 15 пикселей и шрифт PT Sans так сейчас его просто найду данный шрифт и так Font PT Sans 15 пикселей. Так давайте посмотрим, что у нас получится. Да вот что-то что-то то, что написали то и есть дафлон. Олеся ни влево своим размерам и шрифтом далее осталось нам чуть-чуть выровнить и задать стили для наших ссылок то есть наши ссылки. Ну первое, что они должны быть сделана эта дисплей блок для чего для того чтобы мы дальше назначают впадинки то есть этот момент я уже тоже объяснял делаем паддинги по 15 пикселей сверху и снизу и по 20 пикселей справа и слева. Ну естественно. Нам нужно будет ещё подправить цвет для наших ссылок так-так-так идём 33 так назначаем. Свет ну вот по большому счёту наше меню и каким. Как нужно до единственное, что у нас осталось — это в наведенным состояние чуть-чуть под. Отправить Отправить внешний вид, что значит подправить значит сделать нашу нижнюю границу вот мы видим, что у нас есть нижнее подчёркивание по наведению, но — это не подчёркивание — это на самом деле мы сделаем как и в нашем. Аналогично в пункте меню уберём подчеркивание ссылок и сделаем их вот ну такого цвета жёлтого каким они и должны быть вот-вот, а всё, что нам нужно сделать. Ну почему подчеркивание будем играть потому, что мы видим. Что у нас по умолчанию по наведению ссылка всегда остаётся подчёркнутый поэтому поэтому переходим в наш CSS IE для ссылки в Hover в заведенном состоянии. Назначь border-bottom 5 пикселей сплошная так цвет цвет у нас будет. Вот такой вот вообще в CSS на самом деле вот есть метод указания переменных то есть мы могли в самом начале указать допустим, что вот в данный цвет который у нас используется для многих бордеров допустим назвать его Yellow Border я и обозначить его вот скажем вот как вот такой вот цвет и потом просто каждый раз чтобы не писать. Вот такой вот цвет. Да собственно. Но запомни всего достаточно сложно д7а 29 и в голове на протяжении всей верстки держать его в голове, но если вот так вот какой-нибудь дать название вот такому свету какой-нибудь например.

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

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