News HTML

Опубликовано 2013.07.10 в разделе Html

Если вам нужно создать страницу новостей на своём сайте - то сделать это достаточно просто. Каждая новость будет представлять собой отдельный логический блок. Это может быть как контейнер div, так и таблица. Пусть это будет div. Давайте сразу дадим этому html элементу класс news. Выглядеть это будет так:
  1. <div class="news">
  2. <!-- Содержимое новости-->
  3. </div>
А в содержимом новости будут её заголовок, фото, краткое содержание и ссылка на полную новость. Например:
  1. <div class="news">
  2. <h2>Всё новое из мира HTML</h2>
  3. <img src="/images/image-1.jpg" Alt="news html" class="image" />
  4. <p>Тут будет содержимое новости, это так называемый тизер, то есть кусок полной новости или любого другого материала.</p>
  5. <a href="/news.html">Читать полностью</a>
  6. </div>
Такая новость будет выглядеть некрасиво, поэтому добавим ей немного стилей: [css] div.news img.image{ width: 100px; height: 100px; float: left; margin: 5px; } [/css] Можно еще задать блоку с новостью ширину, фон и рамку. HTML цвета вы можете подобрать тут. [css] div.news{ background: #F7F5E5; border: 1px solid #B56B26; width: 500px; padding: 10px; display: inline-block; } [/css] Обратите внимание, рамку я задаю используя сокращенную форму записи, то есть не пишу отдельно border-color, border-style и border-width. Выглядеть это всё будет вот так.

Всё новое из мира HTML

news html
Тут будет содержимое новости, это так называемый тизер, то есть кусок полной новости или любого другого материала.
Читать полностью

0 Комментариев

Оставить комментарий

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте кубик