Урок 5: Основы позиционирования и макетов в CSS, введение в JavaScript
Основы позиционирования в CSS
Позиционирование элементов — это важный аспект веб-дизайна, который позволяет размещать элементы в нужных местах на странице.
Типы позиционирования
Static (по умолчанию) — элементы размещаются в обычном потоке документа.
Relative — элемент смещается относительно своего начального положения.
Absolute — элемент позиционируется относительно ближайшего предка с position: relative или absolute.
Fixed — элемент позиционируется относительно окна браузера и не двигается при прокрутке.
Sticky — элемент ведет себя как relative до тех пор, пока не достигнет определенного положения, после чего ведет себя как fixed.
Пример использования разных типов позиционирования:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Позиционирование в CSS</title>
<style>
.static {
position: static;
background-color: #f4f4f4;
}
.relative {
position: relative;
top: 20px;
left: 20px;
background-color: #e4e4e4;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: #d4d4d4;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: #c4c4c4;
}
.sticky {
position: -webkit-sticky; /* Для Safari */
position: sticky;
top: 0;
background-color: #b4b4b4;
padding: 50px;
}
</style>
</head>
<body>
<h1>Пример позиционирования в CSS</h1>
<div class="static">Static Position</div>
<div class="relative">Relative Position</div>
<div class="absolute">Absolute Position</div>
<div class="fixed">Fixed Position</div>
<div class="sticky">Sticky Position</div>
</body>
</html>
Макеты в CSS
Макеты позволяют организовывать элементы на странице. Одним из наиболее распространенных методов создания макетов является использование Flexbox и Grid.
Flexbox
Flexbox (Flexible Box Layout) позволяет эффективно размещать элементы внутри контейнера.
Пример использования Flexbox:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Flexbox в CSS</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: #f4f4f4;
padding: 10px;
}
.flex-item {
background-color: #4CAF50;
padding: 20px;
margin: 10px;
color: white;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<h1>Пример Flexbox</h1>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
Grid
Grid Layout (CSS Grid) предоставляет способ создания сложных макетов с использованием строк и столбцов.
Пример использования Grid:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Grid в CSS</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #f4f4f4;
padding: 10px;
}
.grid-item {
background-color: #4CAF50;
padding: 20px;
margin: 10px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Пример Grid</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
Введение в JavaScript
JavaScript — это язык программирования, который позволяет добавлять интерактивность на веб-страницы. Он выполняется на стороне клиента (в браузере пользователя).
Включение JavaScript на страницу
JavaScript можно добавлять непосредственно в HTML-документ с помощью тега <script>.
Пример включения JavaScript:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример JavaScript</title>
</head>
<body>
<h1>Привет, мир!</h1>
<button onclick="sayHello()">Нажми меня</button>
<script>
function sayHello() {
alert('Привет, мир!');
}
</script>
</body>
</html>
В этом примере мы создали простую функцию sayHello(), которая отображает сообщение при нажатии кнопки.
Основные концепции JavaScript
Переменные — используются для хранения данных.
Функции — блоки кода, которые выполняют определенные действия.
Условия — позволяют выполнять код в зависимости от условий.
Циклы — позволяют выполнять код многократно.
Пример использования основных концепций:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Основы JavaScript</title>
</head>
<body>
<h1>Основы JavaScript</h1>
<script>
// Переменные
var name = 'Иван';
var age = 25;
// Функция
function greet() {
return 'Привет, ' + name;
}
// Условие
if (age > 18) {
console.log(greet() + '. Ты взрослый.');
} else {
console.log(greet() + '. Ты ребенок.');
}
// Цикл
for (var i = 0; i < 5; i++) {
console.log('Число: ' + i);
}
</script>
</body>
</html>
В этом примере мы создали переменные, функцию, условие и цикл. Результаты выводятся в консоль браузера.
Заключение
В этом уроке мы рассмотрели основы позиционирования и макетов в CSS, а также введение в JavaScript. Эти знания позволят вам создавать более сложные и интерактивные веб-страницы. В следующих уроках мы будем углубляться в более сложные аспекты JavaScript и его взаимодействие с HTML и CSS.