Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30


Чувашия-это моя Россия

Навигационные панели на основе списков в CSS.

Горизонтальные навигационные панели составляют основу дизайна страниц Вашего сайта. Традиционно навигационные панели создаются из нескольких находящихся рядом текстовых ссылок или нескольких изображений. В любом случае в исходном коде документа их разметка не слишком семантическая. Если подумать, то имеет смысл разметить навигационные опции в исходном коде в форме списка. Применяя CSS, можно использовать смысловую разметку и при этом визуально отобразить опции в виде знакомой горизонтальной линейки. Существует два способа превращения маркированного списка в горизонтальную навигационную панель при создании сайта. При первом способе элементы списка отображаются в одну строку вместо столбца (который задан по умолчанию для блочных элементов). При втором способе для выстраивания в ряд элементов списка и ссылок используются плавающие объекты. В обоих примерах используется приведенная ниже разметка обычного несортированного ( маркированного) списка, состоящего из пяти элементов; как такой список выглядит при отображении заданными по умолчанию стилями браузера.

                • Первое название.
                • Второе название.
                • Третье название.
                • Четвертое название.
                • Пятое название.               

Список без применения стилей.

            < ul id="nav">
               < li>a href="/">Первое название.< /a>< /li>
               < li>a href="/">Второе название.< /a>< /li>
               < li>a href="/">Третье название.< /a>< /li>
               < li>a href="/">Четвертое название.< /a>< /li>
               < li>a href="/">Пятое название.< /a>< /li>
            < /ul>

Внутристрочные элементы списков.

Начнем с элементарного стилевого правила, удаляющего маркеры списка list- style-type : none и отображающего элементы списка рядом друг с другом вместо столбца display: inline. Для полей и интервалов задаются нулевые значения, чтобы подготовить почву для применения стилей к элементу-анкеру (а). Результат применения этих стилей.

                 ul#nav {
                     list-style-type: none; 
                     margin: Орх; 
                     padding: Орх;	
                     }
                     
                 ul#nav li {
                     display: inline;
                      }
                      
           Первое название.  Второе название.  Третье название.   Четвертое название.   Пятое название. 
               
             Горизонтальное отображение списка

После этого можно применять стиль к элементам-анкерам а. В данном примере было убрано подчеркивание элементов и добавлены рамка, фоновый цвет и интервалы. Для состояния наведения был указан альтернативный стиль, как было показано в предыдущем разделе. Готовый навигационный список - это очень простой пример того, что можно получить.

             ultnav li а {
                    padding: 5рх 2Орх;
                     margin: Орх 2рх; 
                     border: lpx solid #999;
                     background-color: #ССС;
                     text-decoration: none;
                     text-align: center;	
                     }
                     
             ul#nav li a:hover {
                     background-color: #333; 
                     color:	#FFF;
                     }

Плавающие элементы списка.

В другом методе создания горизонтальных списков используется свойство float, благодаря которому элементы списка выстраиваются рядом друг с другом. При использовании свойства float важно, чтобы для следующего элемента в исходном коде было задано значение clear: both, чтобы содержимое страницы не обтекало список.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: