Чат uSite
Загрузка чата..
Все новости
Новости uSite
19.05.2012
Открыли «Оповещения» (β).
29.04.2012
Сделан до конца вид материалов форума.
Пользователи онлайн
Загрузка списка...
Уникальные скрипты » Прочее » Стильный и красивый вид материалов
Здраствуйте дорогие пользователи сайта uSite.su. Вот уже 5 гдето день наблюдаю и сайт умирает, общения нет, чат замерл, а про скрипты и т.д я вообще молчу. Так вот сегодня я решил сверстать такой вот классный вид материалов. Ну что ж приступим к установке.

Шаг 1: Проверили работает ли голова, и не кривые ли у вас руки.

Шаг 2: Устанавливаем вид материалов где хотим его видеть.
Code

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 5px;">
  <tr>
  <td width="8%" class="pierwsza" align="center" valign="top">
  <img src="http://image-up.3dn.ru/_ph/1/2/880134628.png" title="Количесто лайков" alt="Количество лайков">
  <div class="likek" align="center" title="Количесто лайков">$RATED$</div>
  </td>
  <td widht="100%" valign="top" class="druga">
  <?if($IMG_URL1$)?><div style="float: right;"><a href="$ENTRY_URL$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL1$" class="imageks" />
  </a></div><?endif?>
  <div><a href="$ENTRY_URL$" class="titlename">$TITLE$</a><div>
  $MESSAGE$
  </td>
  </tr>
</table>


Шаг 3: Устанавливаем CSS в Таблицу стилей CSS
Code

/* by coffee aka vasa3000 */
.pierwsza {border: 1px solid #51708c; background: #648aad; border-bottom: 3px solid #51708c; border-radius: 3px 0 0 3px; padding: 5px;}
  .likek {display: block; color: #edf1f5;}
  .druga {padding: 5px; border: 1px solid #ccc; border-bottom: 3px solid #ccc; border-radius: 0 3px 3px 0; color: #a4a4a4; background: #fff;}
  .imageks {border-radius: 3px; width: 150px; height: 200px; box-shadow: -3px 0px 6px rgba(50, 50, 50, 0.25);}
  a.titlename {border-bottom: 1px dotted #9C9B9B;display: block; font-size: 11pt; color: #9C9B9B;}
  a.titlename:hover {border-bottom: 1px dotted #8E8E8E; text-decoration: none; color: #8E8E8E;}
/* ------- */


Вот и всё, наш вид материалов готов. Если вы же хотите посмотреть как оно выглядит, перейдите на: ДЕМО
Всего 12 комментариев и 2741 просмотр
Код конечно же не лучший. Табличная верстка - это ужасно. Сам же вид материалов подойдет прекрасно лишь для блогов, либо новостных сайтов, где краткое описание поста имеет большой текст..
Автор, отличная работа!
11 ошибок в коде, ужас! Табличная вёрстка - wtf?
я только сверстал и немного доделал
Дизайн вида материала так себе, не говорю про код он норм
Я бы, конечно, сделал это не таблицой))
сори, но дивом не очень умею))
Да там проще простого))
ну если б кто мне нормально объяснил, а так я сам, и блин там много чего у меня не получается
uSite.su © 2010-2020
Все права защищены.
Лишь самые новые разработки для системы uCoz, среди которых находятся уникальные скрипты и великолепные части дизайна, совокупность которых порождает любимый многими сайт — uSite.su.
01RSS
Хостинг от uCozПользовательское соглашение и прочая информация