Практическое занятие

Тема: Использование модуля FlexBox для верстки web-страниц

Создать web-страницу по образцу.

1. На странице index.html после создания структуры web-страницы добавьте следующие блоки, которые будут составлять основные части сайта:

</div>

Создайте файл style.css, в котором будем параллельно записывать стили блоков страницы.

Ориентировочные стили для блока, содержащего весь контент страницы:

#wrapper{

max-height: 100%;

width: 100%;

}

Для контейнеров, находящихся в основном блоке зададим границы. Это нам понадобится на этапе создания блоков. После того, как контейнеры и их содержимое будет создано и оформлено эти границы нужно будет убрать:

#wrapper div{border: 1px solid black;}

Для всех шести блоков зададим цвет заливки и высоту, чтобы увидеть блоки на странице:

.block1{

background-color: #FFFFFF;

height: 50px;

}

.block2{

background: #008080;

height: 100px;

}

.block3{

background: #FFFFFF;

height: 200px;

}

.block4{

background: #008B8B;

height: 150px;

}

.block5{

background: #008B8B;

height: 300px;

}

.block6{

background: rgb(32, 178, 170);

height: 150px;

}

Должно получиться следующее:

2. Создаем навигацию на странице, оформляем меню – контейнер в контейнере block1 (на странице index.html)

<a href="">Главная</a>

<a href="">Новости</a>

<a href="">Консультация</a>

<a href="">Информация</a>

<a href="">Контакты</a>

</div>

Меню задаем стили (в файле style.css):

#nav{

width: 80%; /* ширина блока 80% */

margin: 0px auto; /*выравниваем по центру этот блок*/

border: 1px solid blue; /*задаем границы – нужно на этапе разработки*/

display: flex; /*делаем контейнер гибким, т.е. flex-контейнером*/

justify-content: space-between; /*между каждым элементом flex-контейнера будет одинаковое расстояние*/

}

Блок меню будет иметь такой вид:

Увеличиваем размер пунктов меню

#nav a{

padding: 10px 20px;

}

Стилизуем ссылки в меню

#nav a{

padding: 10px 20px; /*отступы внутри ссылки увеличиваем, тем самым увеличиваем площадь ссылки*/

text-decoration: none; /*убираем подчеркивание у ссылки*/

font-size: 80%; /*увеличиваем размер шрифта*/

text-transform: uppercase; /*все символы отображаем в верхнем регистре*/

color: #008080; /*устанавливаем цвет ссылок*/

}

Задаем стили для ссылок при наведении на них мышкой – эффект hover

#nav a:hover{

color: #FFFFFF;

background-color: #008080;

}

Получаем такое меню:

Убираем высоту блока 1, так как высоту этого блока будет составлять его содержимое:

.block1{

background-color: #FFFFFF;

}

3. Поработаем со следующим блоком block2. Добавляем в него блок для текста content, а нем соответствующий текст (в index.html)

<h2>Программист</h2>

<h4>навсегда</h4>

</div>

В файле style.css разделяем стили блоков:

/*------------------*/

Для контейнера с текстом задаем стили:

#content{

width: 80%; /* ширина блока 80% */

margin: 0px auto; /*выравниваем по центру этот блок*/

text-align: center; /*задаем выравнивание для текста контейнера по центру*/

}

Забираем высоту у контейнера block2 и отдаем в контейнер в текстом

.block2{

background: #008080;

/*удалили свойство высоты*/

}

#content{

width: 80%;

margin: 0px auto;

text-align: center;

height: 100px; /*добавили свойство высоты*/

}

Контейнер #content делаем гибким (flex-контейнером) и его дочерние элементы выравниваем по центру по вертикали и горизонтали

#content{

width: 80%;

margin: 0px auto;

text-align: center;

display: flex; /*делаем контейнер гибким, т.е. flex-контейнером*/

justify-content: center; /*все элементы flex-контейнера выравниваем по центру по горизонтали – по основной оси*/

align-items: center; /*все элементы flex-контейнера выравниваем по центру по вертикали – по побочной оси*/

height: 100px;

}

Задаем форматирование тексту, который находит в этом контейнере:

.text h2{

text-transform: uppercase; /*все символы в верхнем регистре*/

color: #FFFFFF;

margin-bottom: -3px; /*отступ снизу уменьшаем, чтобы две строки были ближе*/

}

.text h4{

color: #FFFFFF;

letter-spacing: 10px; /*расстояние между символами увеличиваем*/

font-size: 70%;

}

4. Оформляем третий блок block3. В него помещаем заголовок, картинку, абзац, горизонтальную линию, и ссылку

<h3>Как стать программистом</h3>

</div>

<h4>Говорят, что в мире есть 10 видов людей. <br>Те, кто понимает двоичный код… и те, кто не понимает.</h4>

<p class="abz">Программирование зародилось в XIX веке, и до середины XX века, когда случился бурный рост информационных технологий, создание программ для машины было сродни искусству. Программирование было уделом избранных. Сегодня же профессия программиста распространена и очень востребована.</p>

<hr>

</div>

Разделяем стили блоков:

/*------------------*/

Картинке задаем ширину:

.info img{width: 200px;}

Блоку how задаем ширину и выравнивание по центру, цвет текста:

#how{

width: 80%;

margin: 0px auto;

color: #008080;

}

Выравниваем блок с картинкой и текстом в одну линию. Устанавливаем flex-контейнеру (родителю) – контейнеру с классом info свойство display: flex;

.info{

display: flex;

}

Блоку с картинкой запрещаем сжиматься и разжиматься и устанавливаем фиксированную ширину:

.image{

flex-grow: 0; /*коэффициент растяжения = 0 */

flex-shrink: 0;/*коэффициент сжатия = 0*/

flex-basis: 200px; /*ширина контейнера*/

}

Или кратко можно записать так:

.image{

flex: 0 0 200px;

}

А соседнему блоку разрешаем все – сжатие и растяжение:

.text2{

flex: 1 1 auto;

}

Добавляем отступ текста от края контейнера:

.text2{

flex: 1 1 auto;

padding-left: 20px;

}

Добавим остальное форматирование для заголовков и текста:

Отступы сверху и снизу для первого заголовка:

#how h3{

text-transform: uppercase;

margin: 20px 0px 20px 0px;

}

Отступ снизу для второго заголовка:

#how h4{

margin-bottom: 10px;

}

Уменьшаем размер шрифта до 80% для абзаца:

#how .abz{

font-size: 80%;

}

Параметры для горизонтальной линии зададим атрибутами тега

И стилями зададим отступ для линии:

#how hr{

margin: 10px 0px 10px 0px;

}

Удаляем высоту для третьего блока

.block3{

background: #FFFFFF;

/*убираем высоту*/

}

Получим такой вид страницы:

5. Оформляем четвертый блок block4. В него добавляем контейнер с классом three и в него – три контейнера с заголовками и абзацем текста:

<h3 class="h3">Системные<br>программисты</h3>

<p class="p">Системные программисты занимаются созданием операционных систем (например, Android или iOS). Веб-программисты разрабатывают интернет-сайты и программы, которые поддерживают работу этих сайтов.

</p>

</div>

<h3 class="h3">Прикладные<br>программисты</h3>

<p class="p">Прикладные программисты занимаются написанием различных программ и приложений: игры (например, популярная игра Angry birds), офисные приложения (например, Microsoft Office Word) и многое другое.</p>

</div>

<h3 class="h3">Web-<br>программисты</h3>

<p class="p">Web-программист – это специалист, разрабатывающий веб-приложения (любые сайты, в которых есть элементы интерактива), то есть фактически большую часть интернет-ресурсов: поисковики, интернет-магазины, соцсети, видеохостинги, сервисы заказа и бронирования, онлайн-калькуляторы и т. д. Современные веб-приложения, как правило, клиент-серверные. Клиентскую часть разрабатывает фронтенд-программист, а серверную – бэкенд разработчик. Специалисты, способные выполнять обе эти роли, называются фуллстек-программистами. </p>

</div>

Задаем стили ширину, выравнивание по центру и делаем контейнер гибким (flex-контейнером):

.three{

background: #008B8B;

height: 150px;

width: 80%;

margin: 0px auto;

display: flex; /*делаем контейнер flex-контейнером*/

justify-content: row; /*размещаем flex-элементы в строку*/

}

Стилизуем заголовок (все символы переводим в верхний регистр и создаем нижний отступ от соседних элементов) и абзац (размер шрифта уменьшаем до 80%):

.h3{

text-transform: uppercase;

margin: 0 0 20px 0;

}

.p{font-size: 80%;}

Для всех контейнеров блока с классом three задаем внутренние отступы:

.three div{

padding: 30px 20px 30px 20px;

}

Задаем для каждого из трех дочерних контейнеров цвет текста, цвет фона и ширину в процентах (с помощью свойства flex-basis):

.sistem{

color: #40E0D0;

background-color: #008080;

flex-basis: 30%;

}

.prikl{

color: #E0FFFF;

background-color: #48D1CC;

flex-basis: 30%;

}

.web{

color: #FFFFFF;

background-color: #FFA500;

flex-basis: 40%;

}

Удаляем свойство высоты для блока с классом .three

Удаляем свойство высоты для пятого блока:

.block5{

background: #008B8B;

/*удалили высоту*/

}

Получаем такой вид:

6. Оформляем пятый блок block5. В пятом блоке создаем еще один блок с идентификатором <div id="articles"></div>

В этом блоке сначала создадим заголовок и одну статью:

<h3>Какие веб программисты бывают</h3>

</div>

<h4>Frontend-разработчики</h4>

<p class="abz">Frontend-разработчики занимаются отображением информации в браузере. Это те люди, которые работают в связке с дизайнерами и отвечают за корректность макета, плавность анимации, инфографику на сайте – за все, что видят пользователи, за frontend-часть (сторону) продукта. А она взаимодействует с браузером и использует его для выполнения определенных задач. Технологии (языки), которые понимает браузер, – это HTML, CSS и JavaScript. Все это надо знать web-программисту, работающему с frontend-частью. Если у вас «поплыл» текст или кнопка «убегает» от вас при наведении, знайте, что во всем виноват фронтендер.</p>

</div>

Для блока со статьями задаем свойства:

#articles{

width: 80%;

margin: 0px auto; /*размещаем по центру родителя*/

display: flex; /*делаем контейнер flex-контейнером*/

flex-wrap: wrap; /*перенос элементов на другую строку*/

}

Всем статьям задаем половину ширины родителя (49%) и также свойтво display: flex, чтобы содержимое статьи (картинка и текст) были гибкими элементами:

.article{

flex-basis: 49%;

display: flex;

padding: 50px 10px 10px 0px;

font-size: 70%;

}

Картинкам задаем ширину:

.block5 img{

width: 180px;

}

Для абзаца с текстом задаем отступ справа и цвет текста:

.text3 .abz{

margin: 0px 20px 0px 0px;

color: #AFEEEE;

}

Для горизонтальной линии задем отступ сверху и снизу:

.text3 hr{

margin: 10px 0px 10px 0px;

}

Устанавливаем стили ссылке – цвет, переводим символы в верхний регистр, убираем подчеркивание:

.text3 a{

color: #FFFFFF;

text-transform: uppercase;

text-decoration: none;

}

Задаем параметры тексту абзаца – отступ справа и цвет:

.text3 .abz{

margin: 0px 20px 0px 0px;

color: #AFEEEE;

}

Заставим горизонтальную линию и ссылку прижиматься к нижнему краю контейнера. Для этого контейнеру с классом text3 зададим следующие свойства:

.text3{

display: flex; /*flex-контейнер*/

flex-direction: column; /*все дочерние элементы (абзац, линию и ссылку) располагаем в столбец*/

}

Заставляем абзац занимать все свободное место:

.text3 .abz{

margin: 0px 20px 0px 0px; /*отступ справа 20px*/

color: #AFEEEE;

flex: 1 1 auto; /*задаем сжатие и растяжение, автоматическую ширину, тем самым заставляем прижаться к нижнему краю контейнера-родителя*/

}

7. Самостоятельно создайте подвал сайта. Заставьте его прижиматься к нижнему краю страницы.