Навигация
Главная
Поиск
Форум
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
HACK F.A.Q 65535
Гостевая книга ... 65535
Содержание сайт... 65535
Вызов хранимых ... 65535
Эмулятор микроп... 65535
Бип из системно... 59924
Invision Power ... 58205
Организация зап... 58119
Модуль Forms 56853
Приложение «Про... 56045
Создание отчето... 55668
Оператор выбора... 55533
Подключение Mic... 55387
ТЕХНОЛОГИИ ДОСТ... 51781
Программируемая... 48865
Пример работы с... 47629
Имитационное мо... 47406
21 ошибка прогр... 42391
Реклама
Сейчас на сайте
Гостей: 8
На сайте нет зарегистрированных пользователей

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

Калькулятор на Delphi с переводом в другую систему исчисления + Блок схемы
Изменения контуров и сортировка в двумерном массиве чисел на Turbo Pasca...
Моделирование процесса поступления заявок в систему, состоящую из трёх Э...

Реклама

Блочная верстка в 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 12:48:35 · 0 Комментариев · 5858 Прочтений · Для печати

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


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



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

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

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

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

Пароль



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

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

Случайные загрузки
EditButton
C# Учебный курс
DelphiXIsoDemo1
Определние размер...
TDBF
Экспорт базы данн...
DFileDeleter
PBFoldder
MpegPlay
Работа с матрицами
Введение в станда...
Как программирова...
Text3D
Autorunner
Длинный заголовок...
Dynamic Titles дл...
SUIPack
SendSMS для PHP-F...
Защита от спама ...
Visual Basic for ...

Топ загрузок
Приложение Клие... 100289
Delphi 7 Enterp... 76679
Converter AMR<-... 20017
Borland C++Buil... 10589
GPSS World Stud... 9047
Borland Delphi ... 7572
Turbo Pascal fo... 6874
Visual Studio 2... 4889
Калькулятор [Ис... 3914
FreeSMS v1.3.1 3482
Случайные статьи
Создание отчетов (...
Многоадресатные 6-...
Обобщенное програм...
Следует определить...
Продолжительность ...
Структура сообщени...
Аргументы шаблонов...
START (НАЧАТЬ)
Invalid variable r...
7 основных стратег...
События Dynamic HTML
Малая вирусная энц...
Сбрасывание объект...
Модульность - МПролог
Распространение по...
Можно рассматриват...
Пользовательский и...
Навигация по данны...
Информеры, зачем о...
Архивирование оказ...
Прочие SQL-функци...
МОДЕЛЬ С АКТИВНОЙ ...
Каждый новый узел ...
Возможность доступа
Функции Windows
Статистика



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


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