DIZ-CS.RU - Мы с Вами НАВСЕГДА!
Активный форум » WEB-мастеру » Технический раздел (домены, хостинг, настройка CMS и шаблонов) » Учимся верстать вместе с DIZ-CS
  • Страница 3 из 3
  • «
  • 1
  • 2
  • 3
Сообщение # 31
Аватарка Cornetto
OFF
Постоянный
Сообщения:548
Награды:1
Отзывы:24
Skype пользователя:
Извиняюсь за отсутствие уроков, мало времени тратить на их подписку. Вид материалов уже сверстан, сейчас я не дома, приеду домой - выложу и подпишу все теги
Сообщение # 32
Аватарка [Eragon]
OFF
Премиум
Сообщения:327
Награды:21
Отзывы:17
Stendy, ждём :)
Сообщение # 33
Аватарка Николай
За ВДВ...
OFF
Премиум
Сообщения:1826
Награды:63
Отзывы:70
Stendy,

сможешь сделать урок по верстке опросов? если нужно, я могу .psd дать :)
Сообщение # 34
Аватарка Cornetto
OFF
Постоянный
Сообщения:548
Награды:1
Отзывы:24
Skype пользователя:
Урок №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:
Код



Сообщения

100500



Награды

500





100500





Если что-то непонятно в HTML коде, отписывайтесь в теме. Не забывайте убирать подсказки в CSS коде
Сообщение # 35
Аватарка [Eragon]
OFF
Премиум
Сообщения:327
Награды:21
Отзывы:17
Stendy, но это же только часть. Нету разметки (таблицы и т.п.), только профиль...
Сообщение # 36
Аватарка Cornetto
OFF
Постоянный
Сообщения:548
Награды:1
Отзывы:24
Skype пользователя:
Я учу чистой верстке, а не верстке под укоз
  • Страница 3 из 3
  • «
  • 1
  • 2
  • 3
Поиск:
Писать на форуме могут только авторизованные пользователи.