Несколько лет назад DIV+CSS начал постепенно становиться предпочтительным методом веб-дизайна. В настоящее время DIV+CSS стал стандартом веб-дизайна. За последние несколько лет многие отечественные веб-сайты завершили переход от TABLE к DIV+CSS. годы. . Автор также является веб-дизайнером и предпочитает этот метод. Я использую div+css для предоставления дизайна клиентам уже три года. Так какие же у него преимущества по сравнению с TABLE? Давайте поговорим о личном опыте и понимании, надеясь быть полезными для коллег и связанного с ними персонала.
Самым большим преимуществом использования DIV+CSS в веб-дизайне является стандартизация веб-кода, отказ от устаревшего метода разметки таблиц и реализация разделения между контентом, производительностью и поведением. HTML-код лучше структурирован, его легче читать и поддерживать. и размер файла веб-страницы также меньше. Например, после недавней реконструкции веб-сайта клиента размер файла веб-страницы был меньше половины исходного размера, поэтому он занимал меньше места на веб-сайте, и веб-сайт открывался быстрее.
Методы DIV+CSS и TABLE сильно различаются по дизайну, прежде чем приступить к разработке веб-страницы, например, присвоение имен элементам, из которых состоит веб-страница, для облегчения определения стиля в CSS. Публичные атрибуты лучше всего определять с помощью имен классов. . Общие стили всего веб-сайта могут быть помещены в отдельный файл CSS. К общим общедоступным атрибутам относятся: ширина веб-страницы, цвет фона, фоновое изображение, размер шрифта по умолчанию, цвет, стиль ссылки и т. д. Для каждой веб-страницы предусмотрены разные стили. CSS-файл. Лучше всего сосредоточиться на одном блоке и указать, какая именно веб-страница или часть веб-страницы находится перед блоком. Это не только уменьшит размер CSS-файла, но также позволит избежать путаницы и сделает обслуживание более удобным. Стоит отметить, что стили не следует встраивать в код веб-страницы, чтобы полностью разделить контент и стиль.
Чтобы хорошо работать в веб-дизайне DIV+CSS, необходимо понять три момента.
1. Атрибут Float: DIV (слой) по умолчанию занимает целую строку. Для распространенных макетов с двумя или несколькими столбцами вам необходимо правильно установить атрибуты float и ширины для достижения эффекта. После завершения макета с несколькими столбцами, если выполняется переход к слою, занимающему баннер, вам необходимо установить атрибут очистки, чтобы очистить плавающий слой.
2. Режим блока: слой имеет такие атрибуты, как ширина, высота, граница, внутренний и внешний интервал. Фактическое пространство, занимаемое слоем, представляет собой сумму вышеуказанных значений атрибутов. Правильное использование этих атрибутов позволяет добиться компактности и компактности. элегантный макет. Красивый веб-макет.
3. Вложенность слоев. Опытные веб-дизайнеры знают, что не рекомендуется вкладывать слишком много слоев, обычно не более 3 слоев. Слишком большая вложенность приведет к сложному и избыточному коду, трудностям в обслуживании и медленной работе. Кроме того, в макете с несколькими столбцами можно использовать плавающее слой, и нет необходимости настраивать общий уровень IE для встраивания.
Отдельно упомяните тему совместимости браузеров. По сравнению с макетом TABLE, DIV+CSS более подвержен проблемам несовместимости с несколькими браузерами. Основная причина заключается в том, что разные браузеры имеют разные значения по умолчанию для веб-стандартов. Основным направлением в Китае является IE, реже используются Firefox и Chrome. Что касается тестирования совместимости, вам сначала необходимо убедиться, что в нескольких версиях IE не возникает проблем. Вот некоторые методы и приемы, которые помогут вам найти решения для конкретных ситуаций. проблемы на сайте.
Резюме: DIV+CSS имеет множество преимуществ перед TABLE. Веб-дизайнерам следует как можно скорее отказаться от метода TABLE, что будет способствовать более глубокому изучению DIV+CSS. Изучить и использовать метод веб-дизайна DIV+CSS несложно. Если вы поймете некоторые базовые знания и выполните еще несколько случаев, вы постепенно поймете и освоите его.
Эта статья была опубликована [Hippie], веб-мастером http://www.swjns.com . Сохраните URL-адрес для повторной печати.
Спасибо hbjsp за ваш вклад