Html код новостного блока

Новостной блок своими руками

В этом уроке мы с Вами будем учиться делать блок с прокручивающимися в нем новостями. Вот как он выглядит:

Создайте основу навигации в таком формате:

3/14/08 — Наша компания открыла новый офис в Уфе. Он находится на ул. Шашина 5.

3/15/08 — Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!

3/16/08 — Наша компания представила новый образец робота Willi 6ex.

3/18/08 — В ближайшие дни планируется промоакция по продаже дешевых роботов!

3/19/08 — Новые возможности для частных инвесторов! Небывалые процентные ставки!.

Если у Вас будет больше пунктов в новостях, то просто добавляйте их в новые контейнеры . Поместите этот код в то место страницы, где Вы хотели бы видеть свой навигационный блок.

После основного кода, вставьте следующий скрипт:

 
function vscroll_data0() 
 this.enable_visual_design_mode = false; 
this.container_width = 160 
this.container_height = 190 
this.top_pause_offset = 10 
this.initial_scroll_delay = 0 
this.animation_delay = 20 
this.animation_jump = 2 
this.animation_delay_mac = 100 
this.animation_jump_mac = 10 
this.container_styles = "background-color:#f5f5f5; background-image:; border-style:solid; border-color:#000000; border-width:1px; padding-right:10px; padding-left:10px; " 
this.item_link_styles = "margin-bottom:0px; background-color:; background-image:; color:#1e51c8; text-align:; font-family:Arial; font-size:13px; font-weight:; text-decoration:none; border-style:none; border-color:; border-width:0px; padding-top:; padding-right:; padding-bottom:; padding-left:; " 
this.item_link_hover_styles = "background-color:; background-image:; color:; text-align:; font-family:Arial; font-size:; font-weight:; text-decoration:underline; " 
this.item_styles = "margin-bottom:15px; background-color:; background-image:; color:#212e43; text-align:; font-family:Arial; font-size:13px; font-weight:; text-decoration:none;"> 

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

После этого скрипта или перед закрывающимся тэгом поместите скрипт из этого файла:

На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.opencube.com
Перевел: Евгений Попов
Урок создан: 22 Сентября 2008
Просмотров: 67445
Правила перепечатки

5 последних уроков рубрики «Для сайта»

• 

Эффекты блочного раскрытия

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

15 полезных .htaccess сниппета для сайта на WordPress

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

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

45+ бесплатных материалов для веб дизайнеров за август 2016

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

Источник

Adding Recent News Boxes to Your Website

One of the most common components to any website is a section that displays a number of your most recent news articles. This helps keep your users engaged and provides the necessary real estate to showcase featured content.

Of course, there are multiple ways to display this type of content, from a vertical list to minimal textual information. An additional way to display recent news is through the use of a box and grid based system. Using this method, you can create the needed space to include a news entry’s featured image, the article’s posting date, and it’s title.

In some designs, it’s important to keep the information displayed to a minimum. Showing a date and an entry’s title is often the only key information needed. Additionally, images tend to drive better click-through-rates and so it’s generally a good idea to showcase a featured image if possible. With this in mind, a simple box container system can accommodate these aspects to a recent news article.

Below is the HTML, CSS, and JavaScript required.

Step 1 — recent-news-boxes.html

Copy and paste the code below into recent-news-boxes.html

Step 2 — recent-news-boxes.css

Download the CSS below and include it in your web page

Step 3 — Add the includes below to your web page

In this tutorial we showed you how to create a section showcasing a number of featured news articles, each contained in it’s own box.

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

RELATED POSTS

Источник

Верстаем новостной сайт с помощью Flexbox

Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.

Причина, по которой автор использует Flexbox – это большое количество возможностей, которые он предоставляет:
— легкость в создании адаптивных столбцов;
— создание столбцов одинаковой высоты;
— возможность прижатия содержимого к низу контейнера.

1. Начинаем с создания двух столбцов

Создание столбцов при помощи CSS всегда влекло за собой определенные трудности. На протяжении длительного времени для выполнения данной задачи широко использовались (и используются) float’ы и / или таблицы, но каждый из этих методов имел (и имеет) свои недостатки.

В свою очередь, Flexbox упрощает этот процесс, обладая рядом таких преимуществ, как:

— написание более «чистого» кода: от нас лишь требуется создать контейнер с правилом display: flex;
— гибкость: мы можем изменять размер, растягивать и выравнивать столбцы путем изменения пары строк CSS;
— семантическая разметка;
— кроме того, с использованием Flexbox отпадает необходимость отменять обтекание во избежание непредсказуемого поведения лейаута.

Давайте начнем работу с создания двух столбцов, один из которых будет занимать 2/3 ширины нашего контейнера, а еще один — 1/3 его часть.

Здесь присутствуют два элемента:

— контейнер columns;
— два дочерних элемента column, один из которых имеет дополнительный класс main-column, который мы используем позже для того, чтобы сделать столбец шире.

.columns < display: flex; >.column < flex: 1; >.main-column

Поскольку main-column имеет значение flex равное 2, то этот столбец займет в два раза больше места, чем второй.

Добавим немного визуального оформления и, в итоге, получим:

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

2. Делаем каждый столбец flexbox-контейнером

Каждый из двух столбцов будет содержать несколько вертикально расположенных статей, поэтому из этих двух элементов мы, в свою очередь, также должны сделать flexbox-контейнеры.

Итак, нам необходимо, чтобы статьи:

— располагались вертикально внутри столбца-контейнера;
— занимали все доступное место.

Правило flex-direction: column, указанное для контейнера, вместе с правилом flex: 1, указанным для дочернего элемента, позволяет статье заполнить все свободное место по вертикали, при этом высота первых двух столбцов останется неизменной.

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

3. Делаем контейнер из статьи

Теперь, чтобы еще больше расширить наши возможности, давайте представим каждую статью в виде flexbox-контейнера. Каждый такой контейнер будет содержать:

— заголовок;
— параграф;
— информационную панель с именем автора и количеством комментариев;
— какую-нибудь адаптивную картинку.

Здесь мы используем Flexbox для того, чтобы «прижать» информационную панель к низу элемента. Вот, посмотрите, какой результат мы ожидаем получить.

.article < display: flex; flex-direction: column; flex-basis: auto; /* Устанавливает начальный размер элемента в зависимости от его содержимого */ >.article-body < display: flex; flex: 1; flex-direction: column; >.article-content < flex: 1; /* Содержимое заполняет все оставшееся место, тем самым прижимая информационную панель к нижней части */ >

Элементы внутри статьи расположены вертикально благодаря использованию правила flex-direction: column.

Также мы применили свойство flex: 1 к элементу article-content, тем самым растянув его на все свободное место и прижав article-info к низу. Высота столбцов в этом случае не имеет значения.

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

4. Добавляем несколько вложенных столбцов

На самом деле, нам нужно, чтобы левый столбец включал в себя еще несколько столбцов. Поэтому нам необходимо заменить второй элемент, отвечающий за статью, контейнером columns, который мы использовали ранее.

Поскольку мы хотим, чтобы первый вложенный столбец был шире, добавим к элементу класс nested-column, а в CSS укажем:

Теперь этот столбец будет вдвое шире второго.

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

5. Делаем первую статью с горизонтальным лейаутом

Первая статья у нас на самом деле большая. Дабы эффективно использовать место на экране монитора, давайте изменим ее ориентацию на горизонтальную.

.first-article < flex-direction: row; >.first-article .article-body < flex: 1; >.first-article .article-image

Свойство order в данном случае играет большую роль, поскольку оно позволяет изменять очередность HTML-элементов без изменения HTML-разметки. В действительности, article-image в коде идет перед элементом article-body, но ведет себя так, будто стоит после него.

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

6. Делаем адаптивный лейаут

Теперь все выглядит так, как мы хотели, хотя и немного сплющено. Давайте исправим это, добавив нашему лейауту гибкости.

Одной из замечательных вещей в Flexbox является то, что достаточно удалить правило display: flex в контейнере для того, чтобы полостью отключить его (Flexbox), в то время, как остальные его свойства (такие, как align-items или flex) останутся рабочими.

В результате, мы можем активировать адаптивный лейаут, задействовав Flexbox только тогда, когда в этом будет необходимость.

Итак, мы собираемся удалить display: flex из селекторов .columns и .column, вместо этого «запаковав» их в медиа-запрос:

@media screen and (min-width: 800px) < .columns, .column < display: flex; >> 

Вот и все! На экранах с маленьким разрешением все статьи будут располагаться друг над другом, а на экранах с разрешением свыше 800 пикселей — в два столбца.

7. Добавляем завершающие штрихи

Для того, чтобы лейаут выглядел более привлекательно на больших экранах, давайте добавим кое-какие CSS-твики:

@media screen and (min-width: 1000px) < .first-article < flex-direction: row; >.first-article .article-body < flex: 1; >.first-article .article-image < height: 300px; order: 2; padding-top: 0; width: 400px; >.main-column < flex: 3; >.nested-column < flex: 2; >> 

Содержимое первой статьи выровнено по горизонтали: текст расположен по левой стороне, а картинка — по правой. Также, главный столбец теперь стал шире (75%). То же самое касается и вложенного столбца (66%).

А вот и финальный результат!

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

Вывод

Теперь вы и сами видите, что использовать Flexbox в своих проектах можно даже не вникая во все его тонкости, и созданный лейаут — наглядный тому пример. По крайней мере, автор очень надеется на это.

Источник