Рассказываю сразу, о чем пойдет речь. Нам нужно сделать красиво оформленные блоки в 3 колонки.
Расскажу об оформлении. Оформление будет состоять из заголовка со своим фоном и разделенной с текстом полосой. Текст будет содержать отступы от обводки..
Чтобы не мозолить вам глаза, я не поленился и закомментировал для вас код css:
/* Задание стилей всего блока */
#body {
width:99%; /* Установка ширины блока в 99% */
}
/* Задание стилей левого столбца */
#left {
float:left; /* Установка обтекания */
width:33%; /* Установка ширины столбца */
background:#aeddff; /* Установка фонового цвета */
height: 200px; /* Установка высоты столбца */
border:2px solid #333; /* Границы правого столбца */
}
/* Задание стилей названия левого столбца */
#left .name {
text-align:center; /* Выравнивание заголовка по центру блока */
color: #fff; /* Задание цвета заголовка (тут - белый) */
background-color: #0274b0; /* Задание цвета фона */
border-bottom: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
font-size: 15px; /* Задание размера шрифта заголовка */
font-weight:bold; /* Задание полужирного начертания шрифта */
padding: 7px 0 7px 0; /* Задание верхнего и нижнего отступов текста заголовка от границ блока */
}
/* Задание стилей правого столбца */
#right {
float:right; /* Установка обтекания */
width:33%; /* Установка ширины столбца */
background:#ffecbe; /* Установка фонового цвета */
height: 300px; /* Установка высоты столбца */
border:2px solid #333; /* Границы правого столбца */
}
/* Задание стилей названия правого столбца */
#right .name {
text-align:center; /* Выравнивание заголовка по центру блока */
color: #fff; /* Задание цвета заголовка (тут - белый) */
background-color: #D5BA56; /* Задание цвета фона */
border-bottom: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
font-size: 15px; /* Задание размера шрифта заголовка */
font-weight:bold; /* Задание полужирного начертания шрифта */
padding: 7px 0 7px 0; /* Задание верхнего и нижнего отступов текста заголовка от границ блока */
}
/* Задание стилей среднего столбца */
#center {
margin-left:33%; /* Установка отступа */
margin-right:33%; /* Установка отступа */
background:#beffc0; /* Установка фонового цвета */
height: 100px; /* Установка высоты столбца */
border:2px solid #333; /* Границы правого столбца */
}
/* Задание стилей названия центрального столбца */
#center .name {
text-align:center; /* Выравнивание заголовка по центру блока */
color: #fff; /* Задание цвета заголовка (тут - белый) */
background-color: #5BC468; /* Задание цвета фона */
border-bottom: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
font-size: 15px; /* Задание размера шрифта заголовка */
font-weight:bold; /* Задание полужирного начертания шрифта */
padding: 7px 0 7px 0; /* Задание верхнего и нижнего отступов текста заголовка от границ блока */
}
/* Задание стилей текста во всех блоках */
.text {
color:#333; /* Задание цвета текста */
font-size:12px; /* Задание размера шрифта */
padding:10px; /* Задание отступа в 5 пикселей со всех сторон */
}
Чтобы посмотреть как этот код работает, добовляем html код:
<html>
<head>
</head>
<body>
<div id="body">
<div id="left">
<div class="name">Заголовок левого столбца</div>
<div class="text">Текст левого блока.</div>
</div>
<div id="right">
<div class="name">Заголовок правого столбца</div>
<div class="text">Текст правого блока.</div>
</div>
<div id="center">
<div class="name">Заголовок центрального столбца</div>
<div class="text">Текст центрального блока.</div>
</div>
</div>
</body>
</html>
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
можно было пробелы сделать, а то все сливается в одну кашу, и если возникнут какие-то проблемы, то сразу не разберешься что, где и как. Аккуратность — вежливость королей 🙂
Ответить | Цитировать
Ответить | Цитировать