Автор

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

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

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


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

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


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

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


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

Курсор, или указатель мыши, при просмотре сайтов в интернете обычно имеет вид стрелки, а при наведении на гиперссылки принимает вид руки-указателя. Между тем, в HTML предусмотрено большое разнообразие изображений курсора и их грамотное применение может быть весьма полезно веб-дизайнерам. Простыми средствами с помощью стилей можно переопределить вид курсора и выбрать один из более десяти доступных вариантов.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close