Создайте главную страницу сайта “Популярное куководство” с использования стилевых свойств, в том числе и для ссылок.
Вид главной страницы сайта:
Вертикальная полоска слева строится при помощи картинки
fon01.jpg из подкаталога pic сайта.
HTML-страницу сохраните в виде файла task07.htm, а
CSS-файл в виде файла task07.css в каталог, который вам
укажет учитель. Ссылки в меню (и тексте) должны быть закодированы на
файлы:
task0701.htm — страница “дизайн”;
task0702.htm — страница “собаки”;
task0703.htm — страница “книги”;
task0704.htm — страница “фото”;
task0705.htm — страница “ссылки”.
Текст для документа:
нужны
хорошие Популярное куководство
куки
начало дизайн собаки книги фото ссылки
Это сайт Василия Александровича Кука. Учусь в 8
классе, в г. Переславле-Залесском. Мои интересы
описаны в меню: дизайн сайтов, дрессировка собак,
хорошая фантастика и фотография. В разделе
ссылки приводятся адреса ресурсов по теме
страниц моего сайта.
Возникнут вопросы -- пишите, мой адрес приводится
ниже.
начало дизайн собаки книги фото ссылки
(С) Василий Кук kuk@pereslavl.ru
Шаблон кода HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<LINK rel="stylesheet" type="text/css" href="task07.css">
<TITLE>Популярное куководство</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="blue" alink="red" vlink="purple">
<DIV id="logo"></DIV>
<H1></H1>
<UL class="menuh"> <!-- Горизонтальное меню -->
</UL>
<UL class="menuv"> <!-- Вертикальное меню -->
</UL>
<P>
<P>
</P>
<UL class="menuh"> <!-- Горизонтальное меню -->
</UL>
<DIV id="sign">
</DIV>
</BODY>
</HTML>
Шаблон кода CSS:
/* Страница
--------
Цвет текста -- черный
Цвет фона -- белый и фоновая полоска fon01.jpg
Внутренний отступ слева 100 пикселов
*/
BODY
{
}
/* Горизонтальное меню
-------------------
Фон: #fff2a6;
Убираем маркеры
Убираем внешние отступы
Убираем лишние внутренние отступы
*/
UL.menuh
{
}
/* Стили пункта меню
-----------------
Превращаем пункт в строчный элемент
Задаём шрифт Tahoma (или другой без засечек)
уменьшенный на 20%
Внутренние отступы: по 2 пиксела сверху и снизу,
по 0.5em слева и справа
*/
UL.menuh LI
{
}
/* Вертикальное меню
-----------------
Абсолютное позиционирование в (8,100)
Убираем маркеры
Убираем внешние и внутренние отступы
Задаём белый цвет текста
*/
UL.menuv
{
}
/* Стили пункта меню
-----------------
Задаём шрифт Tahoma (или другой без засечек)
уменьшенный на 20%
Внутренние отступы: по 2 пиксела
Задаем высоту строки числом 1
*/
UL.menuv LI
{
}
UL.menuv LI *
{
padding: 2px; /* Задаём внутренние отступы */
}
/* Стили заголовков
----------------
Цвет #009900
*/
H1,H2,H3,H4,H5,H6 {}
/* Логотип
-------
Абсолютное позиционирование в (10,10)
Фон #ffe3cc
Внутренний отступ 5 пикселов
Рамка
Шрифт "Comic Sans MS" или другой без засечек
Фиксированный размер шрифта 14 пикселов
*/
#logo
{
}
/* Ссылки в тексте и горизонтальном меню (стандартные цвета)*/
A {}
A:link {}
A:active {}
A:visited {}
A:hover {}
/* Ссылки в вертикальном меню
--------------------------
Цвет непосещенной ссылки: cyan
Цвет активной ссылки: yellow
Цвет посещенной ссылки: #40ff00
Под курсором: красная ссылка на белом фоне
*/
.menuv A:link {}
.menuv A:active {}
.menuv A:visited {}
.menuv A:hover {}
/* Авторская подпись
-----------------
Шрифт уменьшенный на 20%
Запрет переносов
*/
#sign
{
}