Как нужно изменить внешний вид файла
Файл, в который нужно добавить строку
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
<style>
.box {width:400px; height:30px;
font-size:28px;
text-align:center;
border:6px solid;
padding:30px;
margin:10px;
position:absolute}
#red {color:#800000; border-color:#ff0000; background-color:#ff8080}
#orange {color:#804000; border-color:#ff8000; background-color:#ffc080}
#yellow {color:#808000; border-color:#ffff00; background-color:#ffff80}
#green {color:#008020; border-color:#00ff40; background-color:#80ff90}
#cyan {color:#008080; border-color:#00ffff; background-color:#80ffff}
#blue {color:#000080; border-color:#0000ff; background-color:#8080ff}
#violet {color:#400080; border-color:#8000ff; background-color:#c080ff}
#red {top:100px; right:250px}
#orange {top:450px; right:600px}
#yellow {top:70px; right:450px}
#green {top:620px; right:250px}
#cyan {top:700px; right:490px}
#blue {top:20px; right:290px}
#violet {top:800px; right:650px}
/* Добавьте своё правило вместо этой строки */
</style>
</head>
<body>
<div class="box" id="red">Каждый</div>
<div class="box" id="orange">Охотник</div>
<div class="box" id="yellow">Желает</div>
<div class="box" id="green">Знать</div>
<div class="box" id="cyan">Где</div>
<div class="box" id="blue">Сидит</div>
<div class="box" id="violet">Фазан</div>
</body>
</html>
Как нужно изменить внешний вид файла
«При наведении курсора» означает, что когда курсор не наведён ни на один из блоков, то всё должно оставаться как сейчас («в момент щелчка» — аналогично). Если ничего такого не написано, значит, речь идёт о постоянной ситуации. Кстати, псевдокласс active (как и hover) работает для любых объектов, а не только для ссылок.
Пример.
Задание: «при наведении курсора на любой блок он оказывается поверх остальных блоков»
Решение: .box:hover {z-index:99}
| Ученик | Задание |
| Абдуллаева Айдан | При наведении курсора на любой из блоков текст в нём увеличивается |
| Авагян Давид | При наведении курсора на красный блок он перемещается в верхний левый угол и становится чёрно-белым (чёрная рамка, чёрная надпись, белый фон) |
| Алексеева Варвара | У красного блока рамка становится двойной |
| Бельковец София | Во всех блоках все надписи становятся курсивными, а рамочки — двойными |
| Богданова Дарья | В момент щелчка по любому из блоков он оказывается в левом верхнем углу страницы, а размер текста в нём увеличивается вдвое (без изменения размера самого блока!) |
| Бутусов Владимир | В синем блоке текст становится жирным, а рамочка двойной |
| Егорова Марина | При наведении курсора на любой из блоков текст в нём становится жирным, а рамочка исчезает |
| Кабазова Диана | При наведении курсора на красный блок его рамка внезапно становится жёлтой |
| Козинова Лилия | При наведении курсора на любой из блоков его рамка становится толще, а сам блок удлиняется вдвое |
| Михайлова Дарья | Надпись в голубом блоке становится курсивной и жирной |
| Насибуллова Камилла | Надпись в синем блоке становится белой, а рамочка — двойной |
| Перегудов Павел | При наведении курсора на голубой блок он оказывается в правом нижнем углу страницы, толщина рамочки в нём увеличивается вдвое, а фон становится темнее |
| Подлеснова Валерия | При наведении курсора на любой из блоков его рамка становится пунктирной, а текст оказывается написан «большими буквами» (small caps) |
| Стафеев Степан | В момент щелчка по любому из блоков он куда-нибудь сдвигается (всё равно куда), а между буквами в надписи появляются промежутки |
| Ушакова Анастасия | При наведении курсора на жёлтый блок он оказывается «сзади» за остальными блоками, а его рамка становится красной |
| Фёдорова Анастасия | При наведении курсора на жёлтый блок текст в нём становится красным, а фон — белым |
| Федотов Павел | Текст во всех блоках увеличивается, а надписи становятся курсивными |
| Четверикова Анастасия | Рамочка у жёлтого блока становятся оранжевой |
| Юрасова Мария | При наведении курсора на любой блок он становится вдвое крупнее, при этом размер шрифта не изменяется |