CSS :: Задачи
http://belarusweb.net
Основы создания сайтов

Сборник упражнений и задач по основам CSS

Пару слов о задачнике

Задачи CSS Наш задачник по основам каскадных таблиц стилей CSS содержит стандартные упражнения и задачи с решениями на закрепление теоретических основ излагаемых в учебнике.

После того, как вы порешаете все стандартные задачи на закрепление теории, можете приступать к применению своих знаний HTML и CSS на практике. Для этого посетите нашу страницу учебных кодов, полистайте первый учебный сайт, который содержит задачи по практической верстке элементов веб-страницы, загрузите исходники с подробными комментариями на свой компьютер и следуя инструкциям сверстайте его.

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный 'Чат с автором' (по возможности стараюсь отвечать всем).

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку 'Результат'.

Оглавление задачника

Синтаксис CSS

1.1. Создайте на локальном диске (желательно на локальном сервере Xampp в папке htdocs) тестовую папку test, в ней создайте папки css, images и pages, а также пустую главную страницу index.html нашего тестового сайта. Затем в папке pages создайте пустую веб-страницу page_1.html, а в папке CSS два пустых css-файла: styles_1.css и styles_2.css. Папку test в дальнейшем не удаляйте, все упражнения мы будем выполнять в ней. В html-документах не забудьте указать кодировку utf-8 и заголовок страницы title. Для быстрого доступа к главной странице, создайте в браузере ее закладку. Если вы использовали локальный сервер, то адресный путь к странице должен иметь вид http://localhost/test/index.html. Показать решение.

1.2. Добавьте в начало и конец представленной таблицы стилей комментарии 'Внешняя таблица стилей' и 'Конец таблицы стилей'. Далее, закомментируйте второе и третье объявления в стиле (они должны стать одним комментарием), а в строки с первым и четвертым объявлениями добавьте комментарии 'Первое объявление в блоке' и 'Четвертое объявление в блоке'. Показать решение.

Условие BwCodes
    
   
span{
color: red;             
font-weight: bold;     
text-align: center;
padding-right: 10px;    
overflow: hidden;     
font-style: italic;
}
    

Условие задачи №1.2

1.3. Отформатируйте исходный код представленной таблицы стилей. Показать решение.

Условие BwCodes
	
span{color:red;/*
Первое объявление в блоке */
font-weight:bold;text-align: center;
padding-right:10px;/*Четвертое 
объявление в блоке */
overflow:hidden;font-style:italic;}
  

Условие задачи №1.3

1.4. Исправьте в исходном коде представленной таблицы стилей три ошибки. Показать решение.

Условие BwCodes
	
span{
color: red;             /* Первое объявление в блоке /
font-weight: bold;     
text-align: center
padding-right: 10px;    /* Четвертое объявление в блоке */
overflow hidden;     
font-style: italic;
}
  

Условие задачи №1.4

Подключение CSS к html-документу

2.1. Воссоздайте код представленной веб-страницы (нажмите кнопку 'Результат'). Для абзаца используйте внутреннюю таблицу стилей (тег <style>) и селектор элементов <p>, а для элемента <span> встроенный стиль (универсальный атрибут style). Также используйте css-свойства color и width. Ширину абзаца установите в 300px. Цвета используйте red и blue. Показать решение.

Условие Результат BwCodes

......

Восстановите исходный код страницы, 
чтобы получить требуемый результат!

......

Условие задачи №2.1

2.2. Используйте условие второй задачи, но разместите все стили во внешней таблице стилей в файле css/styles_1.css. Для подключения внешней таблицы стилей, используйте служебный тег <link>. Показать решение.

2.3. Используйте условие третьей задачи, но внешнюю таблицу стилей подключите при помощи правила @import, разместив его в служебном элементе <style>. Показать решение.

2.4. Используйте условие второй задачи, но разместите правило для абзаца во внешнем файле css/styles_1.css, а правило для тега <span> во внешнем файле css/styles_2.css. Подключите один из этих файлов при помощи служебного тега <link>, а второй при помощи правила @import, разместив его в служебном теге <style>. Во всех четырех задачах результат должен быть одинаковым! Показать решение.

Селекторы CSS

3.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы по идентификатору, классу и атрибуту, а также свойства color (значения цвета red, blue и green), width (ширину абзаца установите в 300px) и font-weight (используйте для насыщенности шрифта значение bold). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первая красная строчка абзаца.<br>
		<span class="s_1 s_2"> Синий жирный 'span'.</span><br>
		<span title="Селектор атрибута"> Зеленый 'span'.</span><br>
	</p>
	
</body>
</html>

Условие задачи №3.1

3.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только универсальный селектор, дочерние селекторы и соседние селекторы. Для установки нужного цвета текста используйте свойство color (значения цвета red, blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p>
		Первая красная строчка абзаца.<br>
		<em>Оранжевый 'em'.</em><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.2

3.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы по типу и селекторы потомков. Для установки нужного цвета текста используйте свойство color (значения цвета red, blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<div>
		Первая красная строчка блока.<br>
		<span>Синий 'span'.</span><br>
		<em>Оранжевый 'em'.</em>
	</div>

	<p>
		Первая красная строчка абзаца.<br>
		<span>Оранжевый 'span'.</span><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.3

3.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы родственных элементов. Для установки нужного цвета текста используйте свойство color (значения цвета blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.4</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p>
		Первая строчка абзаца.<br>
		<span>Оранжевый 'span'.</span><br>
		<em>Синий 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.4

3.5. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Разрешается использовать только селекторы по атрибуту, а также свойство color (значения цвета red, blue и orange). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.5</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p class="red_text">
		Первая строчка абзаца.<br>
		<em title="1-й em">Синий 'em'.</em><br>
		<em title="2-й em">Оранжевый 'em'.</em>
	</p>
	
</body>
</html>

Условие задачи №3.5

3.6. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Подключите к элементам имеющийся класс format_block, сделайте их редактируемыми и отключите в универсальном блоке проверку орфографии (используйте соответствующие универсальные атрибуты). При получении фокуса цвет текста абзаца должен становиться синим, а при наведении курсора мыши на универсальный блок его цвет должен становиться оранжевым. Используйте селекторы псевдоклассов :focus и :hover, а также свойство color (значения цвета blue и orange). Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.6</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p>
		Редактируемый абзац.	
	</p>
	
	<div>
		Редактируемый универсальный блок 'div'.	
	</div>
	
</body>
</html>
		
		
		
		
.format_block{
width: 300px;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid black;
cursor: pointer;
}
	
	
/* Допишите недостающие стили */	
	


	

Условие задачи №3.6

3.7. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Подключите к элементам имеющийся класс format_block (используйте соответствующий универсальный атрибут) и добавьте стили для цвета текста абзацев. Разрешается использовать только селекторы псевдоклассов :first-child, :last-child и :nth-child. Также используйте свойство color и значения цвета blue, orange и red. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.7</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p>
		Первый абзац.	
	</p>
	
	<p>
		Второй абзац.	
	</p>

	<p>
		Третий абзац.	
	</p>
	
	<p>
		Четвертый абзац.	
	</p>

</body>
</html>
		
		
	
	
	
	
	
		
.format_block{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
	
	
	
/* Допишите недостающие стили */	
	
	
	
	


	
	

Условие задачи №3.7

3.8. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить полностью. Разрешается использовать только селекторы псевдоклассов :first-of-type и :nth-of-type. Также используйте свойство color и значения цвета blue и orange. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №3.8</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p class="format_block">
		Первый абзац.	
	</p>
		
	<div class="format_block">
		Первый универсальный блок.	
	</div>

	<p class="format_block">
		Второй абзац.	
	</p>
	
	<div class="format_block">
		Второй универсальный блок.	
	</div>

</body>
</html>
		
		
	
	
	
	
	
		
.format_block{
width: 300px;
margin: auto;
margin-top: 1.5em;
padding: 1em;
border: 1px solid black;
}
	
	
	
/* Допишите недостающие стили */	
	
	
	
	


	
	

Условие задачи №3.8

Наследование, каскадирование и приоритетность стилей CSS

4.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Используйте селекторы псевдоклассов :hover, :active и :visited (не забываем о приоритете стилей!). Также создайте в папке pages страницу page_1.html с обратной ссылкой на индексную страницу (если вы не используете локальный сервер, не забудьте использовать систему относительной адресации с двумя точками). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<p>
		Цвет ссылки при наведении на нее курсора 
		мыши должен стать зеленым, при нажатии - 
		оранжевым, а после посещения 
		<a href="pages/page_1.html">ссылка</a> 
		должна стать красной.
	</p>
	
</body>
</html>

Условие задачи №4.1

4.2. Какой из селекторов имеет большую специфичность:
p em или p.class, #m_d или em.m_cl, div p#my_id span или div[title*="City"] span#s_id,
div>div.my_class p[contenteditable].red_color span:hover или div p+div[title="css"] p.green_color span? Показать решение.

4.3. Ниже представлен код html-страницы, в которой присутствует внутренняя таблица стилей. Также к странице подключена внешняя таблица стилей. Определите цвета текста абзацев на странице. Показать решение.

HTML CSS BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.3</title>
	<link rel="stylesheet" href="css/styles_1.css">

	<style>

		[class].red{
		color: red;
		}		

		[class].orange{
		color: orange;
		}
		
	</style>
	
</head>
<body>
	
	<p class="format red orange" title="1-й абзац">
		Красный, оранжевый или синий?	
	</p>

	<p class="format green" title="2-й абзац">
		Зеленый или синий?	
	</p>
	
	<p class="format red orange" id="violet">
		Красный, оранжевый или фиолетовый?	
	</p>

</body>
</html>
	


	
	
.format{
width: 350px;
margin: auto;
margin-top: 1em;
padding: 1em;
border: 1px solid black;
}

#violet{
color: violet;
}	
	
.green{
color: green;	
}

[class][title]{
color: blue;
}
	

	
	
	
	
	
	
	
	
	
	

Условие задачи №4.3

4.4. Ниже представлен код html-страницы, в которой присутствует внутренняя таблица стилей, а также встроенные стили. Определите цвета текста абзацев на странице. Показать решение.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №4.4</title>

	<style>

		.format{
		width: 350px;
		margin: auto;
		margin-top: 1em;
		padding: 1em;
		border: 1px solid black;
		}

		p#red{
		color: red;
		}		

		p#orange{
		color: orange !important;
		}

		p#green{
		color: green !important;
		}
		
	</style>
	
</head>
<body>

	<p class="format" id="red" style="color: blue">
		Красный или синий?
	</p>

	<p class="format" id="orange" style="color: blue">
		Оранжевый или синий?		
	</p>

	<p class="format" id="green" style="color: blue  !important">
		Зеленый или синий?		
	</p>

</body>
</html>

Условие задачи №4.4

Единицы измерения и цветовые модели в CSS

5.1. Решите несколько примеров на перевод одних единиц измерения в другие. При этом будем считать, что область просмотра окна браузера имеет размеры 1000х800 пикселей (ширина и высота), а размер шрифта по умолчанию составляет Показать решение.

1. Переведите 17incm (дюймы в сантиметры).
2. Переведите 1.7empx.
3. Переведите 70vwpx.
4. Переведите 20% от высоты области просмотра окна браузера в пиксели.
5. Переведите 35degrad (градусы в радианы).
6. Переведите 2.3raddeg (радианы в градусы).
7. Переведите 2.3turndeg (обороты в градусы).

5.2. Допишите исходный код представленной html-страницы таким образом, чтобы первый и второй абзацы, а также третий и четвертый абзацы имели одинаковый фон. Для решения задачи вам понадобится перевести числа из шестнадцатеричной системы счисления в десятичную и наоборот. Для перевода чисел используйте наш калькулятор для перевода чисел из одной СС в другую. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №5.2</title>
	
	<style>

		.format{
		width: 350px;
		margin: auto;
		margin-top: 1em;
		padding: 1em;
		border: 1px solid black;
		}
		
		.dark_red_16{
		background-color: #FEC9D5;
		}		
		
		/* Допишите значение цвета в 10-й СС */
		.dark_red_10{
		background-color: rgb(254,);
		}

		/* Допишите значение цвета в 16-й СС */
		.dark_blue_16{
		background-color: #E7;
		}

		.dark_blue_10{
		background-color: rgb(231,249,253);
		}
		
	</style>
	
</head>
<body>
	
	<p class="format dark_red_16">
		Светло-красный фон в RGB с использованием 
		значения в 16-ной системе счисления.
	</p>

	<p class="format dark_red_10">
		Тот же светло-красный фон RGB, но с 
		использованием значения в 10-ной СС.		
	</p>

	<p class="format dark_blue_16">
		Светло-голубой фон в RGB с использованием 
		значения в 16-ной системе счисления.	
	</p>

	<p class="format dark_blue_10">
		Тот же светло-голубой фон RGB, но с 
		использованием значения в 10-ной СС.	
	</p>
	
</body>
</html>

Условие задачи №5.2

Оформление внешнего вида текста

6.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet), расстояние между словами, соответственно, 5px и 15px, расстояние между отдельными буквами – 1px и 3px, высоту строк – 1.1em и 1.6em, отступ первой строки – 1% и 3%. Используйте свойства letter-spacing, line-height, text-indent, word-spacing. Сравните результат форматирования обоих абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №6.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p class="p_1">
		Первое предложение абзаца.<br>
		Второе более длинное предложение абзаца.<br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p class="p_2">
		Первое предложение абзаца.<br>
		Второе более длинное предложение абзаца.<br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №6.1

6.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet), также задайте для абзацев идентификаторы id, через которые и привяжите к ним стили. Текст первого абзаца должен выравниваться по левой стороне, а второго - по правой (свойство text-align). Для подчеркивания первых слов предложений используйте соответствующие значения свойства text-decoration для установки декоративной линии. При этом в первом абзаце стили к ним привяжите через универсальный атрибут class, а во втором - через селекторы псевдоклассов :nth-of-type (оберните в обоих абзацах первые слова в спаны). Не забывайте, что селекторы в таблице стилей, которые используются с одним и тем же стилем, можно записать через запятую, а не дублировать впустую повторяющийся код. Сравните результат форматирования обоих абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<title>Задача №6.2</title>
	
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>

	<p id="p_1">
		<span class="first">Первое</span> предложение абзаца.<br>
		<span class="second">Второе</span> более длинное предложение абзаца.<br>
		<span class="third">Третье</span> и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		<span>Первое</span> предложение абзаца.<br>
		<span>Второе</span> более длинное предложение абзаца.<br>
		<span>Третье</span> и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №6.2

6.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid grey. Также задайте для второго абзаца идентификатор, через который и привяжите к нему стиль. Первый абзац дополнительно не форматируйте. Во втором абзаце установите для текста серую (grey) тень с размытием в 2px и смещением в 1px как по горизонтали так и по вертикали. Кроме того, интервал между символами установите в 1.3px, а способ обработки пробельных символов задайте такой же, как и в элементе <pre> (это позволит расположить слова нужным образом). Для решения задачи используйте свойства white-space, letter-spacing, text-shadow. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №6.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Учиться,
		
						учиться
				
										и еще раз учиться! 
	</p>
	
	<p id="p_2">
		Учиться,
		
						учиться 
				
										и еще раз учиться!
	</p>
	
</body>
</html>

Условие задачи №6.3

6.4. Найдите пять ошибок в исходном коде представленной таблицы стилей. Показать решение.

Условие BwCodes
p{
text-indent: 0.5em;
word-space: 3px;
white-space: no-wrap;
line-heigt: 1.3;
text-shadow: 1px 1px 2px grey;
}

p span{
leter-spacing: 1.3px;	
text-decoration: underline wavi;
}

Условие задачи №6.4

Определение характеристик шрифтов

7.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 15px, внешние отступы (margin) в 30px, границу (border) в 1px solid. Для всех абзацев установите шрифт "times new roman". Далее, для первого абзаца установите размер шрифта 1em, для второго - 1.2em и для третьего - 1.4em. Для решения задачи используйте свойства font-size и font-family. Сравните результат форматирования абзацев. После просмотра результата, попробуйте задать отступы в относительных единицах, установив их, например, в 2em. Обратите внимание, как изменятся размеры и положение абзацев на странице (это связано с различным итоговым абсолютным размером шрифтов абзацев в пикселях). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №7.1

7.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid. Для всех абзацев установите шрифт "times new roman" размером в 1.2em. Далее, для первого абзаца установите нормальные начертание и стиль шрифта, для второго - курсивный стиль шрифта, а для третьего - жирное начертание шрифта. Для решения задачи используйте свойства font-size, font-family, font-style, font-weight. Сравните результат формати­рования абзацев. Обратите внимание, что размеры и положение абзацев на странице одинаковы, что связано с равнымым итоговым абсолютным размером шрифтов абзацев в пикселях. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №7.2

7.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid. Для всех абзацев установите шрифт gabriola размером в 1.2em. Далее, для первого абзаца установите нормальные начертание и стиль шрифта, для второго - курсивный стиль шрифта, а для третьего - используйте капитель. Для решения задачи используйте свойства font-size, font-family, font-style, font-weight, font-variant. Сравните результат формати­рования абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №7.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<p id="p_1">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_2">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
	<p id="p_3">
		Первое предложение абзаца.</br>
		Второе более длинное предложение абзаца.</br>
		Третье и последнее предложение абзаца.
	</p>
	
</body>
</html>

Условие задачи №7.3

Оформление внешнего вида списков

8.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) списков установите 500px, фон (background-color), соответственно, установите оранжевый (orange) и фиолетовый (violet). Для решения задачи используйте свойства для оформления списков list-style-type и list-style-position. Сравните результат форматирования обоих списков. Показать решение.

HTML Результат BwCodes
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<ul class="list_1">
		
		<li>
			Маркеры размещаем вне списка.
		</li>
		
		<li>
			Используем вид маркера decimal.
		</li>
		
	</ul>
	
	
	<ol class="list_2">
		
		<li>
			Маркеры размещаем внутри списка.
		</li>
		
		<li>
			Используем вид маркера square.
		</li>
		
	</ol>
	
</body>
</html>

Условие задачи №8.1

8.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) списка установите в 500px, внутренние отступы (padding) в 1em, внешние отступы (margin) в 2em, границу (border) в 1px solid, высоту строки в 1.3em. Маркеры списка расположите внутри. В качестве пунктов списка используйте изображения кружков в условии (скопируйте их себе в папку test/images/). При наведении курсора мыши на пункты списка маркер должен менять свой цвет на оранжевый. Для решения задачи используйте свойства для оформления списков list-style-image, list-style-position, а также псевдокласс :hover. Не забывайте про относительную адресацию при указании пути к файлам изображений. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №8.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<ul>
		
		<li>
			Первый пункт списка.
		</li>
		
		<li>
			Второй пункт списка.
		</li>
		
		<li>
			Изображения для маркеров
			<img src="images/circle_green.png"> и 
			<img src="images/circle_orange.png">.
		</li>
		
	</ul>
	
</body>
</html>

Условие задачи №8.2

Оформление внешнего вида таблиц

9.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) таблиц установите в 70%, внешние отступы (margin) в 3em, границу (border) в 1px solid green. Также для заголовков и ячеек таблиц внутренние отступы (padding) задайте в 0.5em. Заголовки таблиц расположите слева над таблицами (нужно применить к заголовкам выравнивание текста по левому краю), границы первой таблицы оставьте раздельными, а у второй таблицы границы объедините. Для решения задачи используйте свойства для оформления таблиц border-collapse и caption-side. Сравните результат форматирования обоих таблиц. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №9.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<table class="table_1">
		
		<caption>Таблица с раздельными границами</caption>
		
		<tr>
			<td>Ячейка 1.1</td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>	
	
	
	<table class="table_2">
		
		<caption>Таблица с объединенными границами</caption>
		
		<tr>
			<td>Ячейка 1.1</td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>
	
</body>
</html>

Условие задачи №9.1

9.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) таблиц установите в 70%, внешние отступы (margin) в 3em, границу (border) в 1px solid green. Также для заголовков и ячеек таблиц внутренние отступы (padding) задайте в 0.5em. Заголовки таблиц расположите справа над таблицами (нужно применить к заголовкам выравнивание текста по правому краю), границы таблиц оставьте раздельными. При этом заметьте, что границы вокруг первых ячеек не должны отображаться (используйте соответствующий селектор псевдоклассов). Расстояние между границами для первой таблицы установите в 0.3em, а для второй - в 0.9em. Для решения задачи используйте свойства для оформления таблиц border-collapse, caption-side, empty-cells, border-spacing, а также псевдокласс :first-child. Сравните результат форматирования обоих таблиц. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №9.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<table class="table_1">
		
		<caption>Таблица №1</caption>
		
		<tr>
			<td></td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>	
	
	
	<table class="table_2">
		
		<caption>Таблица №2</caption>
		
		<tr>
			<td></td> <td>Ячейка 1.2</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td>Ячейка 2.2</td>
		</tr>
		
	</table>
	
</body>
</html>

Условие задачи №9.2

Оформление внешнего вида колонок

10.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите в 80%, внешние отступы (margin) в 3em, внутренние отступы (padding) в 0.7em, границу (border) в 1px solid green, высоту строки в 1.3em, текст растяните по ширине. Первый абзац разбейте на две колонки, а второй - на три. Расстояние между колонками установите в 1.4em, добавьте пунктирную границу зеленого цвета и шириной в 1px. Для решения задачи используйте свойства для многоколоночной верстки column-count, column-gap и column-rule. Сравните результат форматирования обоих абзацев. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №10.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
  <p class="p_1">
		В данном абзаце текст верста&shy;ется в 2 колонки.
		Ширина (width) абзацев уста&shy;новлена в 80%, 
		внешние отступы (margin) в 3em, 
		внут&shy;ренние отступы (padding) в 0.7em, 
		высота строки в 1.3em, 
		текст растягивается по ширине колонки,
		расстояние между колонками в 1.4em, 
		граница (border) в 1px solid green, 
		граница между колонками в 1px dashed green. 
  </p> 
  
  <p  class="p_2">
		В данном абзаце текст верста&shy;ется в 3 колонки.
		Ширина (width) абзацев уста&shy;новлена в 80%, 
		внешние отступы (margin) в 3em, 
		внут&shy;ренние отступы (padding) в 0.7em, 
		высота строки в 1.3em, 
		текст растягивается по ширине колонки,
		расстояние между колонками в 1.4em, 
		граница (border) в 1px solid green, 
		граница между колонками в 1px dashed green. 
  </p>
	
</body>
</html>

Условие задачи №10.1

10.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Ширину (width) абзацев установите в 90%, внешние отступы (margin) в 1em, внутренние отступы (padding) в 0.7em, границу (border) в 1px solid green, высоту строки в 1.3em, текст растяните по ширине. Заголовки расположите по середине, верстку оформите в две колонки. Для решения задачи используйте свойство для многоколоночной верстки column-count. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №10.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<h1>Заголовок 1-го уровня</h1>
	
	<h2>Первый заголовок 2-го уровня</h2>
	
	<p>
		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.
 		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.		
	</p> 

	<h2>Второй заголовок 2-го уровня</h2>

	<p>
		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.
 		Верстка текста в две колонки. Верстка текста в две колонки.
		Верстка текста в две колонки. Верстка текста в две колонки. 		
		Верстка текста в две колонки. Верстка текста в две колонки. 	
		Верстка текста в две колонки. Верстка текста в две колонки.	 
	</p>
	
</body>
</html>

Условие задачи №10.2

Установка размеров элементов

11.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 80%, высоту – в 40%. Каковы размеры абзацев в пикселях? Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p>
		Каковы размеры абзацев в пикселях?
	</p>
	
	<p>
		Каковы размеры абзацев в пикселях?
	</p>

</div>
	
</body>
</html>

Условие задачи №11.1

11.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 70%, высоту – в 50%. Также задайте для первого абзаца минимально допустимую ширину в 400px, минимально допустимую высоту в 150px. Для второго абзаца задайте максимально допустимую ширину в 400px, максимально допустимую высоту в 150px. Для решения задачи используйте свойства для определения размеров элементов max-height, max-width, min-height и min-width. Рассчитайте конечные размеры абзацев в пикселях и объясните свое решение. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p class="p_1">
		Рассчитайте конечные размеры абзацев в пикселях 
		и объясните свое решение.	
	</p>
	
	<p class="p_2">
		Рассчитайте конечные размеры абзацев в пикселях 
		и объясните свое решение.
	</p>

</div>
	
</body>
</html>

Условие задачи №11.2

11.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для установки фонов используйте свойство background-color и значения yellow и violet. Ширину универсального блока <div> установите в 500px, высоту – в 400px. Ширину дочерних абзацев установите в 70%, высоту – в 50%. Задайте для первого абзаца алгоритм расчета размеров со значением content-box, а для второго - border-box (используйте свойство box-sizing). Рассчитайте размеры области содержимого каждого абзаца, а также их полные размеры вместе с внутренними отступами. Объясните свое решение. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №11.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

<div>
	
	<p class="p_1">
		Рассчитайте размеры области содержимого элемента 
		и размеры всего элемента.
	</p>
	
	<p class="p_2">
		Рассчитайте размеры области содержимого элемента 
		и размеры всего элемента.
	</p>

</div>
	
</body>
</html>

Условие задачи №11.3

Установка границ и теней элементов

12.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для таблицы внешние отступы (margin) установите в 3em, для заголовка таблицы внешний отступ снизу (margin-bottom) установите в 0.2em, для ячеек таблицы внутренние отступы (padding) установите в 0.5em. Границы таблицы и ячеек установите через сокращенное свойство для границ. Для ссылок используйте отдельные свойства для установки нижних границ, но ширину нижней границы укажите в одном стиле сразу для всех ссылок в таблице. Не забудьте отменить подчеркивание ссылок, чтобы у них визуально не отображались сразу две линии подчеркивания. Для решения задачи используйте свойства для определения параметров границ border, border-bottom-width, border-bottom-style, border-bottom-color. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<table>
		 
		<caption>Таблица ссылок</caption>

		<tr>
			<th>Ссылка №</th> 
			<th>Цвет ссылки</th> 
			<th>Стиль ссылки</th> 
		</tr>
				
		<tr>
			<td><a href="" id="first">Ссылка №1</a></td>
			<td>Оранжевый</td>
			<td>Пунктирная</td>
		</tr>

		<tr>
			<td><a href="" id="second">Ссылка №2</a></td>
			<td>Зеленый</td>
			<td>Точечная</td>
		</tr>
		 
	</table>
	
</body>
</html>

Условие задачи №12.1

12.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для родительского блока внешние отступы (margin) установите в 3em, а ширину в 100px. Также установите ему черную сплошную границу в 2px и задайте скругление углов в 10px. Для дочерних блоков внешние отступы (margin) установите в auto (чтобы они выравнивались по центру), а внешние нижние и верхние отступы (margin-top и margin-bottom) установите в 20px. Ширину и высоту дочерних блоков установите в 80px. Границы им не устанавливайте, однако задайте скругление углов в 40px (делим размеры пополам, чтобы получить окружность). Чтобы применить к ним полученный стиль, используйте псевдокласс :not (селектор будет иметь вид div:not([id="main"])). Также установите для каждого из блоков соответствующий цвет фона (background-color). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №12.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>

	<div id="main">
		
		<div class="red"></div>
		
		<div class="orange"></div>
		
		<div class="green"></div>
		
	</div>
	
</body>
</html>

Условие задачи №12.2

12.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Для блока внешние отступы (margin) установите в auto, а верхний отступ (margin-top) в 7em. Ширину и высоту установите в 60px. Границы не устанавливайте, однако задайте скругление углов в 30px. Для установки теней используйте свойство box-shadow, задав нулевые смещения и размытие, но установив им растяжение в 30px, 60px и 90px. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<div></div>
	
</body>
</html>

Условие задачи №12.3

12.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите для формы внешние отступы (margin) в auto, верхний отступ (margin-top) в 3em, внутренние отступы (padding) в 1em, ширину и высоту, соответственно, в 250px и 110px. Границы не устанавливайте, однако задайте скругление углов в 0.5em и установите тень с параметрами 4px 3px 8px 3px grey. Для полей ввода обнулите границы и установите сплошной серый контур шириной 1px (используйте свойство outline). При получении полями фокуса ширина контура должна увеличиваться до 2px. Обратите внимание на то, что при увеличении ширины контура, размеры поля ввода остаются прежними. Попробуйте убрать контур и проделать все тоже самое с границами. Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №12.4</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<form action="php/reg.php" method="POST" name="reg_form">
	 
	<!-- Создаем поле для ввода имени -->
	Имя: <input type="text" name="first_name">
	<br><br>
	 
	<!-- Создаем поле для ввода фамилии -->
	Фамилия: <input type="text" name="last_name">
	<br><br>
	 
	<!-- Создаем кнопку для отправки данных формы на сервер -->
	<input type="submit" value="Отправить" disabled>
	 
	</form>
	
</body>
</html>

Условие задачи №12.4

Установка отступов и полей элементов

13.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину родительских блоков в 70%, внешние отступы в auto, верхний внешний отступ в 3em, нижний внешний отступ в 5em, внутренние отступы в 1em. Для всех элементов установите сплошную границу в 1px. Для абзацев внешние отступы установите в значение auto. Для абзацев первого блока переопределите внешние верхние отступы на 0.5em и установите внутренние отступы в 0.5em. Для абзацев второго блока внешние верхние отступы переопределите на 1.5em, а внутренние отступы установите в 1.5em. Каким должен получиться итоговый интервал по вертикали между родительскими блоками и почему? Какими будут интервалы между верхними границами первых дочерних абзацев и верхними сторонами родительских блоков и почему? Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №13.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<div>
		
		<p class="first">Первый абзац</p>
		
		<p class="first">Второй абзац</p>	
		
	</div>

	<div>
		
		<p class="second">Первый абзац</p>
		
		<p class="second">Второй абзац</p>	
		
	</div>	
	
</body>
</html>

Условие задачи №13.1

Установка фона элементов

14.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину абзацев в 300px, внешние отступы в auto, верхние внешние отступы в 0px (абзацы должны идти вплотную друг к другу), внутренние отступы в 0.5em, внутренние левые отступы в 1.5em. Оформите шрифт: используйте жирный Gabriola размером в 1.5em. Также установите абзацам границу, но цвет не задавайте. Для первого абзаца переопределите верхний внешний отступ на 1em (чтобы он не прилипал к окну фрейма). Для этого используйте соответствующий псевдокласс (хотя можно было бы переопределить его и в классе red). Далее, установите для каждого из абзацев соответствующий цвет фона и границы (граница должна сливаться с фоном). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №14.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
		
	<p class="red">Каждый</p>
	
	<p class="orange">Охотник</p>	
	
	<p class="yellow">Желает</p>
	
	<p class="green">Знать</p>
	
	<p class="skyblue">Где</p>		
	
	<p class="blue">Сидит</p>
	
	<p class="violet">Фазан</p>
	
</body>
</html>

Условие задачи №14.1

14.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно восстановить. Установите ширину абзаца в 500px, внешние отступы в auto, верхний внешний отступ в 1em, внутренние отступы в 1em. Также установите абзацу серую сплошную границу в 1px и тень с параметрами 2px 1px 5px 3px grey. Размер шрифта заголовка установите в 0.9em и разместите его по центру. Для изображений во втором абзаце установите автоматические внешние отступы, ширину в 240px, высоту в 200px и сплошную черную границу в 1px. Что касается фонов, то для тела документа установите в качестве фона первое изображение, а для абзаца - второе (скопируйте их в папку images). При этом имейте в виду, что второе изображение можно использовать в качестве бесшовного фона, а вот первое придется масштабировать, чтобы покрыть весь элемент (используйте для этого свойство background-size и значение 300%, что позволит перекрыть область тела документа с излишком). Показать решение.

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<h1>Установка изображения в качестве фона</h1>

	<p>
		Фон абзаца бесшовный, поэтому его не нужно 
		масштабировать. А вот фон тела документа 
		нужно масштабировать, т.к. он имеет малые 
		размеры и по умолчанию будет повторяться 
		в обоих направлениях.	
	</p>
	
	<p>
		<!-- Изображение для фона тела документа -->
		<img src="images/bg_light_3.png">
		
		<!-- Изображение для фона абзаца -->	
		<img src="images/bg_light_1.png">
	</p>	
	
</body>
</html>

Условие задачи №14.2

14.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой частично нужно восстановить. Требуется установить кнопке сброса формы линейный градиент слева направо от #CCC до #FFF. При наведении курсора мыши градиент должен быть темнее - от #999 до #FFF. Для решения задачи используйте функцию linear-gradient(). Поэкспериментируйте со значениями цвета и величиной угла. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>

	<form action="php/reg.php" method="POST" name="reg_form">

		<!-- Создаем поле для ввода имени -->
		Имя: <input type="text" name="first_name">
		<br><br>

		<!-- Создаем поле для ввода фамилии -->
		Фамилия: <input type="text" name="last_name">
		<br><br>

		<!-- Создаем кнопку сброса формы -->
		<input type="reset" value="Сброс">

	</form>
	
</body>
</html>
form{
width: 250px;
height: 110px;
margin: auto;
margin-top: 3em;
padding: 1em;
border-radius: 0.5em;
box-shadow: 4px 3px 8px 3px grey;
text-align: right;            
}
 
input{
border: 1px solid grey;
border-radius: 2px;
outline: 0px;
}

/* Добавьте линейный градиент */
input[type="reset"]{
width: 80px;
cursor: pointer;
}

/* Добавьте линейный градиент */
input[type="reset"]:hover{
}

Условие задачи №14.3

14.4. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой частично нужно восстановить. Используйте функцию linear-gradient() и ключевые слова для установки цвета red, green и blue. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.4</title>
		
	<style>	
	
		div{
		width: 90%;
		height: 200px;
		margin: auto;
		margin-top: 3em;
		border: 1px solid;
		}
	
	</style>
	
</head>
<body>

	<div></div>
  
</body>
</html>

Условие задачи №14.4

14.5. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой частично нужно восстановить. Требуется установить блоку радиальный круговой градиент с использованием цветовой гаммы от красного до оранжевого цвета. Используйте функцию radial-gradient() и ключевые слова для установки цвета red и orange. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №14.5</title>
		
	<style>	
	
		div{
		width: 400px;
		height: 400px;
		margin: auto;
		margin-top: 3em;
		border-radius: 200px;
		}
	
	</style>
	
</head>
<body>

	<div></div>
  
</body>
</html>

Условие задачи №14.5

Использование анимации и переходов

15.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой нужно частично восстановить. Параметры анимации привяжите к элементу при помощи класса anim. Имя анимации установите в example_1, длительность - в 3s, плавность - в ease-in-out, задержку - в 0.5s, повторение - в бесконечность, направление - в alternate, режим заполнения анимации - в backwards. Анимировать нужно ширину элемента от нуля до 500px. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №15.1</title>

	<style>
		
		pre{
		font-size: 1.3em;
		font-weight: bold;
		overflow: hidden;
		}
		
		/* Восстановите скрытый код */ 
		
	</style>
	
</head>
<body>
		
	<pre class="anim">
		1  2  3  4  5  6  7  8  9  10
	</pre>
	
</body>
</html>

Условие задачи №15.1

15.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внутренняя таблица стилей, код которой нужно частично восстановить. Параметры перехода привяжите к элементу при помощи класса trans. При наведении курсора мыши на элемент цвет фона должен меняться от #EEE до черного, а цвет шрифта наоборот. Длительность перехода установите в 0.3s, плавность - в ease. Показать решение.

Условие Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №15.2</title>

	<style>
			 
		div{
		width: 70px;
		margin: auto;
		margin-top: 3em;
		padding: 0.3em;
		border: 3px inset grey;
		border-radius: 4px;
		background-color: #EEE;
		cursor: pointer;
		text-align: center;
		}
			 
		.trans{
		
		
		
		}
		
		div.trans:hover{
		
		
		}

	</style>
	
</head>
<body>
		
	<div class="trans">
		Кнопка
	</div>
	
</body>
</html>

Условие задачи №15.2

Форматирование элементов

16.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать так, чтобы блоки расположились в одной строке. Прозрачность блоков установите в 0.5. При наведении на блоки курсора мыши они должны становиться полностью непрозрачными. При этом курсор над первым блоком должен иметь вид указующего перста, а над вторым блоком вид перекрестья. Для решения задачи используйте свойства форматирования элементов display, opacity и cursor. Поэкспериментируйте с прозрачностью элементов и видами курсора. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №16.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый универсальный блок
	</div>	
	
	<div id="second">
		Второй универсальный блок
	</div>	
	
</body>
</html>
	
	
div{
	
	
width: 40%;
margin: auto;
margin-top: 3em;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first:hover{


}

#second:hover{


}

Условие задачи №16.1

16.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Сделайте блоки плавающими, но третьему блоку запретите обтекание верхних блоков. Далее, первому блоку включите автоматическую прокрутку по вертикали, а у второго содержимое, которое не вмещается в доступную область элемента, скройте. Для решения задачи используйте свойства форматирования элементов float, clear, overflow и overflow-y. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №16.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<div id="first">
		Первый универсальный блок. Первый универсальный блок.	
		Первый универсальный блок. Первый универсальный блок.			
		Первый универсальный блок. Первый универсальный блок.		
		Первый универсальный блок. Первый универсальный блок.
		Первый универсальный блок. Первый универсальный блок.
	</div>	
	
	<div id="second">
		Второй универсальный блок. Второй универсальный блок. 
		Второй универсальный блок. Второй универсальный блок.				
		Второй универсальный блок. Второй универсальный блок.		
		Второй универсальный блок. Второй универсальный блок. 
		Второй универсальный блок. Второй универсальный блок.				
	</div>
	
	<div id="third">
		Третий универсальный блок. Третий универсальный блок. 
		Третий универсальный блок. Третий универсальный блок.				
		Третий универсальный блок. Третий универсальный блок.		
		Третий универсальный блок. Третий универсальный блок. 
		Третий универсальный блок. Третий универсальный блок.				
	</div>	
	
</body>
</html>
div{
width: 200px;
height: 200px;
margin: auto;
margin-top: 3em;
margin-left: 30px;
padding: 1em;
border: 1px solid green;
background-color: #DDD;
font-weight: bold;

}

#first{

}

#second{

}

#third{
width: 450px;

}
	
	
	
	
	
	
	
	
	
	

Условие задачи №16.2

16.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Требуется сверстать макет страницы при помощи плавающих блоков. Для решения задачи используйте свойства форматирования элементов float и clear. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и универсальный прием обнуления отступов всех элементов. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №16.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">

		<div id="log">Логотип</div>

		<div id="header_content">
			Другое содержимое шапки сайта
		</div>    

	</div>    


	<div id="main_block"> 

		<div id="aside_block">

			<div id="aside_adv_1">
				Рекламный блок №1
			</div>

			<div id="aside_adv_2">
				Рекламный блок №2
			</div>

		</div>


		<div id="content_block">
			Начало блока с основным содержимым страницы
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br>
			Конец блока с основным содержимым страницы
		</div>
		
		<div id="support"></div>

	</div>
	
</body>
</html>
	
	
	<!-- Обратите внимание на блок-подпорку, который позволяет 
	подгонять высоту родительского блока под высоту 
	плавающего блока с наибольшим ее значением. 
	Обнуление границ и установка фона создает впечатление 
	равенства высот плавающих блоков. -->
	
	
	
	
	

*{
padding: 0px;
margin: 0px;
}
 
div{
box-sizing: border-box;
border: 1px solid grey;
}

#header, #main_block{
width: 90vw;
margin-left: 5vw;
}
   
#header{
height: 100px;
background-color: orange;
}

#log, #header_content, #aside_block, #content_block{
;
margin-left: 15px;
margin-top: 15px;
}
 
#log{
width: 260px;
height: 70px;
}
 
#header_content{
width: calc(90vw - 45px - 260px);
height: 70px;
}
  
#main_block{
margin-top: 5px;
background: linear-gradient(90deg, #EEE 0px 275px, #DDD 275px);
}
 
#aside_block{
width: 260px;
height: 100%;
margin-top: 0px;
border-width: 0px;
}
 
#aside_adv_1, #aside_adv_2{
width: 240px;
height: 400px;
margin: auto;
margin-top: 15px;
}
 
#content_block{
width: calc(90vw - 305px);
border-width: 0px;
text-align: center;
}
 
#support{
;
border: 0px;
margin-bottom: 15px;
}

Условие задачи №16.3

Позиционирование элементов

17.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать так, чтобы блоки расположились в одной строке при помощи абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, top, left и right. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый абсолютно <br>позиционированный блок
	</div>	
	
	<div id="second">
		Второй абсолютно <br>позиционированный блок
	</div>
	
</body>
</html>
div{
width: 40%;
box-sizing: border-box;

: 3em;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
: 3em; 
}

#second{
: 3em;
}
	

Условие задачи №17.1

17.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать макет страницы при помощи фиксированного и абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, z-index, top, left и right. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и обнуление отступов тела документа. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">
		Позиционированная фиксированно шапка страницы
	</div>	
	
	<div id="aside_menu">
		Позициониро­ван­ное фиксированно боковое меню 
	</div>
	
	<div id="content_block">
		Абсолютно позиционированный блок 
		с основным содержимым страницы
	</div>	
	
</body>
</html>
body{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
padding: 1em;
border: 1px solid grey;
}

#header{

: 0px;
: 5vw;
width: 90vw;
height: 100px;
background-color: orange;
}

#aside_menu{

: 105px;
: 5vw;
width: 25vw;
height: 100%;
background-color: orange;
}

#content_block{

: -1;
: 105px;
: calc(30vw + 5px);
width: calc(65vw - 5px);
min-height: 1200px;
background-color: green;
text-align: center;
}

Условие задачи №17.2

17.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Нужно сделать макет страницы при помощи относительного и абсолютного позиционирования. Для решения задачи используйте свойства позиционирования элементов position, top, left. Обратите внимание на порядок использования функции calc() и разберитесь, почему были выбраны именно указанные значения использованных единиц измерения. Также обратите внимание на использование свойства box-sizing и универсальный прием обнуления отступов всех элементов на странице. Внимательно и неспеша разберитесь в исходном коде страницы. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №17.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">
		
		<div id="log">Логотип</div>
		
		<div id="header_content">
			Другое содержимое шапки сайта
		</div>		
		
	</div>		


	<div id="main_block">	
		
		<div id="aside_block">
			
			<div id="aside_adv_1">
				Рекламный блок №1
			</div>
			
			<div id="aside_adv_2">
				Рекламный блок №2
			</div>
		
		</div>

		
		<div id="content_block">
			Блок с основным содержимым страницы
		</div>
		
	</div>
	
</body>
</html>
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
padding: 1em;
border: 1px solid grey;
}

#header, #main_block{

width: 90vw;
margin-left: 5vw;
}


#header{
height: 100px;
background-color: orange;
}

#log{

: 15px;
: 15px;
width: 15vw;
height: 70px;
}

#header_content{

: 15px;
: calc(30px + 15vw);
width: calc(90vw - 45px - 15vw);
height: 70px;
}


#main_block{
min-height: 1200px;
margin-top: 5px;
padding: 0px;
background-color: green;
}

#aside_block{

: 15px;
: 15px;
width: 260px;
height: calc(100% - 30px);
}

#aside_adv_1, #aside_adv_2{

: 9px;
width: 240px;
height: 400px;
}

#aside_adv_1{
: 15px;
}

#aside_adv_2{
: 430px;
}


#content_block{

: 15px;
: 290px;
width: calc(90vw - 305px);
height: calc(100% - 30px);
text-align: center;
}

Условие задачи №17.3

Трансформация элементов

18.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для решения задачи используйте свойство для трансформации элементов transform и функцию rotate() в качестве значения. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №18.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Трансформированный блок
	</div>	
	
	<div id="second">
		Первый позиционированный абсолютно блок
	</div>
	
	<div id="third">
		Второй позиционированный абсолютно блок
	</div>
	
</body>
</html>
	
	
	
	
	
	<!-- Используйте свойство transform и функцию rotate() -->
	
	
	
	
	
	
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
position: absolute;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
width: 300px;
height: 100px;
top: 120px;
left: -80px; 

}

#second, #third{
left: 140px;
width: 400px;
height: 140px;
}

#second{
top: 20px;
}

#third{
top: 180px;
}

Условие задачи №18.1

18.2. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично изменить. Требуется заменить смещение абсолютно позиционированных элементов через свойства top и left на смещение при помощи функций трансформации. Для решения задачи используйте свойство для трансформации элементов transform, а также функции трансформации rotate() и translate(). После решения задачи измените порядок следования функций трансформации в свойстве transform и добейтесь первоначального эффекта от трансформаций. Объясните полученный результат. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №18.2</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Боковой трансформированный блок
	</div>	
	
	<div id="second">
		Первый трансформированный блок
	</div>
	
	<div id="third">
		Второй трансформированный блок
	</div>
	
</body>
</html>
	
	
	
	
	
	<!-- Замените top и left на translate() -->
	
	
	
	
	
	
*{
padding: 0px;
margin: 0px;
}

div{
box-sizing: border-box;
position: absolute;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

#first{
width: 300px;
height: 100px;
top: 120px;
left: -80px; 
transform: rotate(-90deg);
}

#second, #third{
left: 140px;
width: 400px;
height: 140px;
}

#second{
top: 20px;
}

#third{
top: 180px;
}

Условие задачи №18.2

18.3. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Требуется сделать так, чтобы при наведении курсора мыши на блоки они увеличивались в размере в 1.1 раза. Для решения задачи используйте свойство для трансформации элементов transform, а также функцию трансформации scale(). Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Задача №18.3</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="first">
		Первый блок
	</div>	
	
	<div id="second">
		Второй блок
	</div>
		
</body>
</html>
	
	
	
	
div{
position: absolute;
top: 30px;
box-sizing: border-box;
width: 250px;
height: 100px;
padding: 1em;
border: 1px solid green;
border-radius: 0.5em;
background-color: #DDD;
text-align: center;
font-weight: bold;
}

div:hover{

}

#first{
left: 30px;
}

#second{
left: 310px;
}

Условие задачи №18.3

Модуль CSS Flexbox

19.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для решения задачи используйте свойство display, а также свойства модуля CSS Flexbox align-content, justify-content и flex-wrap. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	
	<meta charset="utf-8">
	<title>Задача №19.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
	
</head>
<body>
	
	<div id="header">

		<div id="log">Логотип</div>

		<div id="header_content">
			Другое содержимое шапки сайта
		</div>    

	</div>    


	<div id="main_block"> 

		<div id="aside_block">

			<div id="aside_adv_1">
				Рекламный блок №1
			</div>

			<div id="aside_adv_2">
				Рекламный блок №2
			</div>

		</div>


		<div id="content_block">
			Блок с основным содержимым страницы
		</div>

	</div>
	
</body>
</html>
*{
padding: 0px;
margin: 0px;
}

body, #header, #main_block{




}
 
div{
box-sizing: border-box;
border: 1px solid grey;
padding: 0em;
}
 
#header, #main_block{
width: 90vw;
}
 
#log, #header_content, #content_block, 
#aside_adv_1, #aside_adv_2{
padding: 1em;
}
 
#header{
height: 100px;
background-color: orange;
}
 
#log{
width: 15vw;
height: 70px;
}
 
#header_content{
width: calc(90vw - 45px - 15vw);
height: 70px;
}
  
#main_block{
min-height: 1200px;
margin-top: 5px;
background-color: green;
}
 
#aside_block{
width: 260px;
height: calc(100% - 30px);
}
 
#aside_adv_1, #aside_adv_2{
width: 240px;
height: 400px;
margin: auto;
margin-top: 15px;
}
 
#content_block{
width: calc(90vw - 305px);
height: calc(100% - 30px);
text-align: center;
}

Условие задачи №19.1

Вставка генерируемого контента

20.1. Ниже представлен код html-страницы, а также внешний вид страницы при отображении ее браузером. К странице подключена внешняя таблица стилей, код которой нужно частично восстановить. Для создания счетчиков тела документа <body> и заголовков <h2> используйте свойство counter-reset, а для вставки значений счетчиков свойства content и counter-increment. Показать решение.

HTML CSS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Задача №20.1</title>
	<link rel="stylesheet" href="css/styles_1.css">
</head>
<body>
	
	<h2>Введение в HTML</h2>
	
		<h3>Что такое HTML?</h3>
		
		<h3>Отображение веб-документа браузером.</h3>
		
		<h3>Понятие тега HTML и его синтаксис.</h3><br>
	
	
	<h2>Форматирование текста</h2>
	
		<h3>Блочные и строчные элементы.</h3>
		
		<h3>Разбиение текста на абзацы. Применение заголовков.</h3>
	
</body>
</html>
/* Создаем счетчик для тела документа */
body{
: parag_1;   
}

/* Создаем счетчик для заголовка 'h2' */
h2{
: parag_2;   
}

/* Считаем в элементе 'body' все 'h2' */
/* Вставляем перед каждым 'h2' контент: строка+текущее значение 
счетчика+строка */
h2:before{ 
: parag_1 1; 
: "§" counter(parag_1) ". ";
}

/* Считаем в элементе 'h2' все 'h3' */
/* Вставляем перед каждым 'h3' контент: текущее значение счетчика 
parag_1+строка+текущее значение счетчика parag_2+строка */
h3:before{ 
: parag_2 1; 
: counter(parag_1) "." counter(parag_2) ". "; 
}
	

Условие задачи №20.1

Практическая верстка на HTML и CSS

1. Для начала полистайте странички основного учебного сайта №1, загрузите и внимательно изучите его код, после чего сверстайте сайт самостоятельно (без комментариев, только код).

2. Для получения дополнительной практики по верстке сайтов посмотрите учебный сайт №2, загрузите и при помощи комментариев изучите его код, а затем, используя готовый макет и графические заготовки, сверстайте сайт самостоятельно.
  Таблицу стилей для больших разрешений постарайтесь сделать сами. Если вы работаете на ноутбуке, то для моделирования больших разрешений измените в медиазапросах разрешения с 1366px, например, на 1266px, чтобы сработала таблица стилей для больших разрешений экранов. При создании таблицы стилей опирайтесь на коэффициент увеличения размеров 1.3. А далее смотрите на результат отображения в браузере и корректируйте.
  Размеры изображений можно изменить либо в графическом редакторе, либо растянуть при помощи соответствующего свойства CSS (см. пример и справочник).