Автор

Бесплатная div верстка сайта

Бесплатная div верстка сайта


 

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

 

Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.

   3 колонки и футер

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#left {float:left;width:200px;}
#right {float:right;width:200px;}
#center {margin:0 200px 0 200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   3 колонки (вид блога) и футер

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#left {margin-right:400px;}
#right {float:right;width:200px;}
#center {float:right;width:200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   3 колонки, хэдэр и футер

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#left {float:left;width:200px;}
#right {float:right;width:200px;}
#center {margin:0 200px 0 200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   3 колонки (вид блога), хэдэр и футер

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#left {margin-right:400px;}
#right {float:right;width:200px;}
#center {float:right;width:200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   3 колонки и хэдэр

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#left {float:left;width:200px;}
#right {float:right;width:200px;}
#center {margin:0 200px 0 200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>

   3 колонки (вид блога) и хэдэр

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#left {margin-right:400px;}
#right {float:right;width:200px;}
#center {float:right;width:200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>

   3 колонки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#left {float:left;width:200px;}
#right {float:right;width:200px;}
#center {margin:0 200px 0 200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>

  3 колонки (вид блога)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#left {margin-right:400px;}
#right {float:right;width:200px;}
#center {float:right;width:200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='center'>
		<!-- Содержимое центральной колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>

   2 колонки (с правым меню) и футер

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#right {float:right;width:200px;}
#left {margin-right:200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   2 колонки (с левым меню) и футер

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#left {float:left;width:200px;}
#right {margin-left:200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   2 колонки (с правым меню), футер и хэдэр

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#right {float:right;width:200px;}
#left {margin-right:200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   2 колонки (с левым меню), футер и хэдэр

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#left {float:left;width:200px;}
#right {margin-left:200px;}
#spacer {height:100px;}
#footer {height:100px;margin-top:-100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
	</div>
	<div class='clear'></div>
	<div id='spacer'></div>
</div>
<div id='footer'>
<!-- Содержимое футера -->
</div>
</body>
</html>

   2 колонки (с правым меню) и хэдэр

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#right {float:right;width:200px;}
#left {margin-right:200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>

   2 колонки (с левым меню) и хэдэр

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#header {height:200px;}
#left {float:left;width:200px;}
#right {margin-left:200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='header'>
	<!-- Содержимое хэдэра -->
	</div>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>

   2 колонки (с правым меню)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#right {float:right;width:200px;}
#left {margin-right:200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>

   2 колонки (с левым меню)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка от AD</title>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:800px;}
#left {float:left;width:200px;}
#right {margin-left:200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
	<div id='container'>
		<div id='left'>
		<!-- Содержимое левой колонки -->
		</div>
		<div id='right'>
		<!-- Содержимое правой колонки -->
		</div>
	</div>
	<div class='clear'></div>
</div>
</body>
</html>
Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеdiv верстка сайта

Бесплатная div верстка сайта

Продолжил рассматривать интересные идеи для сайта которые помогут скрасить дизайн Вашего сайта, в данном уроке мы рассмотрим замечательный прием для экономии места для сайта, сделаем это с помощью простого аккордеона с помощью CSS3. Данное решение предоставляет большой функционал, так как этот аккордеон можно использовать с различным контентом, или применив в качестве спойлера для сайта с различными элементами. Давайте посмотрим как это все выглядит в примерах..


Бесплатная div верстка сайта

Окончено создание сайта. Процесс от начала до окончания проекта был очень долгим:) Заказ на создание сайта был сделан 2 года назад, но только со сменой руководства в прошлом месяце всё сдвинулось с места!!!


Бесплатная div верстка сайта

Начиная создавать сайт, например для мультимедийного контента, вам необходимо его правильно подать и организовать. Вариантов очень много, это может быть и организация в подпункты, которые будут по умолчанию скрыты, или удобные аккордеоны, кстати, на нашем сайте по их разработке уделено достаточно много интересных уроков. Но зачастую все хотят использовать слайдер, это весьма практично, при этом красивая анимация привлекает взор любого посетителя. В данном уроке мы рассмотрим как создать замечательный слайдер с подпунктами.


Бесплатная div верстка сайта

Библиотека анимационных эффектов перехода, основанная на анимации CSS.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close