• Страница 1 из 1
  • 1
Общий форум » Самоучитель HTML и CSS » Коды HTML для сайта » Популярный вид материалов каталогов для uCoz
Популярный вид материалов каталогов для uCoz
Kosten
Дата: Среда, 27.12.2017, 19:48 | Сообщение 1
Администраторы
Сообщений:16662
Награды: 55


Этот вид может по своему дизайн подойти на многие интернет ресурсе, так как одна колонка и стилистика стандартная и для многих привычная. Где есть кнопки на переход на основу и под категорию. Решил его под мобильные аппараты сделать, но времени нет, да что то не пошло, и вот решил на сайт закинуть, возможно кому то пригодится.



HTML

Код
<table class="mt-tabl" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="mt-td-1" style="background:url($IMG_URL1$);"><a class="mt-a" href="$ENTRY_URL$"> </a><a class="mt-cat" href="$CATEGORY_URL$">$CATEGORY_NAME$</a></td>
<td class="mt-td-2"><div class="mt-div"><a class="mt-title" href="$ENTRY_URL$">$TITLE$</a></div>
<div class="mt-mes"><p>$MESSAGE$</p></div>
<div><div class="mt-det"><i class="fa fa-calendar-check-o"></i> $DATE$</div>
<div class="mt-det"><i class="fa fa-eye"></i> $READS$</div>
<div class="mt-det"><i class="fa fa-comments"></i> $COMMENTS_NUM$</div>
<div class="mt-det"><i class="fa fa-thumbs-o-up"></i> $RATED$</div><a href="$ENTRY_URL$" class="mt-chit">Читать далее</a></div>
</div></div></td></tr>
</tbody>
</table>

CSS

Код
.mt-tabl {margin-bottom:30px;}
.mt-td-1 {display:inline-block;width:auto;overflow:hidden;position:relative;background-position-x:center!important;background-position-y:center!important;background-size:cover!important;max-width:320px;min-width:320px;height: 157px;}
.mt-a {position:absolute;top:0;left:0;width:100%;height:100%;display:block;}
.mt-cat {bottom:8%;position:absolute;left:4%;display:inline-block;color:#fff;font-size:12px;padding:5px 12px;text-transform:uppercase;font-family: 'Roboto Condensed', sans-serif;text-decoration:none!important;border-radius:12px;}
.mt-cat{background:#396fc7;}
.mt-cat:hover {background:#11690c;}
.mt-td-2 {padding-left:20px;}
.mt-title {color:#504c4c;font-size: 21px;line-height: 2px;}
.mt-mes {margin:7px 0;max-height:86px!important;overflow:hidden!important;color:#333!important;}
.mt-mes p {font-size:14px!important;line-height: 21px!important;margin:0!important;text-align: justify;}

.mt-det {font-family: 'Roboto', sans-serif!important;font-size: 14px;color: #353232;display: inline-block;line-height: 15px;padding: 5px;text-decoration: none!important;}

.mt-chit {float:right;background:#333;display:inline-block;color:#fff;font-size:12px;padding: 6px 12px;border-radius:12px;}
.mt-chit:hover {background:#1444b3;}
Прикрепления: 1371659.png(168.0 Kb)
Страна: (RU)
Общий форум » Самоучитель HTML и CSS » Коды HTML для сайта » Популярный вид материалов каталогов для uCoz
  • Страница 1 из 1
  • 1
Поиск: