- Спойлер
- Прежде чем делать записи на страничке, поговорим о макете страницы.
Любую страницу можно представить в виде упрощенной модели типа
Или вот так
Ну не суть важно как, но элементы типа header(верх, заголовок сайта), nav (навигация или меню), main (основное), footer (низ, подвал страницы) присутствуют в подавляющем большинстве страниц. Раньше их разбивали div’ами, только вместо классов ставились id, то есть складывалось в контейнеры типа <div id=«header»></div> или <div id=«nav»></div> и так далее. В css id описываются через #, то есть класс через точку вначале, а айди через решетку вначале.
Для чего? Чтобы проще искать потом по смыслу что и где.
Сейчас html5 позволяет описывать не через айди а просто вместо div’а заключать в теги header, nav, main и так далее. Их вообще много
Но использовать их все конечно необязательно.
Мы сейчас верх страницы (телефон и наименование) заключим в тег <header></header>. Дело здесь конечно не только в том, чтобы обозначить топ сайта, нам нужен дополнительный блок, дальше будет видно зачем.
Тут есть такой момент. Сейчас наши блоки Телефон и Наименование по высоте шрифта. И если мы поменяем шрифт у Наименования, то блоки сразу станут разной величины. Мы можем задать высоту в пикселях, но тогда «двигать» буквы, чтобы были по центру, придется отступами, и опять же из-за разной величины шрифта подгонять придется каждый отдельно и не факт что выйдет как надо.
Тут как раз и расскажем об отступах.
Отступы есть двух видов margin и padding.
Марджин дает внешний отступ, то есть вот наш блок имеет границы и добавив значение марджин мы отодвинем наш блок от других блоков, как мы сделали в меню, отодвинув кнопки друг от друга.
Паддинг дает внутренний отступ, то есть в тех же кнопках меню, кто вместо фиксированной высоты в кнопках подставил паддинг увидел, что граница блока расширилась за счет отступов от внутреннего элемента(текста). Это позволило задать равный отступ сверху и снизу и текст оказался посередине.
Кто не использовал - может попробовать в li вместо height подставить padding:2px;
Если пишется только одна цифра, то отступ будет одинаков со всех сторон.
Если две, типа padding:1px 2px; то первое верх/низ, второе лево/право;
если три типа padding:1px 2px 3px; то это верх, потом лево/право, и последняя низ;
если четыре типа padding:1px 2px 3px 4px; то по очереди верх, право, низ, лево.
Это нет необходимости запоминать, потому что отступы можно задавать типа
padding-top:1px;
padding-bottom:1px;
padding-left:1px;
padding-right:1px;
Марджин записывается абсолютно точно так же, только вместо паддинг пишем марджин.
Опять же о паддингах и марджинах с картинками
http://htmlbook.ru/css/margin
http://htmlbook.ru/css/padding
Итак вернемся к хедеру.
Сделать равномерный отступ от верха и от низа с помощью отступов, как это было в кнопках мы не можем - разные шрифты у нас будут на Наименование и Телефон. Что мы сделаем? Мы поменяем стиль отображения на табличный. По умолчанию div отображается как блочный (display:block), но мы хотим табличный(display:table), потому что……ну все пользовались таблицами, там если меняешь высоту шрифта в одной ячейке то меняется высота во всем ряду, плюс для таблиц есть свойство vertical-align (выровнять по высоте).
Таким образом самому хедеру укажем что вести себя надо как табличка, а Наименованию и Телефону укажем, что они table-cell, то есть элементы таблицы, тоже через display. Раз мы им одинаковые свойства даем, то Телефон и Наименование укажем через запятую чтобы два раза не писать. А также из Наименования надо убрать свойство float, раз у нас теперь не блочное а табличное отображение - оно нам не надо.
Также в хедере я сейчас указала бекграундом серенький цвет, чтобы было видно сам блок. Вернее серым цветом сейчас будут наши отступы, паддинг то есть. Мы его тут используем, чтобы текст от края отодвинуть. Отступы указаны у меня частично в процентах, так тоже можно.
header {
display: table;
padding: 20px 5%;
background:grey;
width: 100%;
box-sizing: border-box;
}
.site_name, .telefon{
display:table-cell;
vertical-align: middle;
height: 120px;
}
Теперь как бы мы не поменяли шрифты - текст будет посередине. И так как мы не фиксировали нигде ширину, то при изменении размера экрана оно будет плавно съезжаться и разъезжаться.
Для имени сайта я задала размер шрифта в 3em.
Вообще размеры можно указывать в em (высота шрифта элемента), ex (высота символа х), пунктах (pt), пикселах (px), процентах (%), дюймах, сантиметрах, миллиметрах, пунктах.
http://htmlbook.ru/content/edinitsy-izmereniya
Чтобы покрасить блок как-то красиво, надо убрать бекграунд у Наименования и Телефона и применить что-то к бекграунду Хедера. Если хочется так же сине-желтый, то используем градиент слева направо синий до середины, и с середины желтый
background: linear-gradient(to right, blue 0%, blue 50%, yellow 50%, yellow 100%);
Теперь строчка в Наименовании width:50% становится лишней, она ни на что не влияет больше.
Также мы видим, что у нас есть белая рамочка вокруг нашей странички, отступ, это у body по умолчанию, так что где-то в начале файла со стилями запишем
body{
margin:0px;
}
Вообще на этом месте я в боди перенесла бекгаунд из хедера. В дальнейшем будет лучше видно блок с текстом. А в хедере мы уже все блоки посмотрели.
Займемся меню.
В домашнем задании было, как расположить меню горизонтально, мы сейчас рассмотрим другой способ, аналогично как поступили с хедером, то есть ul зададим табличное поведение display:table; и ширину в 100%, а для li обозначим что это элементы таблицы display:table-cell;
Тут же я убрала все бекграунды, рамочки и тени у <li> и у <a>. А также ширину и высоту в пикселях, высоту заменила внутренними отступами padding:9px 0px;
При таком расположении меню чтобы хорошо выглядело бекграунд логичнее добавить к ul
ul{
display:table;
width:100%;
list-style-type:none;
background: #448AFF;
}
li{
padding:9px 0px;
display:table-cell;
text-align:center;
font-size:18px;
}
a{
text-decoration:none;
color:black;
}
Если посмотреть сейчас то видны опять непонятные отступы слева и снизу - это по умолчанию у списка есть отступы, обнулим их, добавим к ul margin:0px; padding:0px;
Итак, меню у нас не просто вышло в линию, но и расположилось равномерно в длину.
Разметим где у нас будет текст.
В хтмл после меню
напишем
<main></main> ну и вставим посередине какой-то текст, обычно пользуются текстом-рыбой, вот тут можно взятьhttp://ru.lipsum.com
Копируется любая часть, язык можно менять, не принципиально.
В стилях пропишем
main{
min-width:330px;
height:100%;
margin-left: 20px;
margin-right: 20px;
padding:15px;
background:white;
}
То есть мы его разместили с отступами от края слева и справа марджинами и подвинули текст внутри от края паддингом.
Main подкрасили белым. Но видно что блок не занял всю высоту, а только по тексту. Потому что высота 100% равно высоте родительского элемента. У нас это body. Но поставить высоту для боди недостаточно, потому что у боди родительский элемент html. Так что в начале документа со стилями пишем
html, body{
height:100%;
}
Вообще все что касается боди и хтмл выносим в начало.
Для ширины мы указали минимальное значение (min-width) потому что если указать просто ширину, то при изменении размера экрана то, что не будет влезать окажется за «кадром», а если не указать совсем, то окошко с текстом будет схлопываться пока текст не пойдет по слову в линию.
Итак у меня вышло https://jsfiddle.net/jpa5x16L/5/
Для подбора цветовой палитры несколько ссылок:
http://www.creativebloq.com/colour/tools-colour-schemes-12121430
В следующий раз займемся картинками и паттернами
- Спойлер
- cybd писал(а): добавить подвал (футер)
