Дизайн современных интернет-сайтов включает в себя множество графических элементов. Текстовые блоки зачастую обрамляются рамками со скругленными углами и графическим фоном. Требованиями к верстке таких элементов являются свободное позиционирование на странице и адаптируемость к количеству содержащегося текста.
Попробуем сверстать заголовок такого блока
В заголовке мы видим скругленные углы и градиентный фон. Разделим картинку заголовка на три части,
Попробуем сверстать заголовок такого блока
которые будут соответственно левой стороной, фоном и правой стороной заголовка. Наш HTML-код будет выглядеть следующим образом:
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <div class="menu"> <img alt="" src="lbar.png" class="lbar"> <img alt="" src="rbar.png" class="rbar"> <div class="mbar">Навигация</div> <div class="clr"></div> </div> </body> </html>
Блок menu будет задавать ширину нашего меню, картинки lbar.png и rbar.png являются краями заголовка блок mbar содержит надпись.
В стилях CSS мы сначала зададим общие настройки для всех подобных текстовых блоков:
.lbar {
display: block; float: left;
}
.rbar {
display: block; float: right;
}
.mbar {
margin-top: 0px; margin-bottom: 0px;
}
.clr {
clear:both;
}
Теперь зададим стили для нашего заголовка меню
.menu {
width: 220px;
}
.menu .lbar, .menu .rbar {
width: 8px; height: 34px;
}
.menu .mbar {
height: 34px;
background: url('mbar.jpg');
margin: 0px 8px; padding-left: 20px;
font-size: 12px; color: #fff; line-height: 34px;
}
Главным здесь является свойство margin: 0px 8px, с помощью которого мы освобождаем место слева и справа от заголовка для закругленных картинок.
Новые домены .САЙТ, .ОНЛАЙН, .BIKE, .COMPUTER и множество других уже доступны для заказа. Успей занять красивый домен
Подробнее...
No comments:
Post a Comment