Меню
Спросить
???

Учимся верстать сайты. Часть 2. Шапка.

29 августа 2017
Учимся верстать сайты. Часть 2. Шапка.

Всем привет! Сегодня после прошлой верстки мы займемся ее стилизацией. На прошлом уроке мы верстали шапку нашей страницы ВК. Сегодня мы нагрузим картинки в папку resource и начнем писать стили для шапки сайта. На сегодня 29 августа, шел дождь, было жутко холодно. Носом чувствуя приближения моей любимой погоды, я укутавшись в плед с чашкой горячего кофе и земляничным вареньем сижу пишу этот текст. Поехали =)

SVG, PNG, JPG

Начнем с загрузки картинок. Открываем свою страницу вк и видим логотип ВК. Он изображен в виде файла SVG и выведен на сайт через стили и является фоном, а не элементом HTML, поэтому не все знают как его загрузить. Все очень просто. Кликаем правой кнопкой мыши по логотипу, откроется контекстное меню, выбираем меню "исследовать элемент", у вас может называться по другому, если не получилось, попробуйте комбинацию клавиш Ctrl+Shift+I. В любом случае, у вас должен открыть отдельный раздел в браузере, либо отдельное окно, с кодом сайта, что-то вроде этого:

Верстка сайтов knlnt

Я выделил красным, это то, что нам и нужно. Мы должны скопировать этот путь к нашей картинке и вставить в строку поиска после адреса сайта, удалив все не нужное. Должно получится, что-то вроде этого:

  1. https://vk.com/images/svg_icons/ic_head_logo.svg

Переходим по этому адресу и нажимаем правой кнопкой мыши "сохранить страницу". У вас скачается svg-файл. Перекидываем его в папку img, которую мы создавали в первой части.
Аналогично нам нужно поступить с другими картинками (лупа, колокольчик, нота и стрелочка возле миниатюры аватрки в шапке). Так же нам нужно скачать свою аватарку или любую другую картинку. Переименовываем все файлы как удобно вам. У меня получились такие названия:

  1. logo.svg - Логотип
  2. loupe.svg - Лупа
  3. col.svg - Колокольчик
  4. audio.svg - Нотка
  5. avatar.jpg - Аватарка
  6. strel.png - Стрелочка

Стили css

Мы уже создали файл style.css, кто этого еще не сделал, пора бы этим уже заняться. Открываем этот файл. Но начнем мы с index.html, поэтому открываем и его. Нам нужно не много его дополнить и исправить.
Первое, что нужно исправить в index.html. У нас есть два блока:

  1. <div class = "head_coloc"></div>
  2. <div class = "head_muz"></div>

Нужно обернуть их еще в блоки. Вот так.

  1. <div class="headcol"><div class = "head_coloc"></div></div>
  2. <div class="headmuz"><div class = "head_muz"></div></div>

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

  1. // Было
  2. <div class="headom">
  3.     Алексей
  4.     <img src="">
  5.     <div class="headom_str"></div>
  6. </div>

  7. // Стало
  8. <div class="headom">
  9.     Алексей
  10.     <div class="headom_str"></div>
  11.     <img src="resource/img/avatar.jpg">
  12. </div>

С правками вроде бы все, осталось подключить стили css к нашему сайту. В теге head указываем тег link, после тега title, с тремя атрибутами:

  1. <link type="text/css" rel="stylesheet" href="resource/style.css">

Отлично стили подключили, теперь начнем стилизовать наш сайт.

HTML, BODY

Пишем стили для тегов html и body. Стили у них будут одинаковые. Буду комментировать по порядковому номеру строчки в коде, указанным ниже.

  1. html,body{
  2. background:#edeef0;
  3. margin:0;
  4. padding:0;
  5. width:100%;
  6. height:100%;
  7. }

Начинаем со второй строчки. Здесь мы указываем цвет фона. Дальше на третьей и четвертой строчках указываем внешние и внутренние отступы по нулям. На пятой и шестой строчках - ширина и высота соответственно, по сто процентов.
Можете сохранить и обновить сайт, посмотреть, что изменилось.
Поехали дальше.

.HEAD

Здесь не путаемся, задаем стили к классу .head а не к тегу <head>. Внимательно пожалуйста.
И так по порядку.

  1. .head {
  2. Фиксированное позиционирование
  3. Ширина 100%
  4. Высота 40 пикселей
  5. Отступы внешние 0
  6. Отступы внутренние 0
  7. Положение относительно верха 0
  8. Положение относительно левого края 0
  9. Цвет фона
  10. }
  1. .head{
  2. position:fixed;
  3. width:100%;
  4. height:40px;
  5. margin:0;
  6. padding:0;
  7. top:0;
  8. left:0;
  9. background:#507299;
  10. }

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

.LOGO

Дальше особо подробно комментировать простые моменты не буду, если что все подробности есть в видео ниже в конце статьи.

  1. .logo{
  2. float:left;
  3. width:35px;
  4. margin:10px 0 0 190px;
  5. height:100%;
  6. background:url(img/logo.svg) no-repeat;
  7. }

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

.SEARCH_HEAD

Теперь займемся элементом "поиск". Здесь мы видим, что он состоит из двух частей, это значок лупы и тег input. Значок лупы мы можем указать через свойство background, но заметим, что и цвет фона у инпута не стандартный белый, поэтому мы должны совместить цвет фона и картинку фона в одно свойство. С помощью свойства background-position мы можем подвинуть нашу лупу, чтобы было красиво.

  1. .search_head{
  2. float:left;
  3. margin:5px 20px 0 130px;
  4. display:block;
  5. border-radius:15px;
  6. border:none;
  7. color:#68a4c8;
  8. font-size:13px;
  9. padding:7px 7px 7px 27px;
  10. outline:none;
  11. background:#305075 url(img/loupe.svg) no-repeat;
  12. background-position:left 8px top 8px;
  13. }

Теперь смотрим на поиск на странице ВК, цвет placeholder совершенно другой, отличается от нашего, это правильно, ведь у нас он стоит по умолчанию стандартный. Нам нужно это исправить.

Цвет placeholder

И так, нужно изменить цвет замещающего текста - placeholder. Как это сделать? Если мы подумаем логически, то этож блин текст, задайте ему свойство color с любым другим цветом и радуйтесь. Я так и поступил, но **й там плавал. Для этого нужно использовать другое свойство, не стандартное. Смотрим:

  1. ::-webkit-input-placeholder { /* WebKit browsers */
  2. color:#8fadc8;
  3. }
  4. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  5. color:#8fadc8;
  6. }
  7. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  8. color:#8fadc8;
  9. }
  10. :-ms-input-placeholder { /* Internet Explorer 10+ */
  11. color:#8fadc8;
  12. }

Вот таким не хитрым способом, мы можем поменять цвет у placeholderа.

.HEADCOL, .HEADMUZ

Теперь наш колокольчик и нотка. Тут все очень просто.

  1. .headcol, .headmuz{
  2. width:45px;
  3. height:40px;
  4. float:left;
  5. }
  6. .headcol:hover, .headmuz:hover{
  7. background:#486991;
  8. cursor:pointer;
  9. }

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

  1. // Добавляем картинки к элементам
  2. .head_coloc{
  3. background:url(img/col.svg) no-repeat;
  4. }
  5. .head_muz{
  6. background:url(img/audio.svg) no-repeat;
  7. }
  8. // Указываем стили
  9. .head_coloc, .head_muz{
  10. height:20px;
  11. width:20px;
  12. margin:0 auto;
  13. margin-top:10px;
  14. }

Тут тоже все просто, указали длину и ширину, внешние отступы.

.HEADOM

Теперь кнопка для открытия менюшки в шапке.

  1. .headom{
  2. float:left;
  3. margin-left:350px;
  4. width:105px;
  5. height:40px;
  6. color:white;
  7. line-height:40px;
  8. vertical-align:middle;
  9. padding:0 8px;
  10. font-size:14px;
  11. cursor:pointer;
  12. }

Прижали к левому краю, указали внешний отступ слева, указали ширину и длину, цвет шрифта.
Тут может кто-то не понять, свойства line-height и vertical-align мы задали для выравнивания текста по середине вертикали. Свойство line-height должно равняться высоте родителя, тогда текст будет стоять по середине вертикали.
Дальше указываем внутренние отступы, размер шрифта и другой курсор.
Так же нам нужно, чтобы этот элемент при наведении менял цвет, поэтому укажем ему псевдокласс hover.

  1. .headom:hover{
  2. background:#486991;
  3. }

.HEADOM img

Теперь автарка. Точнее ее миниатюра в это элементе.

  1. .headom img{
  2. display:block;
  3. float:right;
  4. width:30px;
  5. height:30px;
  6. margin:5px 8px;
  7. border-radius:30px;
  8. }

Скажу только, то, чтобы сделать ее круглой мы воспользуемся свойством border-radius и укажем размер равный ширине.

.HEADOM_STR

И последний элемент это стрелочка возле миниатюры аватарки.

  1. .headom_str{
  2. background:url(img/strel.png) no-repeat;
  3. width:10px;
  4. height:5px;
  5. float:right;
  6. margin-top:20px;
  7. }

Тут тоже все предельно ясно и понятно.
В итоге у нас получилось вот что:

Верстка сайтов knlnt

По моему очень даже ничего. Так классно и главное почти похоже :D

Заключение

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

Следующая статьяПредыдущая статья