Автор

17 03.2013
Бесплатная 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>

vk.com/club.ssdru

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


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

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

Простая, отзывчивая карусель с анимированными дорожками SVG, используемыми в качестве эффектов перехода.


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

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


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

Мы столкнулись с интересной задачей, а именно реализацией эффекта "до-после" для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close