Лабораторная работа: Верстка стилей макета

Цель:
Научиться применять CSS-свойства для стилизации макета веб-страницы, включая управление текстом, блоками, цветами, тенями и адаптивностью.

Критерии оценивания:

• Умеет применять CSS-свойства для стилизации элементов макета.
• Создает аккуратно сверстанный и стилизованный макет.
• Применяет принципы адаптивной верстки.

Ход работы:

1. Подготовительный этап

• Ознакомьтесь с основными CSS-свойствами, необходимыми для стилизации макета:
  • Текст: color, font-size, font-family, text-align.
  • Фон: background-color, background-image, background-size.
  • Границы и тени: border, border-radius, box-shadow.
  • Размеры и расположение: width, height, display, flexbox.
  • Анимация: transition, transform.
• Ознакомьтесь с CSS-инструментами, такими как Chrome DevTools для проверки и отладки кода.

2. Создание HTML-документа

• Создайте файл index.html с базовой структурой страницы:

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Верстка стилей макета</title>

<link rel=»stylesheet» href=»styles.css»>

</head>

<body>

<header>

<h1>Мой макет</h1>

<nav>

<ul>

<li><a href=»#about»>О проекте</a></li>

<li><a href=»#services»>Услуги</a></li>

<li><a href=»#contact»>Контакты</a></li>

</ul>

</nav>

</header>

<main>

<section id=»about» class=»content»>

<h2>О проекте</h2>

<p>Этот макет демонстрирует применение CSS для стилизации элементов.</p>

</section>

<section id=»services» class=»content»>

<h2>Наши услуги</h2>

<div class=»service»>

<h3>Услуга 1</h3>

<p>Описание услуги 1.</p>

</div>

<div class=»service»>

<h3>Услуга 2</h3>

<p>Описание услуги 2.</p>

</div>

</section>

</main>

<footer>

<p>&copy; 2024 Все права защищены.</p>

</footer>

</body>

</html>

3. Создание CSS-файла

• Создайте файл styles.css и подключите его к HTML-документу.
• Добавьте стили для каждого элемента страницы.

1. Базовые стили:

body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

color: #333;

margin: 0;

padding: 0;

}

2. Стили для заголовков и навигации:

header {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

text-align: center;

}

nav ul {

list-style: none;

padding: 0;

display: flex;

justify-content: center;

gap: 15px;

}

nav ul li {

display: inline;

}

nav ul li a {

color: white;

text-decoration: none;

font-weight: bold;

}

nav ul li a:hover {

text-decoration: underline;

}

3. Стили для основного контента:

.content {

padding: 20px;

margin: 20px auto;

max-width: 800px;

background-color: white;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.service {

margin-bottom: 20px;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

background-color: #f9f9f9;

}

4. Стили для футера:

footer {

background-color: #333;

color: white;

text-align: center;

padding: 10px 0;

position: fixed;

bottom: 0;

width: 100%;

}

4. Добавление адаптивности

• Используйте медиа-запросы для обеспечения корректного отображения на мобильных устройствах:

@media (max-width: 768px) {

nav ul {

flex-direction: column;

}

.content {

padding: 10px;

}

}

5. Проверка и тестирование

• Сохраните и откройте HTML-файл в браузере.
• Проверьте корректность работы стилей на разных устройствах или с использованием DevTools.