Навигация
Главная
Поиск
Форум
FAQ's
Ссылки
Карта сайта
Чат программистов

Статьи
-Delphi
-C/C++
-Turbo Pascal
-Assembler
-Java/JS
-PHP
-Perl
-DHTML
-Prolog
-GPSS
-Сайтостроительство
-CMS: PHP Fusion
-Инвестирование

Файлы
-Для программистов
-Компонеты для Delphi
-Исходники на Delphi
-Исходники на C/C++
-Книги по Delphi
-Книги по С/С++
-Книги по JAVA/JS
-Книги по Basic/VB/.NET
-Книги по PHP/MySQL
-Книги по Assembler
-PHP Fusion MOD'ы
-by Kest
Professional Download System
Реклама
Услуги

Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
Заказать продвижение сайта
Программа для рисования блок-схем
Инженерный калькулятор онлайн
Таблица сложения онлайн
Популярные статьи
OpenGL и Delphi... 65535
Форум на вашем ... 65535
21 ошибка прогр... 65535
HACK F.A.Q 65535
Бип из системно... 65535
Гостевая книга ... 65535
Invision Power ... 65535
Пример работы с... 65535
Содержание сайт... 65535
ТЕХНОЛОГИИ ДОСТ... 65535
Организация зап... 65535
Вызов хранимых ... 65535
Создание отчето... 65535
Имитационное мо... 65535
Программируемая... 65535
Эмулятор микроп... 65535
Подключение Mic... 65535
Создание потоко... 65535
Приложение «Про... 65535
Оператор выбора... 65535
Реклама
Сейчас на сайте
Гостей: 7
На сайте нет зарегистрированных пользователей

Пользователей: 13,361
новичок: uehuat
Новости
Реклама
Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Диплом - база данных поставщиков на Delphi (MS Sql Server)+ Пояснительна...
Компьютерный магазин на Turbo Pascal (База данных) + Пояснительная записка
Моделирование вычислительного центра на GPSS + Отчет + Блок схема

Блочная верстка в css
Для начала, создадим базовую структуру 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 October 27 2008 09:48:35 · 0 Комментариев · 7399 Прочтений · Для печати

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •


Комментарии
Нет комментариев.
Добавить комментарий
Имя:



smiley smiley smiley smiley smiley smiley smiley smiley smiley
Запретить смайлики в комментариях

Введите проверочный код:* =
Рейтинги
Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.
Гость
Имя

Пароль



Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Поделиться ссылкой
Фолловь меня в Твиттере! • Смотрите канал о путешествияхКак приготовить мидии в тайланде?
Загрузки
Новые загрузки
iChat v.7.0 Final...
iComm v.6.1 - выв...
Visual Studio 200...
CodeGear RAD Stud...
Шаблон для новост...

Случайные загрузки
Berg
Базы данных в Инт...
iComm v.6.1 - выв...
Функции Visual Basic
Простой пример ка...
BDEPack
Фундаментальные а...
PHP/MySQL для нач...
PBEditPack
Пример работы с ф...
PDPcheck
Разработка распре...
Технология .Net в VB
База данных фильм...
Прграммирование в...
Советы по Delphi
Распознавание иде...
KOL & MCK v1.69
39 статьи по Delphi
Pirc

Топ загрузок
Приложение Клие... 100774
Delphi 7 Enterp... 97826
Converter AMR<-... 20268
GPSS World Stud... 17014
Borland C++Buil... 14191
Borland Delphi ... 10287
Turbo Pascal fo... 7372
Калькулятор [Ис... 5981
Visual Studio 2... 5207
Microsoft SQL S... 3661
Случайные статьи
Создание программн...
Платежное поручение
Последним размещен...
Выполнение процеду...
Кодирование
Настройка 6-адреса...
Использование DENS...
Текстуру можно исп...
Создание установоч...
Игровые автоматы с...
Корневой маршрутиз...
Зонтпакер
40-часовая рабочая...
Оформление гиперсс...
Доставка суши
Studio, то объект ...
Глава 5 Стоимос...
Реализация простог...
Краткие рекомендац...
Политика безопасно...
Учительский практи...
СВОЙСТВО ИЛИ ПОЛЕ?
Как сконфигурирова...
10.7. Дополнительн...
Методы save() и lo...
Статистика



Друзья сайта
Программы, игры


Полезно
В какую объединенную сеть входит классовая сеть? Суммирование маршрутов Занимают ли таблицы память маршрутизатора?