Реферат: CSS Design: Укрощение списков

Home

Products

Computers

Software

Мир реалий

Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.

Home

Hidden Cameras

CCTV Cameras

Employee Theft

Helpful Hints

F.A.Q

About Us

ContactUs

Это меню - фактически ответ на вопрос, заданный Майклом Эффордом (MichaelEfford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.

<div id="button">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Hidden Cameras</a></li>

<li><a href="#">CCTV Cameras</a></li>

<li><a href="#">Employee Theft</a></li>

<li><a href="#">Helpful Hints</a></li>

<li><a href="#">F.A.Q</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.

#button {