<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

Подписавшись по 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):

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