Верстка и веб-дизайн. 3 курс. Практическое занятие №3. Макет страницы на CSS Grid Layout
Вам нужно создать страницу, выполненную по правилам CSS GL
Для этого потребуется конфигурация стилей в файле .css и подключение этого файла к коду страницы в HTMLI) Параметры стиля:
1) Сначала прописываются параметры для браузера, в случае, если он не поддерживает GL:
* {
box-sizing-border: box;
}
.support-warning {
background: #ccb11c;
color: #000;
display: block;
font-family: 'Raleway', sans-serif;
font-weight: 700;
opacity: 0.95;
padding: 3rem;
position: fixed;
text-align: center;
top: 0;
left: 0;
width: 100%;
z-index: 5;
}
.support-warning a {
color: inherit;
}
2) Указываем обертку в классе грида:
.grid {
display: flex;
flex-wrap: wrap;
}
3) Задаем размеры грида:
.grid--4x4 > .grid__item {
flex: 1 0 auto;
}
@supports(display: grid) {
.support-warning {
display: none;
}
.grid {
display: grid;
}
}
4) Соотношение долей:
.grid--4x4 {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(auto-fit, minmax(50vh, auto) minmax(50vh, auto));
}
5) Параметры выравнивания для контента:
.align-center {
align-items: center;
justify-content: center;
}
.content {
padding: 3.5rem;
max-width: 400px;
}
6) Блок заголовка - в нем вы задаете свой шрифт (он указан в кавычках):
.heading {
font-family: '?', serif;
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
7) Блок описания - также смените шрифт на парный или сочетаемый с тем, который вы использовали в пункте 6:
.description {
font-family: '?', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
8) Далее вы создаете цветовые темы по числу блоков - их должно быть четыре, заданных разными классами. В каждом параметре блока нужно указать цвет фона и цвет шрифта. Ваша задача чтобы все элементы в дизайне смотрелись гармонично:
.theme-gray {
background: #808080;
color: #ffffff;
}
Обратите внимание, что сначала цвет блока указывается в имени класса (.theme-grаy - то есть серый, затем этот же цвет указывается в параметре background, а параметр color - это цвет букв в блоке)
HTML
8) Откройте <html> и укажите заголовок вкладки в теге <title>. Внутри <head> разверните CSS.
9) Откройте <body>.
10) Далее укажите параметры для не распознающих браузеров:
<div class="support-warning">
Ваш браузер не поддерживает гриды. Обновите его!</div>
<div class="grid grid--4x4">
11) Далее прописываете стиль грида, его заголовок и содержимое для каждой из ячеек:
<div class="grid__item theme-gray grid align-center">
<div class="content">
<h2 class="heading">
Заголовок грида
</h2>
<p class="description">В этой части блока может находиться любое содержимое, которое вы пропишите в исходном коде.</p>
</div>
</div>
И так четыре раза - то есть по числу ваших блоков. Для каждого в параметре grid__item меняете цветовую тему на ту, что используете.
Обратите внимание, что цвета в CSS должны совпадать с цветами в HTML. То есть, если вы пишете в CSS цвет первого блока серый, то затем в пункте 11 вы указываете тот же цвет - и там и там будет theme-gray. Если второй цвет в CSS у вас красный, он должен быть красный и в HTML и так далее во всех четырех цветах.
9) Откройте <body>.
10) Далее укажите параметры для не распознающих браузеров:
<div class="support-warning">
Ваш браузер не поддерживает гриды. Обновите его!</div>
<div class="grid grid--4x4">
11) Далее прописываете стиль грида, его заголовок и содержимое для каждой из ячеек:
<div class="grid__item theme-gray grid align-center">
<div class="content">
<h2 class="heading">
Заголовок грида
</h2>
<p class="description">В этой части блока может находиться любое содержимое, которое вы пропишите в исходном коде.</p>
</div>
</div>
И так четыре раза - то есть по числу ваших блоков. Для каждого в параметре grid__item меняете цветовую тему на ту, что используете.
Обратите внимание, что цвета в CSS должны совпадать с цветами в HTML. То есть, если вы пишете в CSS цвет первого блока серый, то затем в пункте 11 вы указываете тот же цвет - и там и там будет theme-gray. Если второй цвет в CSS у вас красный, он должен быть красный и в HTML и так далее во всех четырех цветах.
12) Закройте все блоки, а также теги </body> и </html>.
Готовый грид публикуете у себя в блоге. Ссылки принимаются в комментариях к данному посту до 15:00 23 марта. Для тех, кто в пятницу освобожден от занятий в связи с юнгой - дедлайн до 15:00 понедельника, 25 марта.
Готовый грид публикуете у себя в блоге. Ссылки принимаются в комментариях к данному посту до 15:00 23 марта. Для тех, кто в пятницу освобожден от занятий в связи с юнгой - дедлайн до 15:00 понедельника, 25 марта.
Ваш браузер не поддерживает гриды. Обновите его.
Заголовок грида
В этой части блока может находиться любое содержимое, которое вы пропишите в исходном коде.
Заголовок второго грида
Та же самая история с описанием - второй блок и второй текст для соответствующей части грида.
Третий заголовок
Описание под заголовком - устроено аналогичным образом, что и предыдущие
Четвертый заголовок грида
Здесь также предусмотрен текст, который будет вписан в грид.
https://markpolohov.blogspot.com/2024/03/270324.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://lolivka.blogspot.com/2024/03/blog-post_22.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://dashamalova.blogspot.com/2024/03/3-2203.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://spckq.blogspot.com/2024/03/blog-post_22.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://punkmausisntmaus.blogspot.com/2024/03/3-css-grid-layout.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://www.blogger.com/blog/post/edit/preview/3540432858405239100/1262048219443254972
ОтветитьУдалитьОценка "отлично". Только просьба в дальнейшем давать ссылку на само задание, а не на редактирование вашего блога.
Удалить