• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать данные с названием и датой на сайте (Создаем отображение дат в виде дней недели)
Сделать данные с названием и датой на сайте
Kosten
Дата: Четверг, 2019-03-21, 13:59 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


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

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



Установка:

HTML

Код
<div class="scegimbah-keegisladave">
<div class="gislspend-ptuladave-kusam">
    <span class="kusampa-rticipan">Сентябрь</span>
    <span class="colekoarte-grav">31</span>
    <span class="gtelekov-apenegu">2018</span>
</div>

<h1 class="conduc-tandici-azusen">
ZorNet - портал для вебмастера</h1>
</div>


CSS

Код
.scegimbah-keegisladave {
  display: flex;
  align-items: center;
  font-family: Impact;
}
.conduc-tandici-azusen {
  margin: 0;
  padding-left: 0.9375rem;
  border-left: solid 1px black;
  color: #474747;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: calc(1vw + 1vh + 5vmin);
  line-height: calc(1vw + 1vh + 5vmin);
}
.gislspend-ptuladave-kusam {
  padding-right: 0.9375rem;
  color: #474747;
  text-align: center;
}
.gislspend-ptuladave-kusam .colekoarte-grav {
  font-size: calc(1vw + 1vh + 7vmin);
  line-height: calc(1vw + 1vh + 7vmin);
}
.gislspend-ptuladave-kusam .kusampa-rticipan {
    color: #f7f4f4;
    font: 12px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    padding: 2px 2px;
    width: 100%;
    position: relative;
    background: #b5347b;
}
.gislspend-ptuladave-kusam .gtelekov-apenegu {
color: #999;
padding: 0 0 4px;
font-size: calc(1vw + 1vh + .1vmin);
line-height: calc(1vw + 1vh + .1vmin);
display: block;
  font-family: Arial,Helvetica,sans-serif;
}


Например, даты могут быть введены в основной форме, которая должна понята обывателям.

Демонстрация
Прикрепления: 0548424.png(5.8 Kb) · kigfsa.zip(1.9 Kb)
Страна: (RU)
-SAM-
Дата: Пятница, 2019-03-22, 04:50 | Сообщение 2
Друзья сайта
Сообщений:554
Награды: 24


Кто захочет такое прикрутить к uCoz, то вот подшита тема.

Страна: (UA)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать данные с названием и датой на сайте (Создаем отображение дат в виде дней недели)
  • Страница 1 из 1
  • 1
Поиск: