Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

HTML и XHTML, CSS → Блочная верстка. Второй урок

Блочная верстка. Второй урокПродолжаем познавать блочную верстку. Сегодня создадим фиксированый двух-колоночный макет.
Наш макет состоит из следующих блоков Шапка. меню, Контент (блок для вывода информации) с сайдбаром справа и низ.

Ниже код макета в 2е колонки

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Layout 007 - Fixed Width CSS Layouts</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <!-- Начало основного блока, благодаря ему страница располагается в центре экрана-->
    <div id="wrapper">
        <!-- Начало шапки сайта -->
        <div id="header"> Header </div>
        <!-- Конец шапки сайта -->
        <!-- Начало блока навигационная панель -->
        <div id="navigation"> Navigation </div>
        <!-- Конец блока навигационная панель -->
        <!-- Начало левой колонки -->
        <div id="content"> Content </div>
        <!-- Конец левой колонки -->
        <!-- Начало правой колонки-->
        <div id="rightcolumn"> Right Column </div>
        <!-- Конец правой колонки -->
        <!-- Начало футера -->
        <div id="footer"> Footer </div>
        <!-- Конец футера -->
    </div>
    <!-- Конец основного блока -->
</body>
</html>

Редактируем css код тем самым придаем нашему сайту желаемый вид. Для того чтобы изменить цветовую гамму блоков достаточно изменить свойства background.

body{
    padding:0; /*обнуляем внутренние отступы*/
    margin:0; /*обнуляем внешние отступы*/
    font:bold 13px Verdana, Arial, Helvetica, sans-serif; /*свойства шрифта*/
    color:#666; /*цвет текста*/
    text-align:center; /*текст по центру блока*/
}
#wrapper {
    margin:0 auto; /*центрирование страницы*/
    width:920px; /*ширина страницы, обязательный параметр, без него margin:0 auto; не работает*/
}
#header {
    width:898px; /*ширина хедера, учитываем padding и border, т.е. отнимаем от 920px*/
    padding:10px; /*внутренние отступы*/
    border:1px solid #a4ce60; /*граница блока*/
    height:100px; /*высота блока*/
    margin:10px 0 5px 0; /*внешний отступ*/
    background:#bdda7e; /*фон блока*/
    line-height:100px; /*расстояние между строк*/
}
/*задаем аналогичные параметры*/
#navigation{
    width:898px;
    border:1px solid #bed63a;
    background:#e1edbf;
    margin:0 0 5px 0;
    padding:10px;
}
/*в данном случае добавляем float:left для того, чтобы
колонка примыкала к левой стороне*/
#content {     
    border:1px solid #d9d9d9;
    background:#e6e6e6;
    margin:0 5px 5px 0;
    padding:10px;
    height:350px;
    width:676px;
    float:left;
    line-height:350px;
}
/*в данном случае добавляем float:right для того, чтобы
колонка примыкала к правой стороне*/
#rightcolumn {
    float:right;
    border:1px solid #bed63a;
    background:#e1edbf;
    margin:0 0 5px 0;
    padding:10px;
    height:350px;
    width:195px;
    display:inline;
    line-height:350px;
}
/*в данном случае добавляем clear:both; - запрещаем
обтекание с двух сторон*/
#footer {
    width:898px;
    clear:both;
    border:1px solid #bed63a;
    background:#e1edbf;
    margin:0 0 10px 0;
    padding:10px;
}


Удачи! До встречи в 3 уроке.
Опубликовал dimas_ua, 11-08-2010, 00:00 Комментариев: 1
 (голосов: 8)
Пишет AnderT7, 4 июня 2011 01:33
  • Сообщений: 0
  • Новостей: 0
Да можно и так. Только я не въехал, для чего 2 раза писать одно и тоже в css. CSS сделана в принципе чтобы это избегать. Только не надо говорить что нельзя сделать чуточку меньше. Можно определить CSS.

Такое мое мнение ни специалиста.



А так зергуд:-)