Задание.

Дата добавления: 2015-07-09; просмотров: 777; Нарушение авторских прав

1. Создать веб-страницу, изображенную на рисунке ниже.

При этом необходимо соблюсти следующие условия:

· валидный строгий HTML-код;

· валидный CSS 2.1;

· корректное отображение в браузерах Internet Explorer 7–8, Opera 10, Firefox 3, Safari 5, Chrome 4, а также в их старших версиях;

· таблицы не применяются;

· рисунки не используются;

· ширина индикатора равна 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>

2. Для приведённого кода создайте стиль, с помощью которого можно получить результат, представленный на рисунке ниже. Страница должна корректно отображаться в браузерах IE8, IE9, Firefox 5, Opera 11 и Chrome.

Код не должен меняться, за исключением раздела <head>.

<!DOCTYPE html>

<html>

<head>

<title>Квадраты</title>

</head>

<body>

</body>

</html>

Решение CSS:

body {

width:100%;

height:100%;

background-color:#fff;

color:#000;

margin:0;

padding:15px;

}

div.black {

width:48px;

height:48px;

background-color:#000;

background-clip:content-box;

border:1px solid #bbb;

padding:1px;

overflow:hidden;

position:absolute;

}

div.white {

width:50px;

height:50px;

background-color:#fff;

border:1px solid #bbb;

overflow:visibile;

position:relative;

top:25px;

left:25px;

}

<== предыдущая лекция	\|	следующая лекция ==>
Заключение	\|	Форма навчання: денна