18
282 661 
© 2024, Жакыпова Динара Тологоновна 81 0
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Лабораторная работа_30
Категория:
Начальные классы
11.01.2024 13:18
Просмотр содержимого документа
«Лабораторная работа_30»
Тема: Простые одноколоночные макеты сайтов
В данном уроке мы будем практиковаться создавать простые одноколоночные макеты сайтов. Давайте, например, сделаем вот такой макет:
Приступим к реализации. Каждый макет как правило начинается с общего дива с названием wrapper, содержащего весь остальной сайт:
id="wrapper"
В нашем случае враппер будет выровнен по центу экрана:
#wrapper {
width: 800px;
margin: 50px auto;
}
Также он будет иметь границу:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Давайте теперь сделаем основную структуру страницы. Она будет состоять из меню и основного содержимого - контента:
id="wrapper"
id="menu"
id="content"
Добавим содержимое наших блоков:
id="wrapper"
id="menu"
href="#"link text 1
href="#" class="active"link text 2
href="#"link text 3
href="#"link text 4
href="#"link text 5
id="content"
Proin tristique lorem
...
...
Теперь можно добавить стили нашим блокам. Давайте добавим стиль менюшке:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
А теперь добавим стили элементам контента:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Можем теперь собрать весь код вместе:
id="wrapper"
id="menu"
href="#"link text 1
href="#" class="active"link text 2
href="#"link text 3
href="#"link text 4
href="#"link text 5
id="content"
Proin tristique lorem
...
...
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Задания 1
Задания 2
Задания 3
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
