» »

Вид материалов в две или 3 колонки для uCoz

Вид материалов в две или 3 колонки для uCoz

На главной страницы сайта на игровом ресурсе можно ставить вид материалов в 2 колонки, что представлен в темной стилистике с Avatar. Здесь все поставлено на проценты, а это по умолчанию идет 50% на два материала по горизонту. Что можно и на три выставить, здесь больше зависит от самого дизайн, и как он будет выглядеть на портале.

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

Приступаем к установке:

Но для начало, давайте рассмотрим, как он смотрится в реальности. Так как он проверялся и была доработка на тестовой площадке по его функциональности и безусловно адаптивность под различные по размеру мобильных аппаратах.

1.



2.



3.



HTML

Код
<div class="arunikola_persvun">
<article class="dakolpas_zorbunkas lersamilsa">
<div class="nuredsam_kriatal">
<div class="lopasrevun_dermilab stulicterkin">
<a href="$ENTRY_URL$"><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://zornet.ru/Aben/ABGDA/zornet_ru/photo_not_available-store120.jpg<?endif?>" alt="$TITLE$"></a>
<?if($CATEGORY_NAME$)?><h5><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></h5><?endif?>
</div>
<h4 class="zaloged_slarumlta"><a href="$ENTRY_URL$">$TITLE$</a></h4>
<div class="satumilgkun">
<a href="$PROFILE_URL$"><div class="rmikaxtu_lpastun"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/fdMWyDOLRvCtJHRlXhqFQg.png" alt="" style="width: 25px; height: 25px;"><?endif?></div></a>
<span style="position:relative; bottom:1px; font-style: normal;"><span style="padding-left:0px;"></span>
<span class="fukipas_kalerdsa"><i class="fa fa-clock-o"></i>$DATE$ : $TIME$ : $WDAY$</span>
</div>
<div class="zornet-ruloper">  
<p>$MESSAGE$</p>
</div>
</div>
<footer class="mikaser-lpomug">
<span class="deszalom"><i class="fa fa-comments-o"></i> <?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$">$COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?> </a><?endif?></span>  
<span class="deszalom"><i class="fa fa-eye"></i> $READS$</span>
<span class="deszalom"><i class="fa fa-thumbs-o-up"></i> $RATING$</span>  
</footer>
</article>
</div>

CSS

Код
.arunikola_persvun {padding: 10px;width: 50%;margin: 0 !important;float: left;}
.dakolpas_zorbunkas {position: relative;background: #161619;box-shadow: 0 1px 6px 0 rgba(95, 94, 94, 0.53), inset 0 0 0px 0px #414244;border-radius: 5px 5px 3px 3px;border: 1px solid #454648;}
.nuredsam_kriatal {padding: 5px;position: relative;}
.lopasrevun_dermilab.stulicterkin {margin-bottom: 10px;}
.fukipas_kalerdsa {position:relative;bottom: 10px;color: #aad4f9;}
.lopasrevun_dermilab {width: 100%;position: relative;}
.lopasrevun_dermilab img {width: 100%;-webkit-transition: all 0.3s;display: block;margin: auto;height: 207px;box-shadow: 0 0px 3px 1px rgb(61, 61, 64), inset 0 0 0 1px #67696d;opacity: 0.7;border-radius: 3px;border: 1px solid #5c5d61;}
.lopasrevun_dermilab img:hover {opacity: 1;}
.lopasrevun_dermilab > h5 {position: absolute;left: 0;bottom: 0;font-family: "Roboto", sans-serif;font-size: 13px;line-height: 21px;color: white;font-weight: 600;padding: 5px 12px;background: rgba(6, 78, 22, 0.88);margin: 0;border-radius: 0px 3px 0px 3px;}
.lopasrevun_dermilab > h5:before {content: '';position: absolute;}
.lopasrevun_dermilab > h5 a:first-child {margin-left: 0;}
.lopasrevun_dermilab > h5 a {display: inline-block;color: #f1ecec;text-shadow: 0 1px 0 #0e0e0e;}
.thumb-icon.stulicterkin { text-align: center; width: 60px;height: 40px; line-height: 40px;font-size: 20px;position: absolute;top: 50%; margin-top: -20px; margin-left: -30px; color: #34495e;}
.zaloged_slarumlta {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-bottom: 1px solid #2d2c2c;padding: 1px 0px 3px 5px;}
.zaloged_slarumlta a {margin-bottom: 10px;text-transform: none;font-size: 18px;font-weight: bold;font-family: PT Sans;color: rgba(207, 255, 249, 0.97);text-shadow: 0 1px 0 #1b1a1a;}
.zaloged_slarumlta a:hover{color:#fff9c0;text-decoration:underline;}
.rmikaxtu_lpastun {float: left;margin-top: -9px;margin-right: 10px;}
.rmikaxtu_lpastun img {border-radius: 50%;margin-right: 1px;display: inline-block;width: 27px;height: 27px;}
.rmikaxtu_lpastun span {font-weight: 500;color: #c3d8ff;display: inline-block;font-size: 13px;}
.satumilgkun > span, .satumilgkun > p {display: inline-block;margin: 0;font-family: "Roboto", sans-serif;font-size: 13px;line-height: 20px;color: #e3e3f5;text-transform: capitalize;font-weight: 500;margin-top: 5px;}
.satumilgkun > span i, .satumilgkun > p i {font-size: 16px;color: #83cbff;font-style: normal;margin-right: 5px;float: left;margin-top: -7px;}
.mikaser-lpomug {border-top: 1px solid #313131;display: block;background: #0e0e0e;height: 40px;border-radius: 0px 0px 3px 3px;}
.deszalom {font-size: 13px;display: inline-block;margin: 10px 1px 15px 12px;color: #aee8ff;text-shadow: 0 1px 0 #0a0a0a;}
.deszalom a{color:#c8e9ff;text-decoration:none;}
.deszalom a:hover{color:#9afff7;text-decoration:underline;}
.zornet-ruloper {opacity: 0.99;margin-bottom: 0px;padding: 0 5px;height: 85px;overflow: hidden;text-align: justify;color: #e4dada;font-size: 12px;}
li {list-style-type: none;}
@media (max-width: 450px){.deszalom {display:none;}}

@media screen and (max-width: 1124px) {  
  .arunikola_persvun {width: 50%;margin: 1%;}  
}  
@media screen and (max-width: 860px) {  
  .arunikola_persvun {width: 99.7%;margin: 2%;}  
}

Здесь подключены шрифтовые иконки, что оригинально все смотрится.
10.01.2018 Просмотров: 289 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar