Верстка макета (блочная верстка)

Верстка макета (табличная верстка)

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

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

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

HTML:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Блочный каркас</title>
	<link rel="stylesheet" href="style_block.css" media="all">
</head>
<body>

<div class="wrapper">
	<div class="header">HEADER</div>
	<div class="left">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sunt necessitatibus tenetur placeat fuga vel totam ratione similique quis corrupti pariatur quos repellat doloribus officia quisquam unde illo aperiam nostrum?</p>
	</div>
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa beatae placeat soluta facilis odit porro eligendi facere nesciunt doloremque quisquam sunt excepturi suscipit earum adipisci perspiciatis? Adipisci illum ullam molestiae cumque error qui accusamus officia nam quis ipsum! Vel animi id vero odit ea similique ipsam quisquam quaerat laboriosam quas iste optio quod culpa ullam enim earum illum ad incidunt exercitationem sequi aliquam nihil qui maiores! Rerum cupiditate id rem adipisci ratione. Commodi modi nemo repellat obcaecati dignissimos fuga est eveniet molestias tempora eaque ipsam repudiandae excepturi id veniam autem reiciendis provident impedit accusamus doloremque alias mollitia laudantium iste harum.</p>
	</div>
	<div class="clear"></div>
	<div class="rasporka"></div>
</div>
<div class="footer">FOOTER</div>
</body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body{height: 100%;}

body{
	background: #00246a;
	color: #fff;
}

.wrapper{
	width: 900px;
	min-height: 100%;
	margin: auto;
	background: url(bg.jpg);
}

.header{
	height: 100px;
	background: purple;
}

.left{
	width: 250px;
	float: left;
}

.content{
	width: 650px;
	color: #000;
	float: left;
}

.footer{
	height: 40px;
	background: green;
	width: 900px;
	margin: -40px auto 0;
}

.clear{clear: both;}
.rasporka{height: 40px;}

p{padding: 10px;}

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

Удачи и до новых встреч!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Илья

    Спасибо!!! Все получилось!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree