Основы веб-сайта на основе Div: 7 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:55

Это руководство покажет вам самые основы создания веб-сайта с помощью div. Потому что таблицы, используемые для разметки, - зло!: p Чтобы понять это, вам нужно знать основы HTML и CSS. Если вы чего-то не понимаете, не стесняйтесь спрашивать. Моя личная домашняя страница также использует такую структуру div.

Шаг 1. Создайте основные файлы

Сначала создайте свой html-файл. Мы добавим к нему самые основы. Файл css пока будет пустым. HTML-файл теперь содержит: test Сохраните ваш html-файл как something.html. Вы можете сами выбрать название. Ваш файл css должен быть сохранен как.css. Убедитесь, что вы дали ему то же имя, которое указано в html-файле. В данном случае "style.css". Теперь у нас есть простая пустая html-страница при предварительном просмотре в нашем браузере.

Шаг 2. Измените тег тела для основных цветов, шрифтов и т. Д

Мы оставим html-файл без изменений и отредактируем только css-файл. Добавьте следующий код в ваш css-файл: body {background: # 444444; семейство шрифтов: вердана, ариал, без засечек; цвет: # 444444; размер шрифта: 12 пикселей; margin: 0px;} С помощью этого фрагмента кода мы определим все свойства тега body. Поскольку все содержимое находится в теге body, эти настройки будут влиять на всю страницу. Фон и цвет шрифта (цвет) установлены на темно-серый цвет. Для семейства шрифтов (font-family) установлено значение Verdana. Если на компьютере, используемом для просмотра нашего веб-сайта, нет шрифта «verdana», он будет отображать наш сайт шрифтом «arial». Вы можете добавить в список другие шрифты. «Без засечек» - это общий тип, который будет использоваться, если не было предоставленного вами шрифта. Размер шрифта (font-size) установлен на 12 пикселей. Это абсолютная величина. Если вы хотите отредактировать другие размеры шрифта (например, заголовки, абзацы, пункты меню и т. Д.), Вы можете использовать относительную единицу «em» вместо «px». Таким образом, если вы хотите изменить размер своего веб-сайта, вам нужно будет изменить только размер шрифта основного текста. Для всех четырех сторон основного тега установлено значение 0 пикселей. Это делается для того, чтобы сайт прилипал к верхнему краю окна.

Шаг 3. Добавление контейнера с заголовком и содержимым

Теперь мы добавим контейнер. Это просто центрированный блок, который будет содержать весь наш веб-сайт. В этот контейнер мы добавим еще два блока; div содержимого и div заголовка. Теперь наш html-файл будет выглядеть следующим образом: test Content Header Мы добавим следующий код в наш css-файл: div # container {width: 800px; маржа: 0px авто; фон: #FFFFFF; padding: 0px;} div # content {width: 800px; padding-top: 100 пикселей; фон: желтый;} div # header {width: 800px; высота: 100 пикселей; фон: синий; позиция: абсолютная; вверху: 0px;}. clearfix: после {content: "."; дисплей: блок; высота: 0; ясно: оба; visibility: hidden;}. clearfix {display: inline-block;} / * Скрыть из IE Mac / * /. clearfix {display: block;} div # container означает, что у нас есть тег div с идентификатором "container". Мы добавим несколько цветов и маржу: 0px auto; чтобы убедиться, что наш контейнер находится по центру страницы. Мы должны дать содержимому padding-top и заголовку абсолютное значение с «top: 0px», чтобы убедиться, что заголовок расположен над другим содержимым. уродливые цвета. Это просто для того, чтобы было легче читать цвета и видеть различные div. Нам понадобится этот странный код clearfix, чтобы убедиться, что наши div для навигации и содержимого (добавленные на следующем шаге) не выпадают из окружающего div.

Шаг 4. Создайте два блока в блоке содержимого для навигации и фактического содержимого

Теперь мы добавим еще два блока в блок содержимого. Один для навигации и один для фактического содержимого. Между тегами содержимого; вы добавите новый код:

Навигация Основное содержимое Мы добавим немного кода css для отображения навигации и основного содержимого div: div # nav {width: 200px; плыть налево; фон: оранжевый;} div # maincontent {width: 600px; float: right; background: pink;} Обратите внимание на тот факт, что оба эти div'а являются плавающими. Если бы мы не поместили дополнительный код clearfix на предыдущем шаге, блоки div будут плавать за пределами окружающего div. С помощью метода clearfix мы позаботимся о том, чтобы этого не произошло.

Шаг 5: добавьте дополнительные элементы для структуры в навигации

Теперь мы добавим несколько дополнительных блоков в оба блока "nav", чтобы создать некую структуру на нашей веб-странице. Измените следующий фрагмент кода:

• Фу
• Бар

Теперь мы добавим фрагмент кода, чтобы определить, как должен отображаться div «navblock». Обратите внимание, что у навигационного блока есть класс, а не идентификатор. Причина этого проста; блоки с идентификатором отображаются только один раз (блок навигации, верхний колонтитул, нижний колонтитул,…). Дивы с классами могут отображаться более одного раза. Здесь мы будем использовать класс. На всякий случай позже мы захотим добавить еще один блок навигации. Div.navblock {width: 180px; маржа: 5 пикселей автоматически; border: 1px сплошной красный;} Если мы хотим добавить еще один блок навигации, вам просто нужно добавить новую… структуру. Ваш код теперь будет выглядеть так;

• Фу
• Бар
• Бу
• Далеко

Шаг 6: добавьте несколько дополнительных элементов для структуры в основном содержимом

Теперь сделаем то же самое для div maincontent. Теперь код выглядит так:

Lorem ipsum dolor sit amet,…

Опять же, мы добавим фрагмент кода в наш файл css, чтобы определить, как должен отображаться div: div.contentblock {width: 580px; маржа: 5 пикселей автоматически; border: 1px solid white;} Теперь мы можем добавить еще один блок содержимого, добавив еще один «…» в div maincontent следующим образом;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Шаг 7. Сделайте сайт менее уродливым

Теперь самое интересное; цвета. Теперь, когда у нас есть основная структура div, мы можем изменить цвета на что-то менее хаотичное / уродливое /… Просто поиграйте с цветами в файле css. Вот полный файл html веб-страницы, отображаемой на изображении: тестовое задание

• Фу
• Бар
• Бу
• Далеко

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Заголовок И это полный файл css: body {background: # 444444; семейство шрифтов: вердана, ариал, без засечек; цвет: # 444444; размер шрифта: 12 пикселей; маржа: 0px;} div # container {width: 800px; маржа: 0px авто; фон: #FFFFFF; padding: 0px;} div # content {width: 800px; padding-top: 100 пикселей; фон: #FFFFFF;} div # header {width: 800px; высота: 100 пикселей; фон: # 888888; позиция: абсолютная; вверху: 0px;} div # nav {width: 200px; плыть налево; фон: #FFFFFF;} div # maincontent {width: 600px; float: right; фон: #DDDDDD;} div.navblock {ширина: 180 пикселей; маржа: 5 пикселей автоматически; граница: 1px solid #DDDDDD;} div.contentblock {width: 580px; маржа: 5 пикселей автоматически; граница: 1px solid #FFFFFF;}. clearfix: после {content: "."; дисплей: блок; высота: 0; ясно: оба; visibility: hidden;}. clearfix {display: inline-block;} / * Скрыть из IE Mac / * /. clearfix {display: block;} Итак, теперь у вас есть основы. Конечно, еще многое предстоит отредактировать, например, цвета, размеры шрифта, более привлекательный блок навигации… Но эти инструкции касаются только структуры div. Если вы хотите увидеть другие связанные инструкции, вы всегда можете спросить. Я посмотрю, найду ли время.