Основной блок

В элементе content расположим ленту анонсов статей. Для каждого анонса используем пару элементов: заголовок и короткий текст. Для заголовка применим тэг H2, специально предназначенный для заголовков второго уровня. Для текстов используем знакомый нам DIV. Классы этих элементов соответственно назовем sub-title и annonce.

        <h2 class="sub-title">Заголовок текста</h2>
        <div class="annonce">Анонс текста</div>

Создадим стили. Для заголовка используем шрифт жирный, семейства Tahoma.

В этот раз зададим относительный размер 1.3em. Это означает, что шрифт будет в 1,3 раза больше, чем тот, который был бы по умолчанию.

Отступы сверху и слева будут побольше:

  margin: 20px 0 10px 20px; 

C o p y r i g h t a r u l . r u
Для «оживления» заголовка используем картинку

Скачайте ее себе на компьютер и положите в папку, в которой находится mysite.html.

Задействуйте эту картинку слева от заголовка следующим способом

  background: url(h2icon.gif) no-repeat; 
  padding: 3px 0 5px 40px;

По умолчанию картинка располагается слева, и для нее специально оставлено поле побольше.

C o p y r i g h t a r u l . r u
Для самого текста используйте растягивание по ширине и отступ для первой строки:

  text-align: justify; 
  text-indent: 20px;

C o p y r i g h t a r u l . r u
C o p y r i g h t a r u l . r u
Элемент content в сборе будет таким:

      <div id="content" style="display:table-cell; vertical-align:top; padding:5px 5px 5px 15px; width:530px;">
        Content
        <style type="text/css">
          .sub-title {background: url(h2icon.gif) no-repeat; font: bold 1.3em Tahoma; margin: 20px 0 10px 20px; padding: 3px 0 5px 40px;}
          div.annonce {text-align: justify; text-indent: 20px;}
        </style>
        <h2 class="sub-title">Как самому создать html-страницу</h2>
        <div class="annonce">
          В этой статье рассказывается, как самому создать html-страницу своими руками. Знания и опыт, полученные в результате этого, пригодятся потом для создания новых и новых страниц.
        </div>
        <h2 class="sub-title">Как отформатировать свою страницу</h2>
        <div class="annonce">
          Создать страницу - это лишь первый шаг на пути ваших знаний к сердцам читателей. Следующий шаг - это оформление, которое позволит вашей странице привлечь внимание. 
        </div>
      </div>

Файл mysite6.html

C o p y r i g h t a r u l . r u

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

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