Ответить на тему  [ Сообщений: 12 ] 
На страницу Пред.  1, 2
Классический пример табличной структуры (из урока 9) 
Автор Сообщение
Новичок

Зарегистрирован: 21 июл 2016, 10:27
Сообщений: 24
Пол: мужской
Репутация: 70
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Классический пример табличной структуры (из урока 9)
Спасибо!


29 окт 2016, 11:41
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 21 июл 2016, 10:27
Сообщений: 24
Пол: мужской
Репутация: 70
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Классический пример табличной структуры (из урока 9)
Вот что получилось-

HTML -

<!DOCTYPE html>
<!--Объявляем версию HTML-->


<html>
<!--Открываем документ-->


<head>
<!--Открываем голову документа-->


<title> Второй шаблон сайта!!! </title>
<!--Пишем заголовок документа-->


<link rel="stylesheet" type="text/css" href="style-005.css">
<!--Пишем ссылку на CSS-->


</head>
<!--Закрываем голову документа-->


<body>
<!--Открываем тело документа-->


<header> Шапка сайта (логотип и всё такое) </header>
<!--Открываем шапку сайта. Пишем текст. Закрываем шапку сайта.-->


<aside class="left">Ссылка1<br>Ссылка2<br>Ссылка3<br>Ссылка4<br>Ссылка5</aside>
<!--Открываем левый блок. Присваиваем значение классу. Пишем текст и переходы на следующую строку. Закрываем левый блок.-->


<aside class="right"> Реклама и всё<br>такое </aside>
<!--Открываем правый блок. Присваиваем значение классу. Пишем текст и переход на следующую строку. Закрываем правый блок.-->


<main>Основное содержание</main>
<!--Открываем блок контента. Присваиваем значение классу. Пишем текст. Закрываем блок контента.-->


<div class="clear"></div>
<!--Открываем чистый блок. Присваиваем значение классу. (Запрет плавающих элементов). Закрываем чистый блок.-->


<footer>Блок копирайта</footer>
<!--Открываем подвал сайта. Пишем текст. Закрываем подвал сайта.-->


</body>
<!--Закрываем тело документа-->


</html>
<!--Закрываем документ-->



CSS-
header {
height: 50px;
background-color:white;
font-size:20px;
border-top-width:2px;
border-right-width:2px;
border-left-width:2px;
border-bottom-width:0px;
border-style:solid;
border-color:black;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
/* Пишем параметры для шапки сайта.
(Высота. Цвет фона. Размер текста.
Толщина рамки сверху. Толщина рамки справа.
Толщина рамки слева. Толщина рамки снизу.
Стиль рамки. Цвет рамки. Положение текста по горизонтали.
Положение текста по вертикали задаем 3 свойствами.) */


.left {
height: 120px;
width: 200px;
float: left;
background-color:white;
font-size:20px;
border-top-width:2px;
border-right-width:2px;
border-left-width:2px;
border-bottom-width:2px;
border-style:solid;
border-color:black;
text-align:left;
display: flex;
justify-content: left;
align-items: center;
}
/* Пишем параметры для левого блока сайта.
(Высота. Ширина. По какой стороне будет выравниваться элемент. Цвет фона.
Размер текста.
Толщина рамки сверху. Толщина рамки справа.
Толщина рамки слева. Толщина рамки снизу.
Стиль рамки. Цвет рамки. Положение текста по горизонтали.
Положение текста по вертикали задаем 3 свойствами.) */


main {
height: 120px;
margin: 0 200px;
background-color:white;
font-size:20px;
border-top-width:2px;
border-right-width:0px;
border-left-width:0px;
border-bottom-width:2px;
border-style:solid;
border-color:black;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
/* Пишем параметры для контента сайта.
(Высота. Устанавливаем величину отступа от каждого края элемента. Цвет фона.
Размер текста.
Толщина рамки сверху. Толщина рамки справа.
Толщина рамки слева. Толщина рамки снизу.
Стиль рамки. Цвет рамки. Положение текста по горизонтали.
Положение текста по вертикали задаем 3 свойствами.) */


.right {
height: 120px;
width: 200px;
float: right;
background-color:white;
font-size:20px;
border-top-width:2px;
border-right-width:2px;
border-left-width:2px;
border-bottom-width:2px;
border-style:solid;
border-color:black;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
/* Пишем параметры для правого блока сайта.
(Высота. Ширина. По какой стороне будет выравниваться элемент. Цвет фона.
Размер текста.
Толщина рамки сверху. Толщина рамки справа.
Толщина рамки слева. Толщина рамки снизу.
Стиль рамки. Цвет рамки. Положение текста по горизонтали.
Положение текста по вертикали задаем 3 свойствами.) */


.clear {
width: 100%;
clear: both;
font-size:20px;
border-top-width:0px;
border-right-width:0px;
border-left-width:0px;
border-bottom-width:0px;
border-style:solid;
border-color:black;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
/* Пишем параметры для пустого блока сайта.
(Ширина. Устанавливаем, с какой стороны элемента запрещено его обтекание другими элементами.
Размер текста.
Толщина рамки сверху. Толщина рамки справа.
Толщина рамки слева. Толщина рамки снизу.
Стиль рамки. Цвет рамки. Положение текста по горизонтали.
Положение текста по вертикали задаем 3 свойствами.) */


footer {
height: 25px;
background-color:white;
font-size:20px;
border-top-width:0px;
border-right-width:2px;
border-left-width:2px;
border-bottom-width:2px;
border-style:solid;
border-color:black;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
/* Пишем параметры для подвала сайта.
(Высота. Цвет фона. Размер текста.
Толщина рамки сверху. Толщина рамки справа.
Толщина рамки слева. Толщина рамки снизу.
Стиль рамки. Цвет рамки. Положение текста по горизонтали.
Положение текста по вертикали задаем 3 свойствами.) */


29 окт 2016, 13:19
Профиль Отправить личное сообщение
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 12 ]  На страницу Пред.  1, 2
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме Урок 12. Не могу открыть форму урока через браузер!

[ На страницу: 1, 2 ]

в форуме HTML

Vitalik8512

18

2788

26 май 2014, 15:54

Vitalik8512 Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Не правильно работает проверка на добавление нового урока :(

в форуме PHP , БАЗЫ ДАННЫХ, ЛОКАЛЬНЫЙ СЕРВЕР

GrimKtop

1

896

10 ноя 2011, 10:23

Allard Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Бекап сайта для 3-его урока по темизации из курса о друпал

в форуме Drupal 6

Kooper55555

0

3564

01 июн 2014, 18:27

Kooper55555 Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме подскажите по поводу урока о создании социальной сети

в форуме НЕ НАШЛИ ПОДХОДЯЩЕЙ ВЕТКИ ФОРУМА ДЛЯ СВОЕГО ВОПРОСА

kuzik

1

743

21 дек 2011, 17:48

TOSHIBA Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Проблема при скачивании видео урока по установке joomla

в форуме УСТАНОВКА И ОБНОВЛЕНИЕ JOOMLA

АлексейРостов

2

1162

07 окт 2012, 13:15

АлексейРостов Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти: