Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
![image](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uW2jsxp3nTJqkdLEBOLCHOG86TMuGhrS6o3I4bJGtZWyKb6cTsC7lTtN7m_c2LgygWjP8ApbsbgcNeQCCeNAZz8RfOJxEUDuDKSxclUb8wXlcRp106IUFueq6tF6A1aNv7BiCNmBL4qeAepm1BayDrKK2L_rgtZtaAQ8du=s0-d)
Первым шагом давайте создадим простую структуру файлов для наших файлов.
![image](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s9Eq0eyxLY-pgTZksyWDw77kw3tIaFJGrau7Wqotrt7FRTMGaFKBJ1kQVr9CX9O8dZ62lp6IN9TaKa5NUAUDNJWOO24ashpNUam1rvzGcblEJysBcl2fHe_XOsMBIC2P8St1QS_atijib8DxDTKiOQuS-EdO7OeBrt4WM=s0-d)
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles.css:
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:
Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.
Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.
В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uSBX8fhn7QwNSZI7ZNiWcmaluxAT-L6R4B6kJhoVQYoBpnHr6ritLoc8V1mAlNiNeAFx7klgY4KXB1j94ducuaanm4Q2KFJBgxw4Z3vl9RNnqzLf6fGQYkv2GMuXYHsWo-oi45h0IBbnEsixOpkQzZtIgZkuj04Ipw_G9k=s0-d)
Опишем это в теге body:
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Затем укажем стили блоков:
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tgnffhfdSLlIeucU0VrKhT-Og34oEl2lj6bKR6KuF0ruLevEPLWj3CVHk2xH1NdggAmgr9ddqkHuYufeS1ZHe-DAoz3rzwwZ9JdMPA3g0WOLPY3g3fBoa9K94bRUzkjHl1pl3xfJUa282A3FJkA3ooFL_62e56SODQivE=s0-d)
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sw7GFZtIeKbRSqIlXi5zV6O-FDiRaOFDe7IThpp_dFcVyyfOsYGgI7eOqy2YjCNZ3mhc1vKUG2C97JSv8Ue2VHgmu9n_8F60FsNibPfjquO1Vgs-zgJ6HClV7obwEc7-i4wTbG8F-spHJvKPWrGDkb6DdTaZUbYcMWrpQF=s0-d)
Вставляем форму поиска в тег header:
И стили выравнивания по правому краю для нее:
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sMuKfj6741gL8CBozLZ2jieD_lwvapoOY_fb40SDN6GTv_0sYN6-tl6I4G7Ul2H0cLqJam5CFKPO8ny9gRltwW7h2OPF5U-pU0VJo6hd8A4txiAbFxAANn-26VYDYAFYFgT2h_3dkvuTmr5Ae1jwAJYAIsTA=s0-d)
Для отображения меню необходимо создать список со ссылками внутри тега nav:
CSS стили для него будут следующие:
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_smmlwXr6mTV2IT9Blt5LeKX05Zbt4NQlwtuwc5k6mERc_cb4jPdmzlx8PYWIzCpSkI_s15NcGMELS7x8pCfsnhonMRCG5qToMwgj5rw23fff6HDbBksZEsety77Y9jEmzbXcLoJ-3IpBIcR5oAdWtgfv038ehWYJ2EfNr8=s0-d)
Заголовок страницы помещается в div с идентификатором heading
Заголовок имеет следующие стили:
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Для того, чтобы создать колонки страницы нужно прописать следующие стили:
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sIPh9BBNGLqczWwd6cWTvxm5S6-zq9FeolgsEkBjjbpRqI_jJdOY9D3eBpWOWJZE9_S9PCUE5HkU-aCdSXtnioSKCYao61784B1fi2UkONkFxBhzxzx5E1a_KOiQSqO57oOvxifNoDX4S8FiySRwWfxZlYHkbPdqs-eJRH=s0-d)
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
И применяем к подменю следующие стили:
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_swg7DKYw5erD9ZB2hlt6x-ptojMmPIlj-Q2V2UUvH6-fjifQtXFUjmKyFuwKZNv8HFo2DMXUkbTBYJLDTs6GHeHk9lUG5v3JPxiZ_qVDowFRcFDkgb-0MbmSBDkFOEKnVG-cEyEYbJKkpud23-0asgfQaU_2nJYhSd3hUY=s0-d)
В html это выглядит так:
В стилях укажем шрифты, цвета и отступы:
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.
Вёрстку контента начнём с добавления цитаты.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uMgCTPYa909WuFFHPMpcHKz0OQ-r-wqkqzH2Tiwkmy9dT1PQHBH3XloI5mh3n6i8d-hzDtCgbCBlmhOunExN9K85537uRzbqBZpC9Vqb30edkll0Qo_AsoaDNNwBW0Bs2AkG5HCLNmVbssO6H5LYIcIkwwEXO-hLTyikew=s0-d)
Добавим код цитаты в раздел section
И применим для него стили:
Здесь нет ничего нового, так же — шрифты, фоны и отступы.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t0fmYNCiwwRbrZGE8qEcdRg8QVENBzcG_P2tfaKe4yGmgN7GVyMIlkhHM8hSRUv42zNsE1avPuGXuIvrL4m6bE50O2C8xh0In6SCHYFF2sx9hRHZ1W6gSPJBs_Ho6h0pvRWPdJMo8vPruurmdKUTuhuQ2oloAovD6xMvA=s0-d)
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :
, которому зададим следующие стили:
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_unQsS6BeWCCsza9uA-_P4LDRLbr-qxv9Z74d6VMTJh7s8DLIaeE-IcuW_fFL79781XrrsQwB5Pcd0ybmqiiBjUz6WKkSeWgAkPkcT2A4QSu541iZk2LQ48GH57CEUM8NzIILPAB-p3C9xs_AZcS-pvUObQIXC0WN836wTK=s0-d)
При верстке этого блока добавим сначала заголовок:
Со стилем:
А затем два блока-строки с карточками сотрудников
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vpI0XhLc8YyUTYJVMkyEmxOGgdyTeyB_jO53vHgcG0q4AIW_dumHXbXQuK_Ih2TInbDZuoX4cofFFYBBEcEhHMSMX7M1DnsLaQ1quMm_GHywJLfT4rU-QwonpG0Ovr55nueZ5OWPypHDKXwLfUXSGJIxCROzdjvOvm5SBU=s0-d)
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Верстаем содержимое ленты Твиттера:
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t1dm29wTi-keqSrfBYhHvx8w6fTaqG8vxs8f0N8_zbiJIWR1iFu2K58JE6gNvzz2Bzg5cRFZjKYv9LRfJhMgZg_NLp5QjQkFjLYel6S8aS6l6I-R65nJ0tyoavjsGSkp2Q7uBjUmtmhBFdW6OOXlv92F_o70966n44iESE=s0-d)
Стили:
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта представляет собой два блока со ссылками:
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uzlspuIJK7iK057jjEGdTgIzOZZi0OTAnMeka2d6aiHnXV0XxV2wfuYFM27e6KpQDALpHiKMHEyQrjGZXsUbVuoXDJ2ucpTuDI5cfi0aaa3VXsyz8x-65Q1x7xQMfolwKzBorVeKuuPD6dgSVDSOU2ANTYsRtydI_6mHH3=s0-d)
Вставляем набор ссылок в контейнер
И стилизуем их:
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_srSAuWL3tMNCMeXqJtqoMxKHX0-YTCcrTj74aQ-jEcOfndtfO5B8dJ-fOyoSOXgCDDUIJ5aN06pFPe-V6QHaJBkCK91Rmjx_hweYMV3QAN--FxZSBZXM66XACAz7bTL-MOhKxZmZGbysxtEGwSZdDQIq1fdJtT-wBwEdgj=s0-d)
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом наши работы закончены. Готовый проект можно скачать здесь.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Структура файлов
Первым шагом давайте создадим простую структуру файлов для наших файлов.
- Создаем папку с названием нашего проекта, например Whitesquare.
- В ней создаем пустой файл index.html.
- В папке проекта создаем папку css с пустым файлом styles.css.
- В папке проекта создаем пустую папку images.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
- Как будут нарезаться изображения?
- Какими будут основные стили?
- Какой макет у нас получится?
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles.css:
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
Каркас HTML
И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:
Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.
Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.
Макет
В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
Опишем это в теге body:
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Затем укажем стили блоков:
Логотип
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
Поиск
Вставляем форму поиска в тег header:
И стили выравнивания по правому краю для нее:
Меню
Для отображения меню необходимо создать список со ссылками внутри тега nav:
CSS стили для него будут следующие:
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
Заголовок страницы
Заголовок страницы помещается в div с идентификатором heading
Заголовок имеет следующие стили:
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Колонки
Для того, чтобы создать колонки страницы нужно прописать следующие стили:
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
Подменю
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
И применяем к подменю следующие стили:
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
Контент сайдбара
В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
В html это выглядит так:
В стилях укажем шрифты, цвета и отступы:
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.
Цитата
Вёрстку контента начнём с добавления цитаты.
Добавим код цитаты в раздел section
И применим для него стили:
Здесь нет ничего нового, так же — шрифты, фоны и отступы.
Контент
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после
<blockquote>
.Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :
, которому зададим следующие стили:
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
Со стилем:
А затем два блока-строки с карточками сотрудников
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
Стили:
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта
Карта сайта представляет собой два блока со ссылками:
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
Социальные ссылки
Вставляем набор ссылок в контейнер
<div id=”social”>
И стилизуем их:
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом наши работы закончены. Готовый проект можно скачать здесь.
Комментариев нет:
Отправить комментарий