Структура Div+CSS
Вы изучаете макет CSS? Разве вы не можете полностью овладеть чистым компоновкой CSS? Обычно есть две ситуации, которые препятствуют вашему исследованию:
Первая возможность состоит в том, что вы еще не поняли принцип страниц обработки CSS. Прежде чем рассмотреть общую производительность вашей страницы, вы должны сначала рассмотреть семантику и структуру контента, а затем добавить CSS для семантики и структуры. Эта статья расскажет вам, как структурировать HTML.
Другая причина заключается в том, что вы беспомощны по поводу этих очень знакомых атрибутов слоя презентации (таких как CellPadding, Hspace, Align = Left и т. Д.) И не знаете, к какому оператору CSS преобразовать. Когда вы решаете первую проблему и знаете, как структурировать свой HTML, я подробно расскажу о исходных атрибутах производительности, какие CSS используется вместо этого.
Структурированный HTML
Когда мы впервые выучили производство веб -страницы, мы всегда сначала рассмотрим, как разработать и рассмотреть картины, шрифты, цвета и планы макета. Затем мы используем Photoshop или фейерверки, чтобы нарисовать и разрезать на маленькие картинки. Наконец, все дизайны восстанавливаются и отображаются на странице путем редактирования HTML.
Если вы хотите, чтобы ваша HTML-страница была расположена с CSS (которая является CSS-дружественной), вам нужно начать все сначала, не рассматривая внешний вид сначала, и сначала подумайте о семантике и структуре содержания вашей страницы.
Внешний вид не самая важная вещь. Хорошо структурированная HTML-страница может быть выражена на любом виде, CSS Zen Garden является классическим примером. CSS Zen Garden помогает нам, наконец, распознать силу CSS.
HTML не просто читается на экранах компьютеров. Фотографии, которые вы тщательно спроектировали с помощью Photoshop, не могут отображаться на КПК, мобильных телефонах и считывателях экрана. Но хорошо структурированная HTML-страница может отображаться в любом месте, на любом сетевом устройстве с помощью различных определений CSS.
Начните думать
Прежде всего, нам нужно узнать, что такое структура, что некоторые писатели также называют семантикой. Термин означает, что вам необходимо проанализировать свои блоки контента и цель каждой службы контента, а затем установить соответствующую структуру HTML на основе этих целей контента.
Если вы сядете и тщательно проанализируете и спланируете структуру своей страницы, вы можете получить несколько таких частей, как это:
Логотип и имя сайта
Контент главной страницы
Навигация на сайте (главное меню)
Подменю
Поле поиска
Функциональная зона (такая как корзина, кассир)
Нижний колонтитул (авторское право и соответствующие юридические заявления)
Обычно мы используем элементы div для определения этих структур, например, это:
＜ div id = заголовок ＞＜/div ＞
＜ div id = контент ＞＜/div ＞
＜ div id = globalnav ＞＜/div ＞
＜ div id = субнав ＞＜/div ＞
＜ div id = search ＞＜/div ＞
＜ div id = магазин ＞＜/div ＞
＜ div id = нижний колонтитул ＞＜/div ＞
Это не макет, это структура. Это семантическое описание блоков контента. Когда вы понимаете свою структуру, вы можете добавить соответствующий идентификатор в Div. Контейнер для Div может содержать любой блок содержимого или гнездо другого Div. Блок содержимого может содержать любые элементы HTML - заголовок, абзац, изображение, таблица, список и т. Д.
Согласно тому, что было сказано выше, вы уже знаете, как структурировать HTML, и теперь вы можете делать определения макета и стиля. Каждый блок содержимого может быть размещен в любом месте на странице, а затем указаны цвет, шрифт, граница, фон, атрибуты выравнивания и т. Д. Блока.
Использование селектора - замечательная вещь
Название идентификатора - это средство для управления определенным блоком контента. Поместив Div на этот блок контента и добавив уникальный идентификатор, вы можете использовать селектор CSS для точного определения внешнего вида каждого элемента страницы, включая заголовок, список, изображение, ссылку или абзац и т. Д. Например, если вы пишете правило CSS для #Header, он может полностью отличаться от правил изображения в #Content.
Другой пример: вы можете определить стили ссылок в разных блоках контента по разным правилам. Аналогично этим: #globalnav a: ссылка или #Subnava: ссылка или #Content a: ссылка. Вы также можете определить одни и те же элементы в разных блоках контента с разными стилями. Например, стили P в #Content и #Footer определяются #Content P и #Foterp, соответственно. Структурно говоря, ваша страница состоит из изображений, ссылок, списков, параграфов и т. Д. Они могут быть определены как любой внешний вид.
Тщательно структурированная HTML -страница очень проста, и каждый элемент используется в структурных целях. Если вы хотите отступить абзац, вам не нужно использовать тег BlockQuote. Просто используйте тег P и добавьте правило маржи CSS в P, чтобы достичь цели отступления. P - структурированный тег, маржа - это атрибут представления, первый принадлежит HTML, а последний принадлежит CSS. (Это фазовое разделение структуры и выражения.)
Здесь почти нет тегов, которые представляют атрибуты на хорошо структурированной HTML-странице. Код очень чистый и лаконичный. Например, исходный код <tablewidth = 80% cellpadding = 3 border = 2align = left> теперь может записать только <table> в HTML, и все вещи, которые управляют производительностью, записаны в CSS. В структурированном HTML таблица представляет собой таблицу, а не что -то другое (например, используется для макета и позиционирования).
Практикуйте структуру сами
То, что упоминается выше, является лишь самой основной структурой. В реальном приложении вы можете настроить блоки содержимого по мере необходимости. Часто существуют девственные ситуации, и вы увидите, что в слое контейнера есть и другие слои, со структурой, похожей на это:
＜ Div ID = NAVContainer ＞
＜ div id = globalnav ＞
＜ ul ＞ Список ＜/ul ＞
＜/div ＞
＜ div id = subnav ＞
＜ ul ＞ Другой список ＜/ul ＞
＜/div ＞
＜/div ＞
Вложенные элементы Div позволяют вам определять больше правил CSS для контроля производительности, например: вы можете дать #NavContainer правило, чтобы сделать список правильно, а затем дать #GlobalNav правило, чтобы сделать список оставить, и дать #Subnav список еще одну совершенно другую производительность.
Заменить традиционные методы на CSS
Следующий список поможет вам заменить традиционные методы на CSS:
HTML -атрибут и соответствующий метод CSS
HTML -атрибут
Описание метода CSS
Выравнивание = осталось
Выравнивать = правый поплавок: слева;
Поплавок: верно; Используйте CSS, чтобы поплавить любой элемент: изображение, абзац, див, заголовок, таблица, список и т. Д.
Когда вы используете атрибут Float, вы должны определить ширину для плавающего элемента.
MARGINWIDTH = 0LEFTMARGIN = 0 marginHeight = 0 TopMargin = 0 Margin: 0; Используйте CSS, поля может быть установлен на любом элементе, а не только на элементе тела, но, что более важно, вы можете указать значения маржи вверху, справа, внизу и слева от элемента соответственно.
vlink =#333399 Link =#000000 Link =#3333FF A: ссылка#3FF;
A: Посещение: #339;
A: Hover: #999;
A: Active: #00F;
В HTML цвет ссылки определяется как значение атрибута тела. Стили ссылок всей страницы одинаковы. Используя селектор CSS, стили ссылок различных частей страницы могут быть разными.
bgcolor = #ffffff founal-color: #fff; В CSS любой элемент может определить цвет фона, а не только элементы тела и таблицы.
Bordercolor = #ffffff Border-Color: #fff; Любой элемент может установить границы (Boeder). Вы можете определить верхнюю, правую, снизу и левую соответственно.
граница = 3cellspacing = 3 пограничной ширины: 3PX; Используя CSS, вы можете определить границу таблицы как единый стиль, или вы можете определить цвет, размер и стиль верхнего, правого, нижнего и левого границы соответственно.
Вы можете использовать таблицу, TD или TH Selectors.
Если вам нужно установить безграничный эффект, вы можете использовать CSS Definition: Border-Collapse: Collapse;
＜ br clear = оставлен ＞
＜ Br Clear = справа ＞
＜ Br Clear = все ＞
ясно: осталось;
ясно: верно;
ясно: оба;
Многие макеты с двумя колонами или 3-колумми используют атрибут Float, чтобы найти. Если вы определите цвет фона или фоновое изображение в плавающем слое, вы можете использовать прозрачный атрибут.
CellPadding = 3
vspace = 3
hspace = 3 заполнения: 3px; С CSS любой элемент может устанавливать атрибуты накладки. Точно так же прокладка может установить верхнюю, правую, снизу и левую соответственно. Заполнение прозрачна.
ALIGN = Центр текстовой добавление: Центр;
Право маржи: Авто; Полевая левая: Авто;
Текст-соглашение применяется только к тексту.
Уровни блоков, такие как Div и P, могут быть центрированы по горизонтали через правой маржи: Auto; и левая маржа: авто;
Некоторые прискорбные советы и рабочая среда
Из -за неполной поддержки CSS браузерами нам иногда приходится взять некоторые взломы или создать среду (обходные пути), чтобы CSS позволил CSS достичь того же эффекта, что и традиционные методы. Например, элементы уровня блока иногда требуют использования методов горизонтального центрирования, методов ошибок модели коробки и т. Д.
Еще один ресурсный сайт для CSS -трюков - это позиция Big John и Holly Bergevin - это все.
Понять плавающее поведение
«Сдерживающие поплавки» Эрика Мейера поможет вам освоить макет атрибута Float. Поплавленный элемент иногда должен быть очищен, и чтение «Как очистить поплавки без структурной разметки» будет очень полезным.