<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

После создания блога он размещается в Интернете, опять же на Ваших глазах. Таким образом, приобретя данный курс, Вы, не обладая никакими знаниями по созданию сайтов, уже сможете их делать, а также выкладывать в Интернет.

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Прозрачная панель навигации в CSS

Прозрачная панель навигации в CSS

Когда в основе верхней секции сайта лежит большое изображение, то простым и хорошим решением для вписывания туда панели навигации - сделать её прозрачной. Такой дизайнерский приём имеет смысл, если фоновая картинка не однотонная.


Демо-пример приведен ниже

See the Pen Прозрачная панель навигации в CSS by porsake (@porsake) on CodePen.


HTML-код прозрачной панели навигации

В тег nav мы поместим блок div с логотипом компании и список ul с ссылками, которые являются пунктами меню. Ниже идут две секции: первая - с фоновым изображением, а вторая с произвольным текстом - для демонстрации работы фиксированной панели навигации.

<nav>
  <div class="logo">
    <h2>Булка - Хлеб</h2>
  </div>
  <ul>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Пекарни</a></li>
    <li><a href="#">Продукция</a></li>
    <li><a href="#">Партнёрам</a></li>
    <li><a href="#">Отзывы</a></li>
  </ul>
</nav>
<section>текст
</section>

Обычно в своих проектах я использую Google Fonts, во первых они красивее и гарантированно отобразятся на компьютере пользователя. Для логотипа отлично подойдёт декоративный шрифт - Lobster, а для меню я выбрал менее броский - Roboto.

Вставляем код в самый вверх CSS файла.

@import url('https://fonts.googleapis.com/css?family=Lobster|Roboto:700i');

По порядку начинаем писать стили, начав с общих - *, которые будут оказывать влияние на все элементы. Ставим нули у полей и отступов, прописываем цвет для ссылок, размер шрифта в процентах и задаем для box-sizing значение border-box. Это значит к заданной ширине и высоте любого блока не будут прибавляться размеры рамок и полей.

* {
    color: #412c2c;
    font-size: 100%;
    box-sizing: border-box;
}

Высота и ширина для полноэкранной секции - section.sec1, равны высоте и ширине области просмотра. Изображение, без искажения пропорций, адпаптируется под разные размеры экранов, благодаря свойству cover.

width: 100%;
height: 100vh;
background-size: cover;

Мы сделаем панель навигации не только прозрачной, но и фиксированной position: fixed - при прокрутке странице, она всегда будет оставаться сверху экрана, благодаря нулевым top и left.

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

Высота панели задана 70px, а содержимое панели выравнено по центру с помощью line-height. В скобочках rgba задан белый цвет и параметр альфа-канала 0.3, что обозначает степень прозрачности.

height: 70px;
line-height: 70px;
background: rgba(255,255,255,0.3);
padding: 0 80px;

На скриншоте ниже мы видим, что список ul не находится внутри панели навигации и не расположен горизонтально.

Прозрачная панель навигации в CSS.

Но сначала займёмся логотипом. Зададим обтекание слева.

div.logo {
    float: left;
}

Зададим покрупнее шрифт font-size: 160% и пропишем название шрифта - Lobster.

div.logo h2 {
    font-size: 160%;
    font-family: 'Lobster', cursive;
}

Как только мы напишем волшебное свойство display: flex и пункты меню li сразу примут горизонтальный вид. За выравнивание их по центру по вертикали отвечает свойство align-items: center. Но по вертикали нам не нужно выравнивать по центру, мы хотим разместить в конце главной оси - justify-content: flex-end.

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
}

Никаких маркеров.

list-style: none;

Сейчас ссылки списков прижаты друг к другу, в нижнем регистре с дефолтным шрифтом.

Прозрачная панель навигации в CSS.

Поскольку нам уже не надо выравнивать списки nav ul li a по нижней и верхней границами, то первым значением padding будет ноль. Второй значение 18px - это поля слева и справа от каждой ссылки в теге li. В итоге получается, что между ссылками в сумме будет расстояние 36px. Нас это устраивает.

padding: 0 18px;

Здесь идет чисто оформительский код. text-decoration - убирает подчеркивание ссылки, text-transforn - переводит буквы в верхний регистр, font-family - задаёт название шрифта.

text-decoration: none;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.