Боковая панель

Классы элементов

Для разработки элементов sidebar и content понадобится атрибут class, который необходим, чтобы задать одинаковый стиль нескольким элементам, а не перечислять их для каждого элемента отдельно.
 
Для того, чтобы присвоить классу стиль, необходим служебный элемент style. Сейчас вы все увидите.

C o p y r i g h_t (c) a r u l . r u
Для создания меню нам понадобится заголовок, который мы создадим с помощью элемента DIV, присвоив ему class="sb-title". Для пунктов меню используем контейнер DIV класса sb-block.
 
Список создаем с помощь стандартных элементов
UL (ненумерованный список) и LI (элемент списка).

Большой необходимости использовать контейнер сейчас нет. Можно было бы создать список и без него. Но на практике он всегда оказывается нужен.

        <div class="sb-title">Меню</div>
        <div class="sb-block">
          <ul>
            <li>Пункт меню</li>
          </ul>
        </div>

Элемент style имеет атрибут type="text/css" для того, чтобы сообщить браузеру о типе содержимого элемента.

        <style type="text/css">
          div.sb-title { /* .. стили для элементов DIV класса sb-title .. */ }
          div.sb-block ul { /* .. стили для элементов UL, которые внутри div.sb-block .. */ }
          div.sb-block li { /* .. стили для элементов LI, которые внутри div.sb-block .. */ }
        </style>

В первой строке нашего тэга style селектором явяется div.sb-title (название тэга — точка — название класса). Это означает, что стили в данной строке относятся к элементам DIV, у которых class="sb-title".

Следом в фигурных скобках идет перечисление стилей в формате свойство: значение, разделенных точкой с запятой.

Селектор во второй строке означает, что данное правило применимо ко всем элементам с тэгом UL, которые находятся внутри элементов DIV класса sb-block.

Третья строка — для элементов LI, находящихся внутри
элементов div.sb-block.
 

C o p y r i g h_t (c) a r u l . r u
Создадим свои стили.

Чтобы заголовок меню смотрелся нарядно, зальем его цветом хаки, шрифт сделаем жирным и установим небольшие поля:

  background-color: khaki; 
  font-weight: bold; 
  padding: 3px 6px; 

Чтобы немного отступить от верхнего элемента, используем

  margin-top: 10px; 

Для контрастности с пунктами меню, используем нижнюю границу

  border-bottom: 2px solid black;

Список пунктов меню UL не будет иметь маркеров

  list-style: none; 

Отступы, которые по умолчанию есть, аннулируем

  margin: 0; 

Поля, которые тоже по умолчанию есть, уберем все, кроме левого

  padding: 0 0 0 20px;

Сами пункты меню сделаем жирным шрифтом с небольшими полями

  font-weight: bold; 
  padding: 2px 5px; 

Еще нам понадобится псевдокласс :hover. Этот псевдокласс используется для задания стилей элемента в тот момент, когда над ним проходит курсор мыши.

Мы хотим, чтобы в тот момент, когда курсор мыши проходит над пунктом меню, этот пункт выделялся, а курсор превращался в указательный палец.

  div.sb-block li:hover {  
    background-color: #F0F0F0; 
    cursor: pointer;
  }

Чтобы было наглядней, как стили передаются нескольким элементам, добавим еще одно меню.
 
C o p y r i g h_t (c) a r u l . r u
В результате элемент sidebar в сборе будет таким:

      <div id="sidebar" style="display:table-cell; vertical-align:top; padding:5px; width:238px;">
        Sidebar
        <style type="text/css">
          div.sb-title {padding: 3px 6px; background-color: khaki; font-weight: bold; margin-top: 10px; border-bottom: 2px solid black;}
          div.sb-block ul {list-style: none; margin: 0; padding: 0 0 0 20px;}
          div.sb-block li {padding: 2px 5px; font-weight: bold;}  
          div.sb-block li:hover {background-color: #F0F0F0; cursor: pointer;}
        </style>
        <div class="sb-title">Статьи</div>
        <div class="sb-block"><ul>
          <li>Заголовок</li>
          <li>Боковина</li>
          <li>Содержимое</li>
          <li>Подвал</li>
        </ul></div>
        <div class="sb-title">Рубрики</div>
        <div class="sb-block"><ul>
          <li>О сайтах</li>
          <li>Интересное</li>
          <li>Дизайн</li>
          <li>Разметка</li>
        </ul></div>
      </div>

Файл mysite5.html

C o p y r i g h_t (c) a r u l . r u

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Оставить комментарий