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="$IMG_URL1$" alt="$MESSAGE$" title="$TITLE$">
  </div>
  </div>
  <div class="veslopedar">
  <h1>$TITLE$</h1>
  <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 h1 {
  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;
  }
}

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

Источник: Talantlev.ucoz.ru
Автор: waak

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

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

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

Kosten

Комментарии: 3
Порядок вывода комментариев: -SAM- 26 Августа 2022 00:12¹ 0 Кто будет себе ставить, то ознакомитесь с этим комментарием (материал содержит те же ошибки, которые следует исправить). JENEK6976 02 Октября 2023 14:29² 0 Это как я понимаю за место $BODY$ надо вставлять? Kosten 02 Октября 2023 17:27³ 0 Нет не нужно, это полный код на комментарий, попробуйте замените и посмотрите, все корректно показывает и выводит. Потом пройдите, что пользователь -SAM- написал и указал не некоторые ошибки, можете исправить.