Как сделать новостной блок в html
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.
Создание структуры
Мы намотали всю временную шкалу на элемент . Блок .cd-timeline-block представляет собой block содержимого. Мы, наконец, разделили изображение / значок и текстовое содержимое на 2 раздела divs .
Добавление стиля
Мы использовали селектор ::before селектором в абсолютном положении для создания вертикальной линии. Изображения / значки находятся в абсолютном положении, таким образом, было очень легко создать отзывчивую структуру, просто добавив маркер слева к текстовому контенту.
Были созданы 2 анимации вставки, как для изображения / значка, так и для текстового контента, которые видны только для пользователей настольных компьютеров. Чтобы анимация работала, нам пришлось создать 2 класса: .is-hidden , который используется для скрытия по умолчанию всех блоков контента, которые находятся вне области просмотра; При прокрутке пользователя мы добавляем класс .bounce-in к содержимому .cd-timeline-img и .cd-timeline , чтобы сделать элементы видимыми и запускать анимацию.
Обработка событий
Продолжаем изучать блочную верстку сайтов и верстать наш Правильный сайт, соответствующий самым строгим рекомендациям консорциума W3C.
Наш девиз — Идеальный XHTML и Кристально Чистый CSS!
Шутка :) Напоминаю, что мы изучаем основы верстки веб-сайтов для начинающих.
Сегодня мы практически соберём всю Главную страницу целиком, за исключением нижней части. Про подвал, он же футер (footer) я расскажу в последнем уроке цикла. А в этот раз мы прикрутим к нашему сайту блок новостей. Достаточно часто встречающаяся и по своему полезная часть сайта.
К сожалению, формат данных уроков не предполагает изучение реально работающих новостных скриптов на сайте. Мы ограничимся лишь визуальным оформлением списка новостей.
Верстка блока новостей на веб-сайте
Открываем нашу страничку index.html. Находим вот это место:
и следом сразу вставляем вот этот кусочек:
- Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!
- Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.
- У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседского пса Мухомора, чтобы тому завидно стало. Пляски намечаются до самого утра. При наличии на небе луны — будет весело.
Что мы тут видим? Во-первых, закрывающий тэг /div, который показывает, что область основного текста закончилась. Далее идёт маркированный список новостей с заголовком 3-го уровня.
Очистка обтекания (float) в верстке сайта
В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера.
Но в IE в таком случае появляются странные подёргивания фона у футера при наведении мышки на ссылки. Браузер словно хочет подпрыгнуть и заполнить все пустующие места, какие есть. Поэтому мы просто добавим эту строчку и не станем заморачиваться.
А теперь открываем наш лист стилей и допишем следующий код:
Здесь мы для начала поменяли фон для блока новостей, чтобы визуально отделить колонку от основного содержимого. Затем задали ширину блока, цвет для шрифта и обтекание справа.
С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка участников), также задан размер шрифта в 120%.
Вообще по-умолчанию браузеры сами определяют размеры для заголовков в зависимости от их ранга. То есть по логике вещей, заголовок 3-го уровня должен быть мельче 2-го. А у нас наоборот!
Это произошло потому, что заголовок списка участников находится в блоке основного текста, для которого мы задали размер всего шрифта в 0.8em.
Свои маркеры для маркированного списка
Следующим правилом мы задали для списка стиль маркеров. По-умолчанию любой браузер отображает маркеры в виде чёрных кружков. Но можно задать и другое отображение: окружностей, квадратов, без маркеров, или вообще свой собственноручно нарисованный маркер.
Как раз так мы и сделали. Нарисовали симпатишную зелёную галочку с размерами 14х17 пикселей и указали в стиле ссылку на неё — url(marker.jpg). Следом приписали слово inside. Что это значит?
Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Это не всегда есть гуд. Поэтому мы принудительно указали им быть inside, то есть внутри колонки с текстом.
Сохраняемся и смотрим, что вышло!
Окей! Продолжение следует. Остался последний урок, и наш первый сайтик будет полностью готов. Оставайтесь на связи!
Блочная верстка сайта, или верстка средствами тегов div (иногда называют дивная верстка). Блочный элемент представляет из себя прямоугольную зону, из таких прямоугольников создается блочный макет сайта. Блочная верстка на сегодняшний день является ведущей технологией для создания макетов и шаблонов сайтов
Верстать мы будем вот такой симпатичный сайт о Летающих Парасенгах.
Рисунок 1. Макет сайта
Задание 1. Создание шапки сайта
1. Создайте в блокноте новый документ с расширением css и сохраните его под именем style.css в папке div-verstka.
2. Создайте HTML-документ и сохраните его в той же папке под именем index.html. Почему именно index? Любой сервер, при заходе пользователя по адресу станет сразу же искать страницу с этим названием. Индексная страница для них всегда является главной, то есть – стартовой.
3. В самом начале HTML-документа впишите следующую строку (можно скопировать):
Определяет тип нашего документа. Любая грамотно сверстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания DOCTYPE. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга , просто не будет прочитана, потому как стандарты становятся жестче.
4. Следующий тэг . В нем содержится разная служебная информация: название страницы (то, что входит в ), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта информация записана в служебных тэгах meta, которые также не отображаются на странице в браузере.
5. Впишите на страничке следующую информацию (можно скопировать):
Первый мета-тэг показывает на кодировку сайта. Желательно пользовать UTF-8 с BOM, чтобы случайно у пользователей не вышли вместо красивого и грамотного текста всякие некорректные символы.
Второй мета-тэг – это краткое описание сайта. Именно эта строка первой покажется в результатах поиска Яндекса или Рамблера, если они, конечно, найдут наш сайт.
В третьем мета-тэге ключевые слова для поисковиков.
И наконец последняя строка – ссылка на лист стилей CSS. По умолчанию лист стилей могут использовать любые устройства вывода информации будь то экран монитора, принтер.. Но если мы хотим указать для какого устройства конкретно предназначена страница, то после атрибута type со значением text/сss должны будем указать дополнительный атрибут media со значениями:
print – для принтера,
screen – для монитора only и т.д.
Это понятно – если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки. Только полезная информация. И вот для такого случая пишется отдельный лист стилей, попроще.
Так выглядит эта конструкция блока на мобильном устройстве:
Где с вертикально веда автоматически переходит в горизонтальный, что все корректно показано, это описание и полностью функционал, который изначально закрепляется для работы.
Первый блог
Мы протестировали SEO и PPC одновременно для нескольких наших клиентов из SaaS и электронной коммерции, сделано правильно, вы получите ROI, как только они начнут работать.
Второй блог
Если вам понравилась такая структура блока, то безусловно на своем сайте вы можете все переделать под свои операторы. Делается для того, чтобы все работало, это вывод нужного снимка, что идет под заданный материал, а также оригинальное описание.
Но в этом стиле дизайн больше сделано для современного дизайна, чтоб раз написать и поставить эти блоки под информационный поток на интернет площадке, как сайт или блог.
Вот так у меня получилось, где на этот материал демонстрация на сайте в каталоге файлов, что должно корректно подойти под мобильные аппараты. Также классы изменил, чтоб не с кем они не сношались, переменил отступы, почему то они стали не работать, что просветился, и поставил другой элемент.
Читайте также: