Простой html макет страницыПростой html макет страницы. Здравствуйте, сегодня мы покажем и напишем, вам макет простой html странице, основанную на div блоках, с использование css так сказать покажем вам основу блочной верстки с которой вы начнете творить  свое искусство и делать свои стильные красивые шаблоны, данный макет будет состоять  из стандартных элементах таких как  шапка, сам контент, левый правый сайт бар, и конечно же подвал и так приступим к написанию макета…

Первое что мы сделаем  это создадим разметку на html, и так создаем файл с название index.html

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Заголовок страницы</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="Описание страницы." />
  <meta name="keywords" content="ключевые слова страницы" />
  <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="header">Шапка сайта</div>
  <div id="content">
    <div id="left">Левые блоки</div>
    <div id="right">Правые блоки</div>
    <div id="center">Центральная часть</div>
  </div>
  <div class="clear"></div>
  <div id="footer">Содержимое подвала</div>
</body>
</html>

Готово

Теперь нам надо все это красиво расположить сверстать для этого создадим фал

styles.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#left {
  float: left; // Левые блоки размещаем слева
  width: 200px; // Установка ширины 200 пикселей
}
#right {
  float: right; // Правые блоки размещаем справа
  width: 200px; // Установка ширины 200 пикселей
}
#center {
  margin-left: 200px; // Отступ слева 200 пикселей
  margin-right: 200px; // Отступ справа 200 пикселей
}
.clear {
  clear: both; // Отменяем позиционирование (влияние float)
}

Готово…

В этом уроке был показан Простой html макет страницы, вы можете использовать этот макет как вам угодно а также можете изменять его как вам нужно надеемся данная статья помогла вам…..

 

 

Читайте также: