Как построить базовую CSS макета
Проектирование без таблиц, используя CSS макеты быстро становятся новым стандартом в Интернете из-за выгоды, упомянутые в моей предыдущей статье. Веб-браузеры используются в эти дни, теперь имеют возможность сделать веб-страниц proficiently. В этой статье я буду стремиться создать базовую 2 колонки CSS макет, который можно использовать для дальнейшей разработки projects.Web страницу: Стиль http://www.isitebuild.com/css/css-layout.html листе: http://www.isitebuild.com/css/stylesheet.htm1. Разделите вашу страницу на части - Div ID тегов позволяет создавать отдельные подразделения на вашей веб-странице. Они определяются с уникальным идентификатором. Вы можете добавить стиль (CSS Selector), которая непосредственно относится к Div этого идентификатора. Не забудьте включить DOCTYPE (оказать Вашей странице точно в браузерах) и мета-тегов (позволяет поисковики на паука ваших страниц). Обертки: есть Div о том, что упаковка вокруг всех остальных divs как контейнер для элементов страницы. Заголовок: определяет баннер вверху этой страницы главная: определяет основное содержание страницы NAV: определяет навигацию страницы колонтитул: определяет колонтитулом и суб-навигация в Страница2. Создание CSS код - в стилей CSS код страницы, как по центру 2 колонки CSS макета в навигации и колонтитул. В Div # обертка стиля создает центр коробка, которая выступает в качестве контейнера для остального содержимого страницы. Ширина: 80% правило устанавливает ширину на Div. Фон-COLOR: # FFFFFF норма создает белый фон для Div. Разница-рейтинг: 50px и разницы-дно: 50px правил создать пространство в 50 пикселей для верхней и нижней маржу для Div itself.The надлежащим образом в центре блока на уровне элемента с CSS состоит в том, чтобы установить разницы налево: авто-и маржа право: авто. Этот инструктирует браузер автоматически рассчитать равные возможности для обеих сторон, таким образом, центрирование в Div. Граница: тонких твердых # 000000 правило добавляет границы вокруг космического Div. Остальная часть кода CSS стили в divs для заголовка, колонтитула, NAV, а также основные content.The Div # заголовок и Div # колонтитулом стили установить маржу и обивка для тех divs. Кроме того, Div # заголовок содержит текст-присоединяются: Центр правило центре заголовке текста, и Div # колонтитулом включает границы сверху: тонких твердых # 000000 правило создать границу вдоль верхней кромки из Div вместо горизонтального правило выше колонтитулом в таблице, на основе layout.The Div # NAV и Div # основные стили создать две колонки в средней части по центру окна. В Div # NAV стиле, поплавок: левый правило подталкивает Div к левой стороне его родительского элемента (в упаковке Div), а ширина: 25% норма устанавливает Div ширина до 25 проц от родительского элемента. С NAV Div плавал с левой и с ограниченным набором ширину, он оставляет место для главного Div двигаться к правой части NAV Div, создавая тем самым на две колонки эффект. Определенный артикль Div # Основной стиль включает разницы налево: 30% правило сохранить основной текст согласован в аккуратные колонки, вместо распространения из ниже NAV колонке. Основной Div левой маржа устанавливается на сумму чуть больше, чем Ширина полосы NAV div.Style листов http://www.isitebuild.com/css/stylesheet.htmIf ссылки размещаются в других местах на странице, они будут наследовать теми же свойствами, что и выше .. синей ссылке, что витает в красный цвет. Что делать, если вы хотите создать еще один набор ссылок, которые имеют иной цвет, и на проходящей мыши над ними они underlined.4. Создать нижней навигации - включить это в раздел страницы, я использую Div # колонтитулом и код каждая ссылка, соответственно. Для того, чтобы идти в горизонтальном списке я использую: дисплей: встроенный; Теперь, когда я закончил создание моего стиля я хочу сократить код на странице, увязав его с моей внешней таблицы стилей. Вот как: 4. Создание внешней таблицы стилей - копировать и вставить все CSS код (без этих тегов:) в блокнот, и ярлык он-то вроде "стиля". Поместите этот стиль листов между главой теги вашего веб page.This будет уменьшить код на вашей странице, чтобы он быстро загрузить, а также поисковые системы могли более легко паук вашем веб page.4. Добавить содержание на вашей странице - после того, как вы получили вашу страницу перспективных корректно, вы можете добавить больше содержания это. Корректировки могут быть легко для любого стиля на этой странице (или всего сайта) простым редактированием одного стиля sheet.5. Загрузка файлов - обязательно загружать веб-страницы и таблицы стилей в корневую директорию вашего server.6. Проверка кода - не забудьте проверить ваш XHTML код: http://validator.w3.org/ и CSS код: http://jigsaw.w3.org/css-validator/ и внести корректировки, где necessary.7. Проверить совместимость браузера и разрешение экрана - проверить, что ваша страница оказывает также в популярных браузерах (IE6, NN7, Firefox) Если вы, начиная с CSS макеты, осуществлять затем медленно, сделав небольшие изменения на ваших страницах т.е. создание стиля листов для вашего основного заголовки и шрифты только. Как Вы стали больше знакомы с CSS можно построить в конечном счете все ваши будущие сайты с CSS layouts.Resources: Основные CSS макета http://www.isitebuild.com/css/css-layout.htmlCSS http://www.isitebuild.com/css/stylesheet.htmBenefits из стилей CSS http://www.isitebuild.com/css/index. htmHerman Дрост является Сертифицированный Интернет Webmaster (CIW) владелец и автор http://www.iSiteBuild.com Доступное дизайна веб-сайта и веб-хостинга. Подписка на его "Маркетинг Советы" Бюллетень для более оригинальных статей. электронной почты: subscribe@isitebuild.com. Вы можете читать
Статья Источник: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
Вебмастер получить html-код
Добавить эту статью на Вашем сайте прямо сейчас!
Вебмастер представить свои статьи
Не требуется регистрация! Заполните форму и ваша статья в Messaggiamo.Com каталог!
