Создать простой макет страницы с помощью CSS
Эта слайд-презентация показывает, как создать простой макет веб-страницы с помощью CSS. Полезно, когда вы изучили основной CSS и хотите создать веб-страницу самостоятельно.
расшифровка
Создать простой макет страницы с помощью CSS
<! doctype html> <html lang = "en"> <Голова> <title> Простой макет CSS </ title> </ HEAD> <Тело> </ Body> </ Html>
Сохраните это как layout.html на рабочем столе.
Чтобы создать навигацию с неупорядоченным списком, добавьте следующее в <body> и </ body>
<UL> <li> <a href="#"> Главная страница </a> </ li> <li> <a href="#"> О программе </a> </ li> <li> <a href="#"> Продукт </a> </ li> <li> <a href="#"> Связаться </a> </ li> </ UL>
Добавьте <style> и </ style> после </ title> и перед </ head>
Добавьте следующий CSS-код в <style> и </ style>, не пишите текст после //, это комментарии, которые помогут вам понять, что делает этот код. Следуйте за этим для всего кода CSS.
.navigation {
Список стиле типа: нет;
// удаляет маркеры перед элементами списка
ширина: 100%;
// Устанавливает ширину навигации в полное окно браузера
Маржа: 0;
// обнуляем маржу naviagtoin
обивка: 0;
// обнуляем заполнение навигации
высота: 30px;
// устанавливает высоту навигации в 30 pixelbackground-color:
# 600;
// устанавливает цвет фона навигации
семейство шрифтов: Arial;
// устанавливает стиль шрифта текста в навигации
размер шрифта: 100%;
// устанавливает размер шрифта текста внутри навигации
} Это создает новый класс .navigation.
Теперь добавьте класс навигации в ul
<ul class = ”navigation”>
оставьте оставшийся код без изменений. Сохраните файл и запустите его в браузере и посмотрите, как он выглядит.
Вы можете найти некоторые пробелы над навигацией.
Добавьте следующие перед классом навигации в <style> и </ style>
тело {
поле: 0;
отступы: 0;
} Это удаляет все поля по умолчанию или отступы HTML-страницы. Сохраните файл, запустите файл и посмотрите разницу.
Добавьте следующие после класса навигации в <style> и </ style>
.navigation li {
// установить стиль для элементов списка в классе навигации
плыть налево;
// помещаем элементы списка рядом друг с другом
высота: 30px;
// устанавливает высоту элементов списка
высота строки: 30px;
// устанавливает высоту строки, т.е. высоту текста в элементах списка
} Сохраните и запустите файл. Увидеть разницу.
Добавьте следующий код после .navigation li block
.navigation li a {
// стиль для ссылок внутри элементов списка в классе навигации
Дисплей: блок;
// ссылки будут обрабатываться как блоки (например, прямоугольники)
обивка: 5px; // устанавливает 5 пиксельные отступы на всех четырех сторонах ссылок
цвет: #FFF;
// устанавливает цвет текста в ссылках
текст-отделка: нет;
// удаляет подчеркивание из ссылок
} Сохраните и запустите файл, посмотрите разницу.
Добавить следующий после .navigation li блок
.navigation li a: hover {
// для стиля наведения, т. е. при наведении мышки на ссылки
Дисплей: блок;
// создает блоки
обивка: 5px; // устанавливает отступ
оранжевый цвет;
// устанавливает цвет при наведении
текст-отделка: нет;
// удаляет подчеркивание
} Сохраните и запустите файл, посмотрите разницу.
Для создания структуры страницы, в которой вы размещаете свой контент, мы создаем гриды. Сетки и составлены из рядов и столбцов. Мы увидим, как это сделать через минуту.
Добавьте следующий код после .navigation li a: hover block
.строка {
// создаем новую строку класса
ширина: 100%;
// устанавливает ширину строки в полное окно браузера
} Добавьте следующий после блока .row
.row: before, .row: after {
// это гарантирует, что при наличии нескольких строк они не будут перекрываться
дисплей: стол;
содержание: "";
} Сохраните код.
Добавьте следующие в теле после </ ul>
<div class = "row"> </ DIV>
Сохраните код.
Теперь мы создадим три столбца в строке. Первый столбец будет иметь ширину 25%, второй столбец - 50%, а третий снова - 25%. Для этого сначала добавьте следующий код в <div class = ”row”> и </ div>.
<div class = "col1"> <h1> Это первый столбец </ h1> </ DIV> <div class = "col2"> <h1> Это второй столбец </ h1> </ DIV> <div class = "col3"> <h1> Это третий столбец </ h1> </ DIV>
Сохраните код и запустите файл и посмотрите, как он выглядит в браузере.
Теперь внутри <style> и </ style>, после .row: before, .row: after block, добавьте следующее
.col1 {
плыть налево;
ширина: 23%;
маржа: 1%;
}
.col2 {
плыть налево;
ширина: 48%;
маржа: 1%;
}
.col3 {
плыть налево;
ширина: 23%;
маржа: 1%;
} float: слева ставит столбцы рядом друг с другом. Ширина определяет ширину столбцов, а поле устанавливает поля столбцов. Обратите внимание, как рассчитывается ширина:
для первого столбца: 23% (основная ширина) + 1% (поле слева) + 1% (поле справа) = 25 для второго столбца: 48% (ширина поля) + 1% (поле слева) + 1% (поле справа) = 50 для второго столбца: 23% (основная ширина) + 1% (поле слева) + 1% (поле справа) = 25 Общая ширина = 25% + 50% + 25% = 100%, что равно ширине, определенной для строка (т.е. 100%).
Сохраните и запустите файл. Увидеть разницу.
Теперь мы создадим раздел нижнего колонтитула для нашей веб-страницы. Который будет лежать внизу страницы.
Для этого добавьте следующий код после блока .col3 и перед </ style>
.footer {
// создает нижний колонтитул нового класса
ясно: оба;
// гарантирует, что никакой другой контент не перекрывается
положение: абсолютное;
// позиция это именно то, что мы определим
высота: 30 пикселей; // высота нижнего колонтитула составляет 30 пикселей
внизу: 0;
// нижний колонтитул будет помещен в ноль пикселей снизу страницы
цвет фона: # 600;
// устанавливает цвет фона нижнего колонтитула
ширина: 98%;
// устанавливает ширину нижнего колонтитула
цвет: #fff;
// устанавливает цвет текста, написанного в нижнем колонтитуле
размер шрифта: 100%;
// устанавливает размер шрифта
набивка: 1%;
// устанавливает отступ
} Сохраните файл.
Добавить следующее после последнего </ div> и до </ body>
<div class = "footer"> <p> Это нижний колонтитул </ p> </ DIV>
Сохраните и запустите файл. Посмотрите, как это выглядит в браузере. Вот как вы можете создать простую веб-страницу с HTML и CSS.
Попробуйте добавить изображение на col2 вместо абзаца. И посмотри как это выглядит.
Новый контент: Composer: менеджер зависимостей для PHP , R программирования