Скачать презентацию Горизонтальное CSS меню ШАГ 1 Создаем Скачать презентацию Горизонтальное CSS меню ШАГ 1 Создаем

Горизонтальное CSS меню.ppt

  • Количество слайдов: 9

Горизонтальное CSS меню Горизонтальное CSS меню

  • Главная
  • Ареал
  • Главная
  • Ареал
  • ШАГ 1 • Создаем список • step 1

    • ШАГ 2 • Создаем стиль: <style> ul li { list-style: none; /* убираем маркеры ШАГ 2 • Создаем стиль: • step 2

    Шаг 3 • Добавляем стиль: #menu a { border: 1 px solid #003; border-bottom: Шаг 3 • Добавляем стиль: #menu a { border: 1 px solid #003; border-bottom: none; text-decoration: none; } • (добавляем рамку, но не снизу, убираем подчеркивание у ссылок) • step 3

    Шаг 4 • Добавляем к описанию ссылок: #menu a { padding: 0. 2 em Шаг 4 • Добавляем к описанию ссылок: #menu a { padding: 0. 2 em 0. 5 em; border: 1 px solid #003; border-bottom: none; background-color: #FFA 6 BD; text-decoration: none; color: #AD 2039; } step 4

    Шаг 5 • Добавляем к стилям стиль ссылки при наведении курсора: #menu a: hover Шаг 5 • Добавляем к стилям стиль ссылки при наведении курсора: #menu a: hover { background-color: #AD 2039; color: #FFA 6 BD; } • Step 5

    Шаг 6 • • • Добавляем стиль ко всему меню: #menu { border-bottom: 1 Шаг 6 • • • Добавляем стиль ко всему меню: #menu { border-bottom: 1 px solid #003; font: bold Verdana, sans-serif; } • Step 6

    Шаг 7 #menu { border-bottom: 1 px solid #003; font-weight: bold; font-size: 12 px; Шаг 7 #menu { border-bottom: 1 px solid #003; font-weight: bold; font-size: 12 px; font-family: Verdana, sans-serif; padding-bottom: 2 px; } • Step 7

    Шаг 8 • Подсвечивание текущего пункта – CSS: a#current { background-color: #fff; border-bottom: 1 Шаг 8 • Подсвечивание текущего пункта – CSS: a#current { background-color: #fff; border-bottom: 1 px solid #fff; } – html:

    • Step 8