В секции &ltstyle&gt прописать css Установить цвет фона страницы background-color. Центрировать заголовок h1 используя margin: auto.


Задание по CSS
Зарегистрироваться на HTML Academy
https://htmlacademy.ru/program
Пройти курсы:
Знакомство с CSSОформление текста, часть 1Фоны, часть 1Дополнительно:
Селекторы, часть 1Наследование и каскадированиеЗадание по внешнему файлу CSS
css.html
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>This is a Heading</h1>
<div student="no">
<p id="main">This is a paragraph.</p>
</div>
<p class="colortext">This is another paragraph.</p>
<div student="yes">
<p >This is a paragraph.</p>
</div>
</div>
<div>
<div>
</div>
<div>
</div>
<p class="colortext">This is another paragraph.</p>
<div student="no">
<p class="colortext">This is also a paragraph.</p>
</div>
<div>
</div>
</body>
</html>
В секции <style> прописать css:
Сделать цвет всех элементов абзацев зеленым
Сделать красным абзацы с классом colortextСделать фон абзаца с идентификатором main синим
Установить цвет фона страницы background-colorЦентрировать заголовок h1 используя margin: auto
Задать высоту и ширину width и height равными 300px всем контейнерам div
Вынести стили во внешний файл mystyle.cssКонтрольное задание по блочной верстке
Задание. Сверстать композицию web-страницы. Размеры выбрать самостоятельно с соблюдением пропорций на рисунке.
Задание выполнить ТРЕМЯ способами:
С использованием float и clear
Применять значения left, right. Размеры задавать в %. Внутри желтого блока размещать элементы через свойство margin.
С использованием flex
Размеры основным элементов задавать через flex-basis. Внутри жёлтого блока размещать элементы через свойство position.
С использованием сетки фреймворка Bootstrap v3.
Следует использовать плавающй контейнер (container-fluid). Допускается использование контейнера внутри контейнера. Внутри жёлтого блока размещать элементы по своему усмотрению.

Заготовка:
<html>
<head>
<meta charset="UTF-8">
<title>Контрольное задание по блочной верстке. Вариант №</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 100px;
}
.orange {
background-color: orange;
}
.blue {
background-color: blue;
}
.pink {
background-color: lightpink;
}
.yellow {
background-color: yellow;
}
.green {
background-color: yellowgreen;
}
.purple {
background-color: purple;
}
.gray {
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<div class="orange"></div>
<div class="blue"></div>
<div class="pink"></div>
<div class="yellow"></div>
<div class="gray"></div>
<div class="purple"></div>
<div class="green"></div>
</div>
</body>
</html>
Варианты заданий:
Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

Вариант 6

Вариант 7

Вариант 8

Вариант 9

Вариант 10

Вариант 11
 
Вариант 12
 
Вариант 13
 
Вариант 14
 
Вариант 15
 

Приложенные файлы

  • docx 7728260
    Размер файла: 154 kB Загрузок: 2

Добавить комментарий