создание сайтов

Шаг 8

Оформление внешнего вида web страницы (навигация)

  • Переходим в отделение стиля и с новой строки, после последнего правила, которое мы там записали (правило элемента h1) пишем серию правил, которые сформируют стиль навигации нашего сайта.
#nav {
font-size: 80%;
margin: 0;
padding: 5px 0 20px 10px;
border-bottom: 2px solid #666666;
background: #ccccaa;
}
#nav ul, #nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#nav a {
color: #003366;
font-weight: bold;
float: left;
margin: 0 10px;
text-decoration: none;
}
#nav a:hover {
color: #ff6600;
border-bottom: 4px solid #cc0000;
padding-bottom: 2px;
background: transparent;
}
  • Элемент #nav – селектор навигации.
  • Строка border-bottom: 2px solid #666666; - нижняя рамка: сплошная линия толщиной два пикселя серого цвета.
  • Строка padding: 5px 0px 20px 10px; - поля отступа со всех четырех сторон внутри селектора #nav.
  • Элементы #nav ul, #nav li – это общее правило списка для селектора навигации #nav ul и элементов списка для селектора навигации #nav li. Кнопки навигации сайта будут находиться внутри списка ul, при этом каждая кнопка будет являться элементом списка li.
  • Строка display: inline; - где display это код способа отображения элементов, а inline заставляет элементы списка выстраиваться в строку. Если говорить русским языком, то этот параметр сообщает компьютеру о том, что навигация будет горизонтальной – в строку, а не вертикальной в столбик.
  • Строка list-style-type: none; - параметр list-style-type – определяет маркер для списка, а свойство none отменяет отображение маркера. Перед названием кнопки не будет стоять маркер в виде жирной точки или квадратика.
  • Элемент #nav a– правило ссылок между страницами сайта для селектора навигации.
  • Строка font-weight: bold; - толщина шрифта: жирный шрифт.
  • Строка float: left; - плавание (размещение) элемента: по левому краю.
  • Строка text-decoration: none; - текстовые эффекты отсутствуют.
  • Элемент #nav a:hover – правило для кнопок (ссылок) селектора навигации, при наведении на них мышкой стрелки курсора.
  • Строка padding-bottom: 2px; - поле нижнего отступа: два пикселя.
  • Строка background: transparent; - цвет фона: прозрачный.
  • Параметры, которые не прокомментированы, прочитайте самостоятельно, они уже упоминались в настоящем руководстве.
  • Итак, на этом мы закончили создание отделения стиля для нашего сайта.
  • Шаг 9 >>>

     карта сайтаКарта сайта