Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML. Если вы хотите просмотреть учебник CSS, пожалуйста, нажмите здесь.
Вверху: язык разметки - замена изображения . Глава 15 Укажите стиль для <body>
Одним из преимуществ установки контента и эффектов отображения отдельно является гибкость. Используя CSS для управления макетом веб -сайта (метод, используемый в главе 12), вы можете управлять элементами дизайна всего веб -сайта, изменить несколько правил и сразу же резко обновлять тысячи страниц.
Одним из удобных примеров использования CSS для управления макетом является указание стиля для <body>, и, добавив класс или идентификатор в <body> теги, вы можете настроить любые теги на странице. Нет никаких проблем с повторяющимися определениями вообще.
В этой главе мы рассмотрим, как использовать структуру тега для переключения двух различных конфигураций макета, добавив класс в тег <body>. Двух Колмн или Трех Колмна.
Как и при переработке веб -сайта для быстрой компании, использующей технологию макета CSS, одна из проблем: хотя все страницы имеют одинаковую навигацию и конец страницы, также требуются два разных макета.
Первый макет-это индексная страница (домашняя страница), см. Рисунок 15-1. Это страница с навигационной функцией, позволяющая пользователям продолжать проникать в структуру каталогов веб -сайта. Мы решили использовать макет с тремя столбцами для этих страниц.
Рисунок 15-1 Демонстрация Fast Compane's Three-Column Index Page
Способность второй страницы-внутренняя страница Рисунок 15-2. Любая страница, которая чувствует, что пункт назначения использует этот макет. Чтобы улучшить читаемость, мы решили пропустить левый столбец и оставить два столбца, то есть в одном большом столбце помещает контент, а другой - рекламные объявления.
Рисунок 15-2 Демонстрация двухколонной текстовой страницы компании Fast Company.
Причина, по которой я объясняю это, заключается не в том, чтобы доказать, что мы взломали великую тайну определенного макета, а в том, чтобы продемонстрировать, что добавление класса к тегу <body> может регулировать ширину столбца и поместить или опустить третий столбец в соответствии с формой страницы. При создании такого эффекта никакие правила не повторяются вообще, и никаких дополнительных листов в стиле не введены. Счеты и структуры стиля добавляются.
После того, как эти повествования начнут иметь смысл, после того, как они начали описывать структуру маркировки, разделяемая двумя страницами. Для достижения макета столбца будет использоваться метод абсолютного позиционирования, упомянутый в главе 12.
Упрощенная структура тегов текстовой страницы выглядит так:
<div id = заголовок>
... Информация о заголовке здесь ...
</div>
<div id = content>
... содержание здесь ...
</div>
<div id = справа>
... Информация о правом столбце ...
</div>
<div id = нижний колонтитул>
... Информация нижнего колонтитула ...
</div>
Использование правил CSS в качестве #Content и #Footer плюс правый правый патч, который достаточно для использования метода абсолютного позиционирования для вставки в #Right. В этом примере 190 пикселей достаточно.
#content, #footer {
Маржа: 10px 190px 10px 10px;
}
Для страниц индексов структура разметки точно такая же, поэтому нет необходимости копировать общее правило CSS, но дополнительный <div> добавляется слева от #Content в качестве третьего столбца (#Left).
<div id = заголовок>
... Информация о заголовке здесь ...
</div>
<div id = content>
... содержание здесь ...
</div>
<div id = Left> ... Информация о левом столбце ... </div> <div id = справа> ... Информация о правом столбце ... </div><div id = нижний колонтитул>
... Информация нижнего колонтитула ...
</div>
Для этой трехколонной структуры мы не только должны установить правый внешний патч для #Content и #Footer для размещения правого столбца, но мы также должны установить левый внешний патч для размещения недавно добавленного левого столбца.
Тем не менее, левый внешний патч был установлен на 10 пикселей, чтобы соответствовать заданному макету текстовой страницы, который имеет только двойные столбцы.
Вау, мы застряли, как мы должны продолжать? Пожалуйста, продолжайте читать.
Предыдущая страница 1 2 3 Следующая страница Прочитайте полный текст