фиксированный сайт

 

Для создания фиксированного макета ширина основных блоков на странице, как правило, указывается в пикселях (а иногда и высота тоже).
В приведенном примере вы можете видеть несколько элементов div, каждый из которых использует атрибут id или class для обозначения своей функции цели на странице.


 

Создание фиксированного макета

<!DOCTYPE html>
<html>
<head>
<title>Макет фиксированной ширины</title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body {
width: 960px;
margin: 0 auto;}
#content {
overflow: auto;
height: 100%;}
#nav, #feature, #footer {
background-color: #efefef;
padding: 10px;
margin: 10px;}
.column1, .column2, .column3 {
background-color: #efefef;
width: 300px;
float: left;
margin: 10px;}
li {
display: inline;
padding: 5px;}
</style>
</head>
<body>
<div id="header">
<h1>Логотип</h1>
<div id="nav">
<ul>
<li><a href="«>Домой</a></li>
<li><a href=»">Товары</a></li>
<li><a href="«>Услуги</a></li>
<li><a href=»">О нас</a></li>
<li><a href="«>Контакты</a></li>
</ul>
</div>
</div>
<div id=»content">
<div id="feature">
<p>Характеристика</p>
</div>
<div class="article column1">
<p>Колонка 1</p>
</div>
<div class="article column2">
<p>Колонка 2</p>
</div>
<div class="article column3">
<p>Колонка 3</p>
</div>
</div>
<div id="footer">
<p>&copy; Собственность 2013</p>
</div>
</body>
</html>

 

Гибкий макет

<!DOCTYPE html>
<html>
<head>
<title>Гибкий макет</title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body {
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;}
.column3 {
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
background-color: #efefef;
padding: 0.5em 0;}
#feature, .article {
height: 10em;
margin-bottom: 1em;
background-color: #efefef;}
</style>
</head>
<body>
<div id="header">
<h1>Логотип</h1>
<div id="nav">
<ul>
<li><a href="«>Домой</a></li>
<li><a href=»">Товары</a></li>
<li><a href="«>Услуги</a></li>
<li><a href=»">О нас</a></li>
<li><a href="«>Контакты</a></li>
</ul>
</div>
</div>
<div id=»content">
<div id="feature">
<p>Характеристика</p>
</div>
<div class="article column1">
<p>Колонка 1</p>
</div>
<div class="article column2">
<p>Колонка 2</p>
</div>
<div class="article column3">
<p>Колонка 3</p>
</div>
</div>
<div id="footer">
<p>&copy; Собственность 2013</p>
</div>
</body>
</html>

Понравилась статья? Поделиться с друзьями:
Блог  Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: