ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Адаптивный вид новостей сайта для uCoz

Адаптивный вид новостей сайта для uCoz

Оригинальная конструкция на адаптивный вид, который идет для новостей или каталога статей, что произведен в светлом оттенке с датой размещение. Само решение в большинстве создана под мобильные аппараты, но и на широком экране смотрится замечательно. От стандартного вида здесь имеет описание с дроблением на материал. Ведь по правой стороне идет круглое изображение, а также в стильном виде прописана дата.

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

Рассмотрим изображение при проверке на работоспособность:

1. На широком экране в стандартном обозрение.

Адаптивный вид материалов для новостей или статей

2. Вид на мобильных гаджет:

Все корректно выводит на всех мониторах или мобильных аппаратов.

Установочный процесс:

HTML

Код

<div class="veslopeda">
  <div class="portalagesa">
  <div class="novostnik" id="enachenia$ID$">
  $DATE$
  </div>
  <div class="veslopedaimg">
  <img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" alt="$TITLE$">
  </div>
  </div>
  <div class="veslopedar">
  <h3>$TITLE$</h3>
  <p>$MESSAGE$. <a href="$ENTRY_URL$">Читать дальше</a></p>
  </div>
</div>
  <script>
  var str = $("#enachenia$ID$").html();
var mas = str.split('.');
var code='';
for (i=0; i<mas.length; i++){
  code+= '<div>'+mas[i]+'</div>';
}
$("#enachenia$ID$").html(code);
</script>

CSS

Код

/*вид материалов*/

.veslopeda {
  display: flex;
  padding: 10px;
}
.portalagesa {
  display: flex;
  min-width: 180px;
  padding: 10px;
  align-content: center;
  align-items: center;
  align-self: center;
}


.novostnik {
  text-align: center;
  padding: 8px 0;
  margin: 0 10px;
}

/*дата*/
  .novostnik div:nth-child(1) {
  font-size: 11px;
  text-transform: uppercase;
  }
/*месяц*/
  .novostnik div:nth-child(2) {
  font-size: 35px;
  font-weight: bold;
  line-height: 40px;
  }
/*год*/
  .novostnik div:nth-child(3) {
  font-size: 11px;
  }

.veslopedaimg {
  min-width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
}
.veslopedaimg img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.veslopedar {
  padding: 10px 10px 20px;
  border-bottom: 1px solid #c5c5c5;
}
.veslopedar h3 {
  font-size: 18px;
  display: block;
  padding: 10px 0;
}
.veslopedar p {
  display: block;
  font-size: 13px;
  color: #434343;
  line-height: 18px;
}

@media screen and (max-width: 500px){
  .veslopeda {display: block;}
  .portalagesa {max-width: 100%;}
  .veslopedaimg {
  margin: auto;
  }
}

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

Автор: waak (поправил -SAM-)
Источник: talantlev.ucoz.ru

21 Апреля 2022 Просмотров: 1756 Комментариев: (3)

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

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

Kosten