Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

CSS панель навигации

Пример: панель навигации


Панель навигации

Умелое использование навигации для любого веб-сайта очень важно.

С помощью CSS вы можете преобразовать в хорошую панель навигации вместо скучных HTML меню.


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

В качестве стандартной панели навигации на основе HTML является обязательным

, В нашем примере мы создадим стандартный список HTML панель навигации.

Панель навигации в основном список ссылок, так что используйте <UL> и <li> элементы являются очень значимым:

примеров

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Попробуйте »

Теперь давайте удалим поля и отступы из списка:

примеров

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Попробуйте »

Примеры анализа:

  • Список стиле типа: нет - перед удалением списка маленьких флагов. Панель навигации не нужен список маркеров
  • Удалить настройки по умолчанию Поля и отступы набор браузера 0

Приведенный выше пример кода в стандартной вертикальной и горизонтальной навигации штрих-кодов, используемых.


Вертикальная панель навигации

Приведенный выше код, нам нужно только <a> элементы стиля, создания вертикальной панели навигации:

примеров

a
{
display:block;
width:60px;
}

Попробуйте »

Пример показывает:

  • дисплей: блок - блок отображения ссылок элемент, так что полнота становится интерактивными область ссылки (а не только текст), что позволяет определять ширину
  • ширина: 60px - блочные элементы по умолчанию это максимальная ширина. Мы хотим указать ширину 60 пикселей

Совет: См пример полностью стиле вертикальной панели навигации .

Примечание: Не забудьте указать ширину элемента в вертикальной чертой <a> навигации 'с.Если опустить ширину, IE6 может привести к неожиданным результатам.


Горизонтальная панель навигации

Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающихэлементов списка.

Оба метода хороши, но если вы хотите сделать ссылку на тот же размер, вы должны использовать плавающий метод.

Встроенные элементы списка

Один построить горизонтальную панель навигации, чтобы указать

  • Элемент, приведенный выше код является стандартным встроенным в систему:

    примеров

    li
    {
    display:inline;
    }

    Попробуйте »

    Примеры анализа:

    • Дисплей: встроенный; - По умолчанию <li> элемент представляет собой блок-элемент. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить строку.

    Совет: См пример полностью стиля горизонтальной панели навигации .

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

    В приведенном выше примере ссылки имеют различную ширину.

    Для всех звеньев одинаковой ширины, всплывают <li> элемент и указать ширину элемента <a>:

    примеров

    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

    Попробуйте »

    Примеры анализа:

    • плавать: слева - использовать слайды слайдер элемента рядом друг с другом
    • дисплей: блок - блок отображения ссылок элемент, так что полнота становится интерактивными область ссылки (а не только текст), что позволяет определять ширину
    • ширина: 60px - блочные элементы по умолчанию это максимальная ширина. Мы хотим указать ширину 60 пикселей

    Совет: См пример полного стиля горизонтальной панели навигации. .