+7(916) 554-97-57
7 дней в неделю с 9:00 до 20:00
СОЗДАНИЕ LANDING PAGE

САЙТ КОТОРЫЙ ПРОДАЕТ

РАССКАЖИТЕ О ВАШЕМ ПРОЕКТЕ
Запись

Создать и разработать простой сайт своими руками с нуля компания Line-Site.ru

Документ.HTML

Создаем файл с расширением .HTML у нас он называется site-primer.html

<!DOCTYPE HTML> // <!-- Обязательный элемент -->

<html> // <!-- Обязательный элемент -->

<head> // <!-- Обязательный элемент -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> // <!-- Обязательный элемент -->
<title>Создаем простой сайт - своими руками</title> // <!-- Заголовок -->
<meta name="description" content="С нами Вы сможете сделать простой сайт -своими руками."> // <!-- Описание -->
<meta name="keywords" content="Создаем сайт, Сайт."> // <!-- Ключевые слова -->

<link href="../CSS/GL-P.css" rel="stylesheet" type="text/css"> // <!-- Привязываем CSS файл -->

</head> // <!-- Обязательный элемент -->

<body> // <!-- Обязательный элемент -->

<div id="GL"> // <!-- Главный DIV -->

<div id="Shapka"> // <!-- DIV шапки -->
<p>Шапка</p>
</div> // <!-- DIV шапки -->

<div id="Menu-1"> // <!-- DIV меню 1 -->
<p>Меню 1</p>
<p>/</p>
<p>/</p>
<p>/</p>
<p>/</p>
</div> // <!-- DIV меню 1 -->

<div id="Center"> // <!-- DIV центра-->
<h1>Заголовок</h1>
<p>Новая строка</p>
<p>перевод
<br>строки</p>
<p><a href="http://www.line-site.ru/">Ссылка</a></p>
<p><img src="../image/Fon/LB.png" width="80" height="80"></p>
</div> // <!-- DIV центра -->

<div id="Menu-3"> // <!-- DIV меню 3 -->
<p>Блок информации</p>
<p>/</p>
<p>/</p>
<p>/</p>
<p>/</p>
</div> // <!-- DIV меню 3 -->
<div id="Podval"> // <!-- DIV подвала -->
<p>Подвал</p>
</div> // <!-- DIV подвала -->
</div> // <!-- Главный DIV -->

</body> // <!-- Обязательный элемент -->

</html> // <!-- Обязательный элемент -->

<div id="GL"> - id="GL" привязываем к элементу CSS стиль.

Документ.CSS

Создаем файл с расширением .CSS у нас он называется GL-P.css

#GL {
margin-left: auto; // <!-- Центруем главный DIV -->
margin-right: auto; // <!-- Центруем главный DIV -->
height: 100%; // <!-- Размер DIV по вертикали -->
width: 980px; // <!-- Размер DIV по горизонтали -->
border: thin solid #CCC; // <!-- задаем цвет рамки Серый -->
padding: 5px; // <!-- Отступы - внутри -->
}

#Shapka {
height: 60px; // <!-- Размер DIV по вертикали -->
width: 980px; // <!-- Размер DIV по горизонтали -->
background-color: #999; // <!-- Цвет фона DIV -->
}

#Menu-1 {
height: 200px; // <!-- Размер DIV по вертикали -->
width: 180px; // <!-- Размер DIV по горизонтали -->
float: left; // <!-- Прижимаем DIV к DIVу слева -->
background-color: #999; // <!-- Цвет фона DIV -->
margin-top: 10px; // <!-- Отступ - Сверху -->
}

#Center {
float: left; // <!-- Прижимаем DIV к DIVу слева -->
width: 560px; // <!-- Размер DIV по горизонтали -->
margin-top: 10px; // <!-- Отступ - сверху -->
margin-right: 10px; // <!-- Отступ - справа -->
margin-left: 10px; // <!-- Отступ - слева-->
}

#Menu-3 {
height: 200px; // <!-- Размер DIV по вертикали -->
width: 220px; // <!-- Размер DIV по горизонтали -->
float: left; // <!-- Прижимаем DIV к DIVу слева -->
background-color: #999; // <!-- Цвет фона DIV -->
margin-top: 10px; // <!-- Отступ - сверху -->
}

#Podval {
clear: both; // <!-- Прижимаем DIV к низу -->
height: 60px; // <!-- Размер DIV по вертикали -->
width: 980px; // <!-- Размер DIV по горизонтали -->
background-color: #999; // <!-- Цвет фона DIV -->
}

#GL, #Shapka, #Menu-1, #Center, #Menu-3, #Podval - случайные названия, # - обязательно.

Скачать сайт "пример" | Посмотреть сайт

Внимание !!! Данная статья предназначена для тех, кто знаком хотя бы немного с HTML и CSS.


Копирование материала разрешается только с индексируемой ссылкой на наш сайт.

Статья от 10.11.2015
КОНТАКТЫ
+7(916) 554-97-57
7 дней в неделю с 9:00 до 20:00
support@line-site.ru
Круглосуточно и обрабатываются в течении суток
ГлавнаяСтатьи и новостиЗаказатьЛичный кабинет
Web-студия LineSite создает Landing Page сайты, используя новые технологии и тенденции
в области разработки сайтов
© 2014 - 2018 line-site.ru
ЗНАКОМСТВО
Заявки обрабатываются в течении суток
ЗАКАЗАТЬ ЗВОНОК
Заявки обрабатываются в течении суток
ВОПРОС СПЕЦИАЛИСТУ
Заявки обрабатываются в течении суток
ПОДАРОК
Для того, что бы получить подарок необходимо заказать у нас сайт. Подарок определяется путем попадания Вашего промо кода в выигрышные числа. Промо код действителен только один раз и на один проект.
Заявки обрабатываются в течении суток
ЗАКАЗАТЬ LANDING PAGE
Заявки обрабатываются в течении суток
ВОЙТИ В КАБИНЕТ
Заявки обрабатываются в течении суток