-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Все на карте

 -Поиск по дневнику

Поиск сообщений в Net-man

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.04.2010
Записей: 814
Комментариев: 5985
Написано: 11575


CSS: Урок 22. 100% HTML & CSS верстка сайта

Четверг, 30 Декабря 2010 г. 21:29 + в цитатник

или все возможные способы верстки в одном уроке

 

Содержание страницы

  1. Жесткая HTML & CSS верстка блоками
  2. Жесткая HTML & CSS верстка блоками в три колонки
  3. Резиновая HTML & CSS верстка блоками
  4. Резиновая + жесткая HTML & CSS верстка блоками
  5. Жесткая HTML & CSS верстка таблицами
  6. Резиновая HTML & CSS верстка таблицами

Жесткая HTML & CSS верстка блоками


Пример блочной верстки сайта:

<html>
<head>
<title>Жесткая HTML & CSS верстка блоками</title>
<style type="text/css">
div#block {width:600px; margin:0 auto; background-color:#dddddd}
div.header {width:600px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9}
div.right_col {width:450px; float:left}
div.footer {width:600px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2 align="center">CSS верстка сайта</h2>
<h4 align="center">Жесткая верстка блоками</h4>
</div>
<div class="footer"><p>© 2010</p></div>
</div>
</body>
</html>

Результат: жесткая HTML & CSS верстка блоками

Атрибуты и значения

  • background-color: – определяет цвет фона.
  • margin:0 auto – определяет центрирование блока.
  • width: – определяет ширину в пикселях или в процентах.
  • height: – определяет высоту.
  • float:left – определяет обтекание слева.
  • border-right: – определяет свойства правой границы.
  • clear:both – отменяет обтекание с обеих сторон.

Обратите внимание на пунктирную границу левой колонки, которая почему-то не доходит до низа. Подобные ньюансы легко устраняются с помощью атрицательного значения атрибута margin. Например, margin-bottom:-15px обрежет лишнее (смотрите следующий пример).

Жесткая HTML & CSS верстка блоками в три колонки


Пример жесткой блочной верстки сайта в три колонки:

<html>
<head>
<title>Жесткая HTML & CSS верстка блоками в три колонки</title>
<style type="text/css">
div#block {width:750px; margin:0 auto; background-color:#dddddd}
div.header {width:750px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.center_col {width:450px; float:left}
div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}
div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="center_col">
<h2 align="center">CSS верстка сайта</h2>
<h4 align="center">Жесткая верстка блоками</h4>
</div>
<div class="right_col"><p align="center">Ссылки</p></div>
<div class="footer"><p>© 2010</p></div>
</div>
</body>
</html>

Результат: жесткая HTML & CSS верстка блоками в три колонки

Блочная верстка предпочтительнее табличной верстки. Верстка сайта блоками предоставляет больше возможностей для форматирования и дизайна. Верстка блоками требует умения работать с атрибутами margin, padding, float, clear.

Например, атрибут float позволяет расположить несколько, следующих друг за другом, блоков по горизонтали, чтобы разделить web-страницу по вертикали.

Резиновая HTML & CSS верстка блоками


Пример резиновой верстки сайта с помощь блоков:

<html>
<head>
<title>Резиновая HTML & CSS верстка блоками</title>
<style type="text/css">
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left}
div.right_col {background-color:#dddddd; height:400px; min-width:380px; max-width:3800px; margin-left:200px; padding-left:20px}
</style>
</head>
<body>
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2>CSS верстка сайта</h2>
<h4>Резиновая верстка блоками</h4>
</div>
</body>
</html>

Результат: HTML & CSS верстка сайта – резиновая верстка блоками

Мы видим, что правая колонка сползла вниз ⇒ добавим к селектору div.right_col параметр margin-top:-20px.

Результат: резиновая HTML & CSS верстка

Атрибуты и значения

  • padding-left: – определяет внутренний отступ слева.
  • margin-top: – определяет внешний отступ сверху.
  • margin-left: – определяет внешний отступ слева.
  • min-width: – определяет минимальную ширину.
  • max-width: – определяет максимальную ширину.

Левая колонка с параметром float:left фактически накрывает собой правую, так как правая не содержит атрибут обтекания. В свою очередь, параметр margin-left:200px определяет отступ правой колонки, поэтому она не перекрывается. Мы не можем задать обтекание для правой колонки, потому что в таком случае будут недействительны min-width и max-width.

Обратите внимание на значение padding, на ширину пунктирной границы, на размеры.

Резиновая + жесткая HTML & CSS верстка блоками


Пример CSS верстки сайта блоками:

<html>
<head>
<title>Резиновая + жесткая HTML & CSS верстка блоками</title>
<style type="text/css">
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}
div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }
div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}
</style>
</head>
<body>
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2>CSS верстка сайта</h2>
<h4>Резиновая верстка блоками</h4>
</div>
<div class="footer"><p>© 2010</p></div>
</body>
</html>

Результат: резиновая + жесткая HTML & CSS верстка блоками

Поместим левую и правую колонку в контейнер <div id="block"> </div>. Отцентрируем его с помощью margin:0 auto. Уберем пространство внизу блока параметром margin-bottom:-16px.

<html>
<head>
<title>Резиновая + жесткая HTML & CSS верстка блоками</title>
<style type="text/css">
#block {width:740px; height:420px; margin:0 auto; margin-bottom:-16px}
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}
div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }
div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}
</style>
</head>
<body>
<div class="header"><h1 align="center">Верстка сайта</h1></div>
<div id="block">
<div class="left_col"><p align="center">Меню</p></div>
<div class="right_col">
<h2>CSS верстка сайта</h2>
<h4>Резиновая верстка блоками</h4>
</div>
</div>
<div class="footer"><p>© 2010</p></div>
</body>
</html>

Результат: резиновая + жесткая HTML & CSS верстка блоками

Параметр padding:10px прибавляет по 10 пикселей к каждой из сторон, поэтому контейнеру <div id="block"> </div> была задана высота в 420 пикселей, а затем его низ был обрезан на 16 пикселей.

Оказывается не так все и сложно. Идем дальше...

Жесткая HTML & CSS верстка таблицами


Пример жесткой CSS верстки сайта с помощью таблицы:

<head>
<title>Жесткая HTML & CSS верстка таблицами</title>
<style type="text/css">
.header {width:100%; height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {width:500px; background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>

</head>
<body>
<table cellpadding="0" cellspacing="0" width="860" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Содержание</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">© 2010</td>
</tr>
</table>
</body>

Результат: жесткая HTML & CSS верстка таблицами

vertical-align выравнивает содержимое ячейки по верху, применяется только для ячеек.

Резиновая HTML & CSS верстка таблицами


Пример резиновой CSS верстки сайта с помощью таблицы:

<head>
<title>Резиновая HTML & CSS верстка таблицами</title>
<style type="text/css">
.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">&copy; 2010</td>
</tr>
</table>
</body>

Результат: резиновая HTML & CSS верстка таблицами

Сегодня блочная верстка, жесткая или резиновая является наиболее распространенным видом верстки среди профессиональных сайтов.

ab-w.net
Рубрики:  Полезное
Уроки CSS
Метки:  

Процитировано 1 раз

Prettyke   обратиться по имени С наступающим Новым годом! Пятница, 31 Декабря 2010 г. 02:10 (ссылка)
Пусть будет щедрым Новый год,
Пусть он на счастье не скупится,
Пусть зажигает звезды в срок,
Чтоб всем Твоим желаньям сбыться.
 (467x350, 93Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 31 Декабря 2010 г. 11:16ссылка
Пусть в наступающем году
Тебе всегда во всём везёт,
И прогоняя прочь беду,
Пусть Кролик счастья принесёт!
заяц (395x500, 92 Kb)
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку