Верстка правой колонки

В этом уроке мы будем работать над правой колонкой, т.е. над основным контентом. Он у нас состоит из трех блоков:

  1. Первый блок с тремя колонками;
  2. Второй блок с фотографиями;
  3. Третий блок с таблицей.

Начнем с первого блока. Для начала в шаблоне html нам нужно создать блок в виде списка с классом about. Каждый пункт этого списка будет содержать заголовок и абзац:

Верстка правой колонки

 

Нам нужно чтобы эти пункты отображались друг за другом. Для этого надо установить свойство float со значением left, а также указать ширину для пунктов, 226px. Также нужно будет установить межстрочный интервал, добавить тень к тексту, установить размер заголовка и текста, и раскрасить первый символ у заголовка. Этого мы еще не делали, поэтому я покажу простой способ. Есть такой псевдоэлемент в каскадных таблицах стилей, который носит название first-letter, т.е. первый символ. При помощи этого псевдоэлемента мы выбираем первый символ в заголовке, и прописываем для него свойства: h1:first-letter {...}

Еще одно новое свойство - это text-transform. В наших заголовках все слова начинаются с заглавной буквы, чтобы их не прописывать вручную, мы запишем для свойства text-transform значение capitalize:

Верстка правой колонки

Свойства для списка с классом about:

Верстка правой колонки

Теперь переходим к блоку с фотографиями. Сначала прописываем заголовок. Стили для него мы уже указали. После заголовка пишем список с классом .photo:

Верстка правой колонки

Фотографии можно взять здесь. Скопируйте их в папку images.

Теперь записываем стили для этого блока:

Верстка правой колонки

Переходим к таблице. Она у нас имеет скругленные углы, как это реализовать показано в этой заметке, а пока давайте запишем в html шаблоне следующий код:

Верстка правой колонки

Наша таблица состоит из головы thead и тела tbody. Теперь нужно прописать стили для ее компонентов:

Верстка правой колонки

Здесь для тега table мы убираем все отступы, устанавливаем значение collapse для свойства border-collapse, чтобы браузер отображал одну границу между ячейками таблицы, устанавливаем цвет границы таблицы, и ширину. Для ячеек th и td устанавливаем цвет границы, отступы внутри, и выравниваем содержимое по верхнему краю. И отдельно прописываем цвет фона для th и td.

Теперь нужно добавить отступы снизу у блоков, для этого запишите для ul.about и ul.photo: margin: 0 0 20px 0; overflow: hidden. И нам остается доработать подвал, и проверить как отображается наша страничка в других браузерах. Все это в следующем уроке.

http://youtu.be/EynMr-TXq7E

Источник: http://psd-html-css.ru/css/verstka-pravoy-kolonki

Читать комменты и комментировать

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



Защитный код
Обновить

Верстка правой колонки | | 2012-04-16 19:25:00 | | Статьи Web-мастеру | | В этом уроке мы будем работать над правой колонкой, т.е. над основным контентом. Он у нас состоит из трех блоков:Первый блок с тремя колонками;Второй блок с фотографиями;Третий блок с таблицей.Начнем | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: