Накопительнаядисконтная карта Компания Edip Help предлагает своим постоянным клиентам воспользоваться накопительной дисконтной картой, которая позволяет Вам сэкономить на повторных вызовах сервис-инженеров.
подробнее >>
На рис.3.1 показан данный код в браузере после объединения всех частей.
Рис.3.1.Вид содержимого после выполнения первой стадии верстки.
3.1.2 Добавление CSS стилей к HTML странице. Для сохранения хорошего стиля кода, вынесем все css стили во внешний файл. Пропишем соединение с этим файлом в заголовке html страницы.
Для всего документа определим общие параметры.
* {
margin: 0; //внешний отступ
padding: 0; //внутренний отступ
}
}
Напомним, что весь контент страницы помещен в один блок wrapper.
.wrapper {
width: 1024px; //ширина основной области
height: 100%; //высота основной области
margin: 0 auto; //0-отступ сверху, auto-расположить по середине
}
Для блока заголовка:
.header {
position: relative;
height: 255px;
}
Для логотипа:
.header .logo {
display: block; //отобразить как блок
height: 130px; //высота
width: 340px; //ширина
background: url("img/logo.jpg") no-repeat #000; //указываем изображение в качестве фона
margin: 10px 0 0 0;
float: left; //позиционирование слева
}
Для верхней серой линии. Она выполнена не как обычная линия hr, а как узкий залитый цветом блок.
.header .line {
display: block;
height: 5px; //высота
width: 684px; //ширина
margin-top: 17px; //отступ сверху
float: left; //позиционирование слева
background-color: #bcbdbf; } //цвет фона
Область с номером телефона:
.header .tel {
clear: both; //не допускает блочные элементы по сторонам
padding: 40px 0 0 25px;
font-family: tahoma;
color: #8a8a8a;
font-size: 20px;
}
Следующим элементом шапки страницы является меню.
.menu {
margin: 9px 0 0 15px;}
Меню представляет собой список ссылок. Обычно списки имеют вертикальный вид, а на шаблоне меню горизонтального вида. Для того чтобы преобразовать меню используем следующие свойства:
.menu li {
display: inline-block;
background-color: #bdc2c5;
}
.menu li a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px 29px 11px 29px;
}
Также, мы должны убрать стандартное декорирование ссылок (подчеркивание)
a {
text-decoration: none;
color: inherit;
}
Последний элемент шапки страницы изображение – ссылка. Устанавливаем тип элемента как блочный, т.е. можно задать фон, размеры, позицию для этого блока.
.header .hdrImg {
display: block;
position: absolute; //абсолютная позиция
top: 21px; //отступ сверху
right: 0px; //отступ справа
width: 479px; //ширина
height: 232px; //высота
background: url("img/hdrRight.jpg") no-repeat; //адрес изображения устанавливаемого в качестве фона
}
Перейдем к основной части страницы. Напомним, что основная часть состоит из 3 блоков, каждый из которых - блок - заголовок, и таблицу заполненную данными в качестве контента.
.block {
width: 500px; //ширина блока
float: left; //позицирование слева
margin: 25px 0 0; //отступ сверху 25 пикселей
}
Для подзаголовка используем блок, в котором фоном является изображение:
.block .blockTitle {
height: 33px;
float: right; //плавающий справа элемент
position: relative;
top: 2px;
}
.block .blockTitle1 {
width: 464px;
background: url("img/ttlBckg1.jpg") no-repeat;
}
Нижний блок с содержимым:
.block .blockContent {
position: relative; //относительное позиционирование
border: 1px solid #dedede; //граница шириной 1px, сплошная, серого цвета
display: table;
border-radius: 7px 0 7px 7px; //делаем закругленные углы у блоков
padding: 20px; //внутренние отступы от границы блоков
text-align: justify; //выравнивание текста по центру
color: #737373; //цвет текста
line-height: 16px; //интерлиньяж
}
После подзаголовка следует таблица:
table {
border-collapse: collapse;
}
В правых ячейках находятся иконки-изображения.
.ico1, .ico2 {
width: 49px; //ширина
height: 47px; //высота
margin-right: 15px; //отступ справа
}
.ico1 {
background: url("img/ico1.jpg") no-repeat; //адрес изображения
}
.ico2 {
background: url("img/ico2.jpg") no-repeat;
}
В первой левой ячейке полужирным шрифтов выделяется подзаголовок. Для этого мы использовали тег . Стили к этому пропишем:
b {
color: black;
display: block;
margin-bottom: 10px;
}
Для серой линии стиль будет следующим:
hr {
border: 1px solid #c4c4c4;
border-top: 0;
margin: 20px 0;
}
По середине блока с текстом виден разрыв, выполненный как ссылка красного цвета со специальными символами >>. Для этих разрывов напишем следующее:
.links {
position: relative;
font-weight: bold; //полужирный
font-size: 17px; //размер шрифта
color: #cd0102; //цвет
padding: 0 0 5px 0; //отступы
}
.links .link {
position: absolute;
background: #fff; //цвет подложки - белый
padding: 0 10px;
right: 37px;
top: -28px;}
Оставшиеся два блока похожи на первый, с той разницей что с левой стороны там нет иконок, пропишем стили для этих блоков. Для заголовков:
.block .blockTitle2 {
width: 420px;
background: url("img/ttlBckg2.jpg") no-repeat;
}
.block .blockTitle3 {
width: 420px;
background: url("img/ttlBckg3.jpg") no-repeat;
}
Для расположения самих блоков:
.block2, .block3 {
margin-left: 20px;
}
На рис.3.2 показан результат после добавления всех вышеуказанных свойств в CSS файл, на который ссылается основной html файл:
