MuSimka.SiTe - Скрипты для uCoz - Адаптивный вид новостей сайта для uCoz
Шаблоны

1 Светло синий шаблон форума для uCoz
Дата добавления:23.06.2022

2 Шаблон Cinemak для uCoz
Дата добавления:21.06.2022

3 Шаблон NowFilms для uCoz
Дата добавления:21.06.2022

4 Шаблон Animeway для uCoz
Дата добавления:21.06.2022

5 Шаблон «7ucoz» для uCoz
Дата добавления:19.06.2022
Комментарии
  • 12.06.2022
    Перейти

    Прикольно смотрится на сайте))))))))

  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0




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

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

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

    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

    Адаптивный вид новостей сайта для u, скачать, Ucoz, шабоны, скрипты, вид
    • Категория: Скрипты для uCoz
    • Просмотров: 53
    • Загрузок: 0

    Поделиться файлом или скачать


    Файлы для скачивания отсутствуют

    Коментарии

    • Коментарии к материалу Адаптивный вид новостей сайта для uCoz
    Аватар
    Admin
    12.06.2022,18:39 Воскресенье
    Прикольно смотрится на сайте))))))))
    Аватар
    a1223
    13.06.2022,04:52 Понедельник
    cool B) cool
    avatar
    MuSimka.SITE

    MuSimka.SITE ©2022


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