Кодинг
★ Рубрика: Кодинг
★ Тема: CSS

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

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


Если вам понравилась эта лента новостей, то вы можете воспользоваться ее стилями и применить на вашем сайте. Итак, вам понадобятся стили:
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;
}
Теперь заместите на страницу сам код:
 Похожие публикации: CSS

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]