Шаблон страницы HTML (с прижатым футером)


Часто приходится с нуля программировать HTML шаблон (каркас) для стандартной страницы с прижатым к низу футером. Конечно, шаблон должен быть кроссбраузерный, для IE6 и выше и остальных браузеров. Используется CSS3.

У шаблона фиксированная ширина 1000 пикселей и минимум CSS.

Для удобства, решил включить в него JQUERY 1.8.2 из хранилища google.ru а так-же файл js/all.js с каркасом для программирования на JQuery.

Забегая вперёд, дам ссылку на скачивание шаблона/каркаса с прижатым футером.

Файл index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Page title</title>
	<meta charset="utf-8">
	<link href="css/styles.css" rel="stylesheet" media="screen">
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="js/all.js"></script>
</head>
<body>
	<div class="wrapper">
		<header>
			<p>This is header</p>
		</header>
		<div class="content">
			<p><strong>Content:</strong> WWW.LAVRIK-V.RU</p>
		</div>
	</div>
	<footer>
		<p>This is footer</p>
	</footer>
</body>
</html>

Файл CSS:

@charset "utf-8";

* {
	margin:0;
	padding:0;
}

html {
	height: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

body {
	width: 100%;
	height: 100%;
}

.wrapper {
	width: 1000px; /* @layout-width */
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: #DDD;
}

header {
	height: 150px;
	background: #FFE680;
}

.content {
	padding-bottom: 100px; /* = @footer-height */
}

footer {
	width: 1000px; /* = @layout-width */
	margin: -100px /* = @footer-height */ auto 0; 
	height: 100px; /* @footer-height */
	background: #BFF08E;
	position: relative;
}

Файл all.js:

$(document).ready(function() {
	alert(777);
});

СКАЧАТЬ Каркас/Шаблон сайта с прижатым футером.

 


Тэги:

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

Прокомментировать »

 
 
DkMebelKig
16.10.2017
 

Производство мебели

 

Прокомментировать

 
 
Сообщение *
 
Проверочный код *
 
 
 
Яндекс.Метрика