Листинг 11.3
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px }
.
#cheader { width: 1010px; padding: 0 20px; border-bottom: thin dotted #B1BEC6 }
#cnavbar { width: 250px; height: 570px; float: left; margin-right: 10px }
#cmain { width: 760px; height: 570px; float: left; overflow: auto; padding: 5px; border-left: thin dotted #B1BEC6 }
#ccopyright { width: 1010px; clear: both; padding: 10px 20px 0px 20px; border-top: thin dotted #B1BEC6 }
Давайте разберем его.
Чтобы убрать отступ между границами окна Web-обозревателя и содержимым Web-страницы, мы использовали атрибут стиля margin. Его мы поместили в стиль переопределения тега <BODY> и дали ему значение 0 пикселов:
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px }
В именованном стиле cheader, привязанном к одноименному контейнеру, мы задали внутренние отступы слева и справа, равные 20 пикселам, и рамку с одной только нижней стороной. Эта рамка отделит данный контейнер от нижележащих:
#cheader { width: 1010px; padding: 0 20px; border-bottom: thin dotted #B1BEC6 }
Кроме того, мы задали в качестве ширины этого контейнера абсолютное значение.
Вспомним: при выводе на экран контейнера с относительной шириной Web- обозреватель сначала вычислит абсолютное значение его ширины, а потом добавит к нему величину отступов. В результате чего контейнер станет шире, чем окно Web-обозревателя, и в окне появятся полосы прокрутки, что нам совсем не нужно. Поэтому для ширины контейнера лучше задать абсолютное значение, подобрав его так, чтобы контейнер гарантированно поместился в окно Web-обозревателя по ширине.
В именованном стиле cnavbar мы указали внешний отступ справа 10 пикселов — он визуально отделит контейнер cnavbar от контейнера cmain:
#cnavbar { width: 250px; height: 570px; float: left; margin-right: 10px }
В именованном стиле cmain мы задали внутренние отступы и рамку с одной левой стороной — она отделит контейнер cmain от контейнера cnavbar:
#cmain { width: 760px; height: 570px; float: left; overflow: auto; padding: 5px; border-left: thin dotted #B1BEC6 }
В именованном стиле ccopyright мы задаем отступы слева и справа по 20 пикселов, а сверху — 10 пикселов. Кроме того, мы создаем рамку с одной верхней стороной, которая отделит контейнер ccopyright от вышерасположенных "соседей":
#ccopyright { width: 1010px; clear: both; padding: 10px 20px 0px 20px; border-top: thin dotted #B1BEC6 }
Вот и все. Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. Автор не будет приводить здесь иллюстрацию, т. к. созданные нами тонкие рамки на ней практически незаметны. Но на экране компьютера они выглядят весьма эффектно.
Посмотрим теперь на полосу навигации. Невыразительные гиперссылки скучились в верхней части контейнера cnavbar, просто жалко на них смотреть!.. Давайте их сдвинем влево, немного "разредим", создав отступы, и заодно заключим каждую из них в рамки.
Как мы помним, наша полоса навигации представляет собой список, а отдельные ее гиперссылки — пункты данного списка.
Вот необходимые изменения:
— Список, формирующий полосу гиперссылок, сдвинуть влево на 30 пикселов. Так мы ликвидируем образовавшееся после удаления маркеров свободное пространство слева, которое смотрится некрасиво.
— Внешние отступы у пунктов списка сверху и снизу — 10 пикселов. Так мы отделим гиперссылки друг от друга.
— Рамка пунктов списка — тонкая, сплошная, цвет #B1BEC6.
— Внутренние отступы пунктов списка: сверху и снизу — по 5 пикселов, слева и справа — по 10 пикселов. Так мы отделим текст пунктов от рамок.
Осталось только соответственно исправить CSS-код таблицы стилей main.css (листинг 11.4).
Дата добавления: 2015-05-08; просмотров: 558;