Новостной блок для 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
Просмотров: 67438
Правила перепечатки

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

• 

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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
Просмотров: 67437
Правила перепечатки

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

• 

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

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

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

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

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

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

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

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

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

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

Источник

Адаптивная сетка для новостных блоков

Фотографии в блоках имеют одинаковый размер. По причине того, что обычно все добавляют разные по формату картинки — лишнее просто отрезается.

Кнопка «подробнее» всегда находится на одном уровне у всех блоков в строке

Решение основано на css-свойстве display: grid

Пример:

Название новости

Еще текст статьи или новости

И еще текст статьи или новости, который не умещается на одной строчке

Название новости

Название новости, которое не умещается в одну строку

Еще текст статьи или новости

Название новости

Название новости

Еще текст статьи или новости

И еще текст статьи или новости

Название новости

HTML:

Название

Название

CSS:

Стили кнопки «подробнее» взяты из темы: «Оформление кнопок на CSS». При желании можно выбрать другие или использовать свои.

Смотрите также:

Сетка из шестиугольников на CSS

Адаптивная сетка из шестиугольников для фотогалереи или кратких информационных блоков

Параллакс-эффекты с библиотекой parallax.js

Небольшая, но удобная библиотека parallax.js для добавления тегам параллакс-эффектов

Секция с шестиугольными фотографиями

Вариант оформления блока с шестиугольными фотографиями разного размера

Добавить комментарий:

Комментарии:

Кстати говоря пример который приведен с css не совпадает. Изначально стоит 4fr который подразумевает 4 колонки.

Как ни странно с этого сайта много что юзаю, ставиться легко, а вот эту штуку не могу запилить. Не привязываются свойства. Сам блокнотик ругается, да и в браузере не привязывается. В частности начинается с grid-template-columns: 1fr 1fr 1fr 1fr; Пишет некорректное значение свойства.

Почему не корректное?

Хммм крутил вертел, не сразу полоски увидел которые копировались из кода css. Начал потихоньку оживлять. Раньше такого не было.

С grid был не очень знаком, довольно интересная вещь. Но в этом примере у меня почему-то дублируется все. Ставишь 1fr 1fr их в оконцовке 4 получается. Если брать пример разметки именно отсюда. Пробовал и чистые новые документы создавать, бесполезно уже как часа 3 репу чешу.

Как и полагалось я тут сам решил наворотить.На div поменять все это и т.д. Не знаю как это работает, проверяю вручную просто никак не получается. Копирую отсюда заново спустя какое то время, логику понимаю и т.д. Все развернулось на 3 столбца. Сайт огонь!

Источник