Понедельник, 21.10.2019, 07:50
Блог учителя информатики и математики
О блогеМой профильРегистрацияВыходВход
Вы вошли как Гость · Группа "Гости" Приветствую Вас, Гость · RSS
Меню блога
Погода в нашем районе.

НАГРАДА

Как Вы считаете, должны ли дети ходить в школу в школьной форме?
Всего ответов: 2749
 
 Блог учителя
Главная » Статьи » Информатика » В помощь ученику

Создадим меню

Создадим меню из себя списка, в котором каждый пункт будет являться ссылкой на какую-то страницу. 

Для того, что бы меню не выглядело скучным  задаём маркерам пунктов некоторый цвет и тип, а так же цвет самим названиям пунктов . Текст заключаем, например, тегами ссылки "<a></a>". 

Стилевые атрибуты задаются между тегами "<style></style>". Вы увидите стиль для маркера (li) и стиль для текста внутри пункта (a) 
<html>
<head>
<title> Меню  </title>
</head>
<body>
<style>
   li {
    color: violet; 
   }
   li a {
    color: #45ADD0; 
   }
  </style>

<ul type="square">
<a>МЕНЮ</a>
<li> <a  href="              ">Главная</a></li>
<li><a  href="               ">1 страница </a></li>
<li><a  href="               "> 2 страница</a></li>
<li><a  href="               ">3 страница</a></li>
</ul>
</body>
</html>

В примерах, вместо ссылок на конкретные таблицы оставим пробелы "            "

МЕНЮ


Создадим нечто более красивое и полноценное.
Помимо типов маркеров – для пунктов расположенных между тегами <li></li> зададим цвет заднего фона, отступы, длину, а так же цвет и толщину рамки. 

<style>
ul.bord li {
list-style-type: none; 
background: #CEECF5;
border: 2px solid Yellow;
width: 150px;
}
</style>

<ul class="bord">
<li>МЕНЮ</li>
<li>Главная</li>
<li>1 страница</li>
<li>2 страница</li>
<li>3 страница</li>
<li>4 страница</li>
</ul>

  • МЕНЮ
  • Главная
  • 1 страница
  • 2 страница
  • 3 страница
  • 4 страница

А теперь сделаем вертикальное меню. Для этого нужно прописать две стилевых группы – для пунктов в обычном состоянии и для пунктов на которые навели курсор мышки – то есть описать событие :hover
 <style>
ul.menu_bord li {
list-style-type: none; 
background: #81BEF7;
border: 1px solid White;
width: 200px;
color: White;
padding: 8px;
}

ul.menu_bord li:hover {
background: White;
border: 1px solid #3A01DF;
border-left: 3px solid #3A01DF;
width: 200px;
color: Black;
padding: 8px;
}
</style>

<ul class="menu_bord">
<li>Главная</li>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>

Фантазируя, вы сможете сделать красивое оригинальное меню.

Категория: В помощь ученику | Добавил: Harchev (19.05.2014)
Просмотров: 2366 | Теги: html, ссылки, создадим, Ссылки HTML, меню | Рейтинг: 4.3/28
Всего комментариев: 0
Имя *:
Email *:
Код *:
Copyright MyCorp © 2019
Блог учителя Учительский портал