Індикатор виконання
Створіть веб-сторінку, яка показана на малюнку 1.
Мал. 1. Індикатор виконання
При цьому необхідно дотриматися наступних умов:
- валідний строгий XHTML-код;
- валідний CSS 2.1;
- коректне відображення в браузерах Internet Explorer 8+, Opera 11+, Firefox 6+, Chrome 8+;
- таблиці не застосовуються;
- малюнки не використовуються;
- ширина індикатора дорівнює 250 пікселям;
- ширина кольорової області виконання повинна задаватися в відсотках від загальної ширини індикатора.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Індикатор виконання</title>
<style type="text/css">
#progress {
width: 250px; /* Ширина індикатора */
border: 1px solid #333; /* Параметри рамки */
position: relative; /* Відносне позиціонування */
background: #fff; /* Колір фону */
}
#progress .bg {
background: #f2f0e3; /* Колір фону індикатора */
position: absolute; /* Абсолютне позиціонування */
height: 100%; /* Фон займає всю висоту */
width: 50%; /* Ширина кольорової області */
}
#progress .begin, #progress .end {
position: absolute; /* Абсолютне позиціонування */
font-size: 0.9em; /* Розмір тексту */
top: 1px; /* Зсуваємо вниз */
}
#progress .begin {
padding-left: 3px; /* Відступ зліва */
}
#progress .end {
right: 0; /* Розміщуємо по правому краю */
padding-right: 3px; /* Відступ справа */
}
#progress .current {
position: relative; /* Відносне позиціонування */
text-align: center; /* Вирівнюємо по центру */
}
</style>
</head>
<body>
<div id="progress">
<div class="bg"></div>
<span class="begin">0</span>
<span class="end">5</span>
<div class="current">50%</div>
</div>
</body>
</html>