Красивая лента новостей для сайта

Если у вас на сайте часто публикуются новости и требуется привязка ко времени публикации, то это можно организовать с помощью вертикальной time-line, например так, как вы видите ниже.

Новости сайта за сегодня

13:53

На нашем сайте запущен в работу форум

13:31

Стала доступна форма обратной связи с администрацией сайта

12:55

Мы сделали страничку со всеми сервисами сайта

09:43

Теперь мы группируем новости по датам

Если вам понравилась эта лента новостей, то вы можете воспользоваться ее стилями и применить на вашем сайте. Итак, вам понадобятся стили:

section .item_news_block {
 font-size: 12px;
 margin-bottom: 10px;
}

section .item_news_block .news_header_date, section .item_news_block .news_date > div {
 color: #aeaeae;
 border: 1px solid #f4f4f4;
 border-radius: 10px;
 line-height: 23px;
 display: inline-block;
 padding: 0px 10px;
 z-index: 3;
 position: relative;
}

section .item_news_block .item_news_block_bg {
 width: 1px;
 background: #f4f4f4;
 left: 24px;
 top: 23px;
 position: absolute;
 z-index: 1;
 bottom: -15px;
}

section .item_news_block .news_header_date {
 margin-bottom: 20px;
 position: relative;
}

section .item_news_block .news_header_date .item_news_block_bg {
 bottom: -23px;
}

section .item_news_block .news_date {
 width: 60px;
 float: left;
}

section .item_news_block .news_date .item_news_block_bg {
 bottom: -15px;
}

section .item_news_block .item_news {
 margin-bottom: 15px;
 position: relative;
}

section .item_news_block .item_news .item_news_text {
 line-height: 15px;
 display: block;
 margin-left: 60px;
}

section .item_news_block .item_news.last .item_news_block_bg {
 display: none;
}

section .news-lenta-part a {
 color: #000000;
 border-bottom: 1px solid #dcdcdc;
text-decoration:none;
}

section .news-lenta-part a:hover {
 border-bottom: none;
 color: #cd4839;
text-decoration:none;
}

section .item_news_block .item_news .item_news_text {
 line-height: 15px;
 display: block;
 margin-left: 60px;
padding-top:4px;
}

Теперь заместите на страницу сам код:
<section> <div class="news-lenta-part"> <div class="wrap_rl_10 wrap_rl_10_all"> <div class="item_news_block clearfix"> <div class="news_header_date"> Новости сайта за сегодня <div class="item_news_block_bg"></div> </div> <div class="item_news "> <div class="item_news_block_bg"></div> <div class="news_date"> <div> 13:53 </div> </div> <div class="item_news_text"> <a href="/forum/">На нашем сайте запущен в работу форум</a> </div> </div> <div class="item_news "> <div class="item_news_block_bg"></div> <div class="news_date"> <div> 13:31 </div> </div> <div class="item_news_text"> <a href="http://upbyte.net/index/vse_tegi/0-3">Стала доступна форма обратной связи с администрацией сайта</a> </div> </div> <div class="item_news "> <div class="item_news_block_bg"></div> <div class="news_date"> <div> 12:55 </div> </div> <div class="item_news_text"> <a href="http://upbyte.net/index/prilozhenija_i_servisy_sajta/0-8">Мы сделали страничку со всеми сервисами сайта</a> </div> </div> <div class="item_news last"> <div class="item_news_block_bg"></div> <div class="news_date"> <div> 09:43 </div> </div> <div class="item_news_text"> <a href="http://upbyte.net/index/vse_tegi/0-5">Теперь мы группируем новости по датам</a> </div> </div> </div> </div> </div> </section>