Открыть меню    

Как сверстать макет при помощи CSS (таблицы стилей)


Часть I - HTML

Стили CSS

Теперь, когда появилась законченная HTML структура, начнем работу над ее дизайном в CSS. CSS-файл начинается с быстрого сброса (reset), далее идет описание глобального шрифта и фона для элемента body. Так как все ссылки нашего дизайна будут иметь одинаковый цвет, то для них можно создать глобальное правило без указания специфики положения ссылки. Контейнеру div #container, в который заключены все элемента страницы, присвоена ширина 960px, а его центрирование осуществляется с помощью margin:0 auto.

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol,
li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
  margin: 0; padding: 0; border: 0;
}
 
body {
  font: 14px/24px Helvetica, Sans-Serif; color: #7e7e7e;
  background: #f5f5f5 url(images/bg.png);
}
 
a {
  color: #9f3a3a; text-decoration: none;
}
  a:hover {
    color: #792323;
  }
 
#container {
  width: 960px; margin: 0 auto;
}
форматируем макет при помощи css стилей

CSS

#header {
  overflow: hidden;
}
  #header #logo {
    margin: 20px 0 10px 15px; float: left;
  }
 
  #header #subscribe {
    list-style: none; float: right; margin: 35px 30px 0 0;
    font-size: 16px;
  }
    #header #subscribe li.rss {
      background: url(images/rss-icon.png) left no-repeat;
      padding: 5px 0 5px 40px; margin: 0 0 10px 0;
    }
    #header #subscribe li.twitter {
      background: url(images/twitter-icon.png) left no-repeat;
      padding: 5px 0 5px 40px;
    }

Наш header будет содержать два плавающих элемента, поэтому ему необходимо добавить описание overflow: hidden, благодаря чему родительский элемент увеличится и вместит все float-элементы. Положение логотипа и кнопок подписки отрегулировано при помощи полей (margin), после этого с помощью классов каждому элементу <li> можно добавить соответствующую иконку.

CSS

#main {
  background: url(images/faux.png);
  border: 1px solid #e6e6e6;
  overflow: hidden;
  box-shadow: 0px 0px 5px #d8d8d8;
  -moz-box-shadow: 0px 0px 5px #d8d8d8;
  -webkit-box-shadow: 0px 0px 5px #d8d8d8;
 
  border-bottom: 15px solid #fff;
}
форматируем макет при помощи css стилей

В нашем проекте sidebar (правая колонка) имеет серый цвет. Первоначально задумывалось просто добавить этот фоновый цвет к блоку #side, однако по проекту наша колонка простирается до самого низа страницы. В СSS это можно реализовать с помощью метода лживых колонок, где для создания ощущения двух фоновых цветов используется простое изображение. В наши дни эффект тени можно легко воссоздать с помощью свойства CSS3 box-shadow без использования графических файлов. Единственным проблемным моментом нашего проекта является то, что мы имеем 15px границу, а лживые колонки занимают всю область div. Дублировать эту границу можно с помощью применения свойства border как, к блоку #main, так и к блоку #side.

CSS

#main #content {
  width: 590px; float: left; padding: 35px 30px 60px 30px;
}
  #main #content h2 {
    font-size: 24px; font-weight: normal; text-transform: uppercase;
    margin: 0 0 15px 0;
  }
 
  #main p {
    margin: 0 0 24px 0;
  }
 
  #main #content .post-thumbnail {
    float: left; margin: 4px 30px 10px 0;
  }
    #main #content .post-thumbnail img {
      padding: 1px; border: 1px solid #eaeaea;
    }
форматируем макет при помощи css стилей

Первой из двух наших колонок даем большую ширину и перемещаем (float:left) влево. Чтобы «оттолкнуть» контент от краев и сделать страницу похожей на созданную нами в Photoshop'е, воспользуемся отступами (padding). Добиться схожести шрифтов сайта и концепта нам поможет CSS типография. Для того чтобы возвратить тексту (в частности заголовку h2) прописной вид, даже если в HTML он строчный, воспользуемся свойством text-transform. Образ пиктограммы поста перемещаем влево (float:left), таким образом, текст будет обтекать мини-изображение. Придать пиктограмме эффект двойной границы можно с помощью совмещения 1px отступа и 1px границы.

CSS

#main #content .post-info {
  padding: 1px; border: 1px solid #e9e9e9; margin: 0 0 60px 0;
}
  #main #content .post-info ul {
    background: #e9e9e9; list-style: none; text-transform: uppercase;
    padding: 15px 20px 10px 20px; overflow: hidden;
  }
    #main #content .post-info ul li.date {
      float: left;
    }
    #main #content .post-info ul li.category {
      float: left; margin: 0 0 0 20px;
      background: url(images/star.png) left no-repeat; padding: 0 0 0 35px;
    }
    #main #content .post-info ul li.read-more {
      float: right;
    }
форматируем макет при помощи css стилей

Об эффекте двойной границы говорилось в структуре HTML. Уникальные классы трех элементов списка позволят придать им нужный вид и поместить их в нужные нам места.

CSS

#main #content .pagination {
  overflow: hidden; margin: 0 0 60px 0;
}
  #main #content .pagination p {
    width: 180px; border: 1px solid #e9e9e9; padding: 1px;
    text-align: center;
  }
    #main #content .pagination p.prev { float: left; }
    #main #content .pagination p.next { float: right; }
    #main #content .pagination p a {
      display: block; background: #e9e9e9; padding: 15px 0px 10px 0px;
      text-transform: uppercase;
    }
форматируем макет при помощи css стилей

Похожие СSS стили можно использовать в работе с кнопками нумерции страниц. Они используют тот же эффект двойной границы, в данном случае для тегов <p> и <a>. После чего каждая кнопка перемещается влево или вправо, отсюда overflow: hidden для родительского элемента, чтобы развернуть родительский элемент под плавающие элементы.

CSS

#main #side {
 width: 263px; float: left; padding: 15px 30px 15px 15px;
 border-top: 15px solid white;
} 
 
 #main #side ul#pages, #main #side ul#categories {
  list-style: none; margin: 0 0 30px 0;
 }
  #main #side ul#pages li, #main #side ul#categories li {
   border: 1px solid #e9e9e9; padding: 1px;
   margin: 0 0 10px 0; text-align: right;
  }
   #main #side ul#pages li a, #main #side ul#categories li a {
    display: block; background: #e9e9e9; padding: 15px 20px 10px 20px;
    text-transform: uppercase;
   }
форматируем макет при помощи css стилей

Второй колонке #side придаем меньшую ширину и также перемещаем влево. Кнопки показа страниц и категорий используют тот же эффект двойной границы, поэтому к элементам <ul> и <li> можно применить ранее описанный код. Главным отличием этого варианта от предыдущего будет выравнивание текста по правой стороне.

CSS

#main #side h3 {
 font-size: 20px; font-weight: normal; text-transform: uppercase;
 margin: 0 0 10px 0; text-align: center;
}   
 
#main #side form {
 overflow: hidden; margin: 0 0 30px 0;
}
 #main #side input.searchbar {
  float: left; width: 193px; height: 25px; padding: 8px 13px 6px 13px;
  background: #fff; border: 1px solid #e9e9e9;
  font: 14px Helvetica, Sans-Serif; color: #7e7e7e;
 }
 #main #side input.searchbutton {
  width: 34px; height: 34px; float: left; margin: 3px 0 0 8px;
  background: url(images/search-icon.png); text-indent: -9999px;
  cursor: pointer;
 
  padding: 0 0 0 34px; /*IE Fix*/
 }
форматируем макет при помощи css стилей

Быстрой серий описаний форматируем тег <h3> боковой колонки (sidebar), слегка уменьшив размер шрифта, затем создаем поисковую форму, похожую по дизайну на форму нашего оригинального проекта. Создаем поле поиска с серой границей, затем, используя отступы (padding) и стили шрифта, добиваемся полной функциональности данного поля. Кнопку поиска, с другой стороны, создаем с помощью замещения изображения CSS, вставив изображение иконки на место исходного текста.

CSS

#footer {
 overflow: hidden; margin: 0 0 60px 0;
}
 #footer #credits {
 list-style: none; margin: 20px 0 0 30px;
 }
 #footer #credits li {
  float: left; margin: 0 6px 0 0;
 }
  #footer #credits li.wordpress a {
  display: block; width: 20px; height: 20px;
  background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
  }
  #footer #credits li.spoongraphics a {
  display: block; width: 25px; height: 20px;
  background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
  }
 
 #footer p#back-top {
 float: right; margin: 0 30px 0 0;
 }
 #footer p#back-top a {
  display: block; padding: 0 0 0 26px;
  background: url(images/back-top-icon.png) left no-repeat;
 }
форматируем макет при помощи css стилей

Осталось создать footer. Создадим две иконки об источниках информации с помощью замещения изображения CSS и переместим (float) ссылку «обратно наверх» вправо.

Тест на браузерах

Быстрый тест в популярных браузерах не выявил никаких проблем в Firefox, Safari и Chrome, зато, как обычно, отличился Internet Explorer. К счастью, устранить ошибки Internet Explorer предельно легко.

HTML

<!--[if IE 6]>
 <link href="css/ie6.css" rel="stylesheet" />
<![endif]-->

Создадим сперва таблицу стилей исключительно для IE6. Внутри условных комментариев добавим ссылку к отдельному СSS-файлу, который будет работать только для IE6.

CSS

#main {
 clear: both; height: 100%;
}
 
#main #content .post-info ul {
 height: 100%;
}

В наши дни подгонка сайта под IE6 зачастую не оправдывает затраченных на нее усилий, хотя в некоторых случаях она ограничивается парой поправок. Для нашего проекта камнями преткновения стали печально известная ошибка двойного поля (double margin bug) и непонятная проблема с высотой. Их устранением будет добавление описания height: 100%.

Полносттью сверстанный HTML CSS макет

Мы закодировали первоначальный концепт в статический HTML и CSS макет, это позволяет нам проверить, как он выглядит и ведет себя в различных браузерах, прежде чем перейти к следующему шагу – созданию полностью работоспособной темы WordPress.

Оригинальная статья

Комментарии к статье

Добавить комментарий