Для начала, создадим базовую структуру HTML-страницы:
Код
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
После этого наполним секции некоторым содержимым для наглядности:
Код
<div id="wrap">
<div id="header"><h1>Заголовок страницы</h1></div>
<div id="nav">
<ul>
<li><a href="#">Раздел 1</a></li>
<li><a href="#">Раздел 2</a></li>
</ul>
</div>
<div id="main">
<h2>Колонка 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h3>Колонка 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</div>
<div id="footer">
<p>Подвал</p>
</div>
</div>
У нас получился XHTML-документ без стилей, со структурой, которая позволяет
использовать CSS для любых изменений в его отображении.
Этот приём некоторые называют “ластик” - сброс параметров отступов на странице.
Ну и заодно зададим основной цвет фона и текста.
Код
body, html {margin:0;padding:0;
background:#a7a09a;
color:#000;}
Теперь нужно расположить всё содержимое страницы в центре и задать ему ширину.
Для этого у нас есть контейнер #wrap. Тут же зададим ему цвет фона.
Метод, который мы используем, основан на том, что если левый и правый отступы
элемента определены как auto, то он всегда будет находиться в центре окна
браузера.
А чтобы предотвратить проблемы в некоторых браузерах, связанные с тем, что окно
может быть меньше контейнера #wrap, установим минимальную ширину и его и всей
страницы.
Код
body,html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body {
min-width:750px;
}
#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
А для наглядности раскрасим фоны всех контейнеров в разные цвета.
Код
#header {background:#ddd;}
#nav {background:#c99;}
#main {background:#9c9;}
#sidebar {background:#c9c;}
#footer {background:#cc9;}
Чтобы две колонки (#main и #sidebar) отображались рядом, определим для них
фиксированную ширину.
Код
#main {
background:#9c9;
float:left;
width:500px;}
#sidebar {
background:#99c;
float:right;
width:250px;
}
Чтобы опустить секцию подвала в низ страницы, используем свойство clear,
определяющее невозможность нахождения элементов на одной строке с текущим.
Код
#footer {
background:#cc9;
clear:both;
}
Контейнер #nav содержит список ссылок. Расположим его более правильно.
Код
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
Почти готово. Небольшой тюнинг отступов элементов для лучшего отображения.
Код
#header h1 {
padding:5px;
margin:0;
}
#nav {
background:#c99;
padding:5px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
background:#99c;
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer p {
padding:5px;
margin:0;
}
Ну вот и готово. Полученный код можно использовать как основу для серьёзного
дизайна, который можно будет изменить простой правкой CSS-файла.
Опубликовал Kest
Октябрь 27 2008 12:48:35 ·
0 Комментариев ·
7117 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
