Урок №3
Новенький урок по верстке вида материалов. Над его дизайном я не заморачивался, так что мега фотошоперы не судить дизайн
1. Код CSS:
Код
#view {
margin:0 auto; // Выравниваем вид по центру
padding:0; // Убираем отступы
font:11px Tahoma; // Устанавливаем шрифт
color:#fff; // Устанавливаем цвет шрифта
width:201px; // Устанавливаем ширину вида
text-shadow:0 1px 0 #000; // Тень текста
}
#view_line {
background:url(http://lesson-ds.ucoz.ru/lesson3/view_line.png) no-repeat; // Фон
width:201px; // Ширина элемента
height:25px; // Высота элемента
margin:0 0 2px 0; // Отступы снаружи элемента
padding:0 7px 0 7px; // Отступы внутри элемента
}
#view_left {
float:left; // Расположение элемента
line-height:25px; // Выравниваем текст по высоте в центре
}
#view_right {
float:right; // Расположение элемента
background:#255376; // Фон элемента
border-radius:3px; // Закругления углов элемента
padding:3px; // Отступы внутри элемента
margin:3px 10px 0 0; // Отступы снаружи элемента
border-bottom:1px solid #3c80af; // Обводка внизу элемента
}
#view_rep {
background:url(http://lesson-ds.ucoz.ru/lesson3/view_rep.png) no-repeat; // Фон элемента
width:201px; // Ширина элемента
height:35px; // Высота элемента
line-height:35px; // Выравниваем текст по высоте в центре
}
#view_rep_num {
text-align:center; // Выравниваем текст по центру
text-shadow:0 1px 0 #000; // Тень текста
}
#view_rep_plus {
float:right; // Расположение элемента
background:url(http://lesson-ds.ucoz.ru/lesson3/view_plus.png) no-repeat; // Фон элемента
width:37px; // Ширина элемента
height:35px; // Высота элемента
}
#view_rep_plus:hover {
background:url(http://lesson-ds.ucoz.ru/lesson3/view_plus_hover.png) no-repeat; // Фон элемента при наведении
}
#view_rep_minus {
float:left; // Расположение элемента
background:url(http://lesson-ds.ucoz.ru/lesson3/view_minus.png) no-repeat; // Фон элемента
width:38px; // Ширина элемента
height:35px; // Высота элемента
}
#view_rep_minus:hover {
background:url(http://lesson-ds.ucoz.ru/lesson3/view_minus_hover.png) no-repeat; // Фон элемента при наведении
}
2. Код HTML:
Код
<div id="view">
<div align="center"><img src="http://www.weblancer.net/files/portfolio/3698/369868/1207336.png" style="border:6px solid #255376; border-radius:4px; margin-bottom:5px;"></div>
<div id="view_line">
<div id="view_left">Сообщения</div>
<div id="view_right">100500</div>
</div>
<div id="view_line">
<div id="view_left">Награды</div>
<div id="view_right">500</div>
</div>
<div id="view_rep">
<div id="view_rep_minus"></div>
<div id="view_rep_plus"></div>
<div id="view_rep_num">100500</div>
</div>
</div>
Если что-то непонятно в HTML коде, отписывайтесь в теме. Не забывайте убирать подсказки в CSS коде