В этой задаче будем делать сайт. Сначала оформим статью, потом сделаем адаптивную шапку и меню, которые будут хорошо выглядеть и на мобилке, и на десктопе.
-
Посмотри, на то, как должна будет выглядеть статья, в результате твоей верстки. Для этого открой в браузере макет:
./article-design/index.html. Макет экспортирован в html. При клике на разные элементы можно в колонке справа увидеть стили, размеры и прочее полезное. К сожалению, разметка, которая получается при экспорте из редакторов, непригодна для размещения в интернете, поэтому верстальщики все еще нужны. Картинки для статьи лежат в папке с непроизносимым названием вarticle-design. Картинки в ней представлены несколькими размерами — выбирай любой. -
Сверстай статью по макету. Контент и картинки бери из макета. Отступы и размеры должы совпасть с макетом. Единственное, в чем может быть заметное отличие, это шрифты: шрифты в вебе зависят от того, какие из них есть на компьютере пользователя. Если нужного шрифта нет, то браузер выбирает какие-то дефолтные. Поэтому шрифт для заголовков создай такой:
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif
Шрифт для основного текста должен быть таким:
font-family: Georgia, Cambria, "Times New Roman", Times, serif
Для кода используй моноширинный шрифт:
font-family: "Courier New", monospace;
- Сверстай шапку для нашей статьи.
Открой макет, который лежит в директории
responsive-design. В правой колонке выбери пункт Desktop HD. Там над статьей появилась шапка сайта: логотип и навигационное меню. В навигационном меню сейчас выбран пункт "Блог" (мы находимся на странице блога), на примере пункта "Проекты" дизайнер показал, как выглядит пункт меню при наведении на него курсора.
Сверстай шапку сайта, помня о том, что меню семантически верно верстать так:
<nav>
<ul>
<li><a>Пункт Меню</a></li>
</ul>
</nav>
Чтобы убрать дефолтные буллеты списка, воспользуйся свойством list-style (https://webref.ru/css/list-style).
Для задания фона тебе пригодится свойство background-color (https://webref.ru/css/background-color).
Чтобы сделать или убрать подчеркивание ссылок есть стиль text-decoration (https://webref.ru/css/text-decoration)
- Сайты должны существовать в разных разрешениях экранов. Поэтому дизайнеры часто делают макеты, показывающие мобильный
вид сайта. У твоего сайта тоже должен быть мобильный вид. В дизайне из директории
responsive-design, в правой колонке выбери пункт Mobile. Этот дизайн применяется для экранов ≤800px шириной. В файлеstyles.cssуже есть заготовка@mediaдля мобильных стилей. Переопредели стили для мобильного вида. Проверяй себя, уменьшая окно браузера.
Источник статьи: https://medium.com/webbdev/closures-9a20e84b62cd