Автор

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 верстка сайта

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

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


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

Неприятно, когда ты тратишь несколько часов на то, чтобы написать какую статью, размещаешь ее на своем сайте, а потом она оказывается еще на нескольких ресурсах без указания ссылки на первоисточник. Эти методы не дают стопроцентной гарантии, однако снизить количество подобных случаем помогают. Существуют и другие эффективные средства – защита от копирования текста средствами JavaScript. Использование скриптов помогает затруднить работу копипастерам, заставив их тратить больше времени на копирование контента.


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

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close