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> теперь может быть записан только в 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 = #fffff fanost-color: #ffff; В CSS любой элемент может определить цвет фона, а не только элементы тела и таблицы.
Bordercolor = #ffffff Border-Color: #ffff; Любой элемент может установить границу (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 -советов является позиция Big John и Holly Bergevin - это все.
Понять плавающее поведение
Поплавки Эрика Мейера помогут вам освоить макеты атрибутов. Поплавковые элементы иногда должны быть очищены, и чтение, как очистить поплавки без структурной разметки, будет очень полезным.