Урок #4 (продолжаем верстку)

Содержание:

Привет из прошлого! Ведь эту статью я пишу еще весной. Соскучились по верстке? Думаю, да. Дайте подумать, на чём мы там остановились? Ах да, мы закончили на логотипе. Что же, поехали дальше...

Верстаем <nav>, т.е. навигацию

Откроем тег <nav> . Внутри него создадим еще один класс wrapper.

Напоминаю, что это делается так: пишите .wrapper на новой строке и нажимаете Tab.

Внутри него пишем тег <ul> с классом menu. Да, не удивляйтесь, любым тегам можно присвоить класс, не только <div>.

Чтобы быстро создать тег с классом пропишите ul.menu и нажмите Tab!

Внутри тега <ul> элементы заключаются в теги <li>Элемент</li>. Создайте 5 элементов: Home, About, Pages, Blog и Contacts. На этом мы закончили с тегами <div> <nav> и <header>. Должно получиться так:

<ul class="menu">
  <li>Home</li>
  <li>About</li>
  <li>Pages</li>
  <li>Blog</li>
  <li>Contacts</li>
</ul>

Теги <div>, <nav> и <header> должны были закрыться с помощью плагина Emmet. Пожалуйста убедитесь, что это произошло.

А теперь я объясню, что это за ul и li такие. Тег <ul> - тег списка, а то, что находится внутри тега <li> - является элементом этого списка. Если вы сейчас сохраните наш файл и обновите страницу в браузере, то вы поймете, о чем я.

Делаем элементы списка кнопками

Вы наверное не поняли, а для чего нам вообще этот список. Элементы этого списка, заключенные в тег <li> будут кнопками на нашем сайте, или как правильней называть их с точки зрения программирования - ссылками. Давайте же создадим их.

Вот пример ссылки:

<a href="https://t.me/codingissimple">Ссылка на наш канал</a>

Давайте разберем её подробнее.

<a> - тег привязки или проще тег ссылки.

href - атрибут, который содержит URL, который надо открыть.

https://t.me/codingissimple - URl, который необходимо открыть при нажатии на ссылку. Заключается в двойные кавычки.

Ссылка на наш канал - текст, который является ссылкой.

</a> - закрывающий тег.

Теперь сделаем ссылками все наши элементы списка.

<ul class="menu">
  <a href="#"><li>Home</li></a>
  <a href="#"><li>About</li></a>
  <a href="#"><li>Pages</li></a>
  <a href="#"><li>Blog</li></a>
  <a href="#"><li>Contacts</li></a>
</ul>

Почему я использовал решетку? # - универсальный символ, который обозначает, что что-то является пустым. В будущем вы сами создадите страницы About, Pages, Blog и Contacts и вставите ссылки на них.

Откроем style.css и добавим туда еще несколько строчек кода. Обратимся к тегу nav и зададим ему высоту (height) 60 пикселей, цвет и высоту верхней границы (border-top) - 1px solid #e7e7e7. Те же свойства и для нижней границы (border-bottom). Должно получиться так:

nav {
  height: 60px;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}

Задайте .wrapper находящийся внутри nav нулевой отступ автоматически.

nav .wrapper {
  margin: 0 auto;
}

Внимание! Обратитесь к нужному .wrapper, т.к. как вы помните у нас их 2!

Обратимся к классу .menu и зададим ему такие параметры:

.menu {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;

Давайте теперь разберем незнакомые.

list-style - универсальное свойство. В данном случае убирает точки.

flex-direction: row; - теперь все элементы списка стали горизонтальными.

Если вы забыли другие, то вспомнить можно здесь.

Обратимся к li и зададим отступ справа (margin-right) в 50 пикселей, а отступ сверху (margin-top) - 7 пикселей.

Теперь обратимся к тегу a, который находится внутри класса menu (т.е. будет такой код: .menu a {) и зададим text-decoration: none; (убирает подчеркивание ссылки) и color: #000000; (убирает характерный для ссылок синий цвет).

Делаем слайдеры

Дальше по плану у нас слайдеры. Создадим тег section с классом slider. Внутри него создадим класс homepage-slider. Внутри homepage_slider нужен класс slider-item. Внутри slider-item поставим картинку slider1.jpg. О том, как это делается, сказано здесь. Создадим класс mask . Внутри него пишем тег span с классом category. Внутри этого тега пишем любой текст, например Lorem.

Для чего нужен тег span вы поймете, открыв наш файл index.html в браузере.

После тега span пишем тег h2 с классом title. Внутри него напишите любой текст. Далее создайте тег i, внутри которого сделайте ссылку с текстом See more... Закройте тег div. Теперь закройте еще один тег div.

Немного о том, какой текст написать, если еще не придумал его. Напишите lorem2 и нажмите Tab. Теперь у вас появился текст на 2 слова. Вы можете также написать lorem35 или lorem135 и нажать Tab. В этом случае у вас появится текст на 35 и 135 слов соответственно. Работает только с плагином Emmet.

Что-то мне подсказывает, что вы сильно запутались. Поэтому вот вам код, сверяйтесь и ни в коем случае не списывайте, старайтесь писать самостоятельно. Я сам знаю это искушение скопипастить код и получить готовый проект не мучаясь, но таким образом вы ничему не научитесь, это я по собственнму опыту говорю.

<section class="slider">
    <div class="homepage-slider">
      <div class="slider-item">
          <img src="images/slider1.jpg" alt="slider1">
            <div class="mask">
              <span class="category">lorem</span>
              <h2 class="title">Lorem ipsum dolor sit amet!</h2>
              <i><a class="more" href="#">See more...</a></i>
            </div>
        </div>

Теперь скопируйте ваш код начиная с класса slider-item и вставьте его еще 2 раза. Теперь поменяйте images/slider1.jpg на images/slider2.jpg и images/slider3.jpg соответственно. Закроем 2 тега div и тег section.

Уже запутались в количестве тегов и не знаете, сколько еще надо закрыть? Тут вам поможет Emmet. Просто пишите </ и он будет автоматически добавлять тот тег, который нужно закрыть. В шаге выше у нас очень много тегов div , поэтому просто пишите </ , пока Emmet автоматически не подставит section> , тогда вы можете быть абсолютно уверены, что закрыли все теги ;)

CSS для тега section

Обратимся к классу homepage-slider, переведем его в режим flex и зададим justify-content: space-between;, с помощью него появится расстояние между слайдерами. Перейдем к классу slider-item и зададим ему не совсем обычную ширину. Нам нужно, чтобы между слайдерами было расстояние 13 пикселей, а у нас 3 слайдера, следовательно мы напишем такой код:

.slider-item {
  width: calc(33.3333% - 13px);
  position: relative;

Прочитать, о том, что такое position: relative; будет вашим домашним заданием.

Обратимся к классу mask . Зададим position: absolute; , top: 0; , left: 0; , ширина 100%, высота 100%, background: rgba(49, 49, 49, 0.7) , цвет #fff, переведем в режиим flex, выравним по горизонтали и вертикали, зададим flex-direction: column;

Почитайте про незнакомые свойства самостоятельно.

Обратимся к a , который находится внутри mask и зададим размер шрифта (font-size) 10 пикселей, уберем подчеркивание (text-decoration: none;) и сделаем текст белым.

Обратимся к классу category и сделаем все буквы заглавными (text-transform: uppercase;), а размер текста 12 пикселей.

Обратимся к img, который находится внутри класса slider-item и зададим 100% ширину и высоту auto (height: auto;).

Стараюсь не давать вам исходный код, чтобы вы старались писать его сами, а не списывать. Если у вас что-то не получается или вы что-то не поняли, сначала поищите информацию в интернете, а если не найдете, то обращайтесь ко мне в Telegram.

Домашнее задание

Узнать значение неизвестных CSS-свойств в интернете. Рекомендую сайт htmlbook.ru.

Урок #4 (продолжаем верстку)

Урок #4 (продолжаем верстку)

Верстаем <nav>, т.е. навигацию

Делаем элементы списка кнопками

Давайте приведем навигацию в подобающий вид и завершим работу над header

Делаем слайдеры

CSS для тега section

Домашнее задание

Report Page