селекторы в действии - шаг-2-наполнение контентом
Оригинал: Step 2 - drop in content
Следующий шаг подразумевает под собой наполнение контентом созданной ранее структуры.
Существуют устройства и браузеры в которых можно просмотреть содержание сайта без стилей, по этой причине мы
и наполняем контентом страницу заранее, чтоб увидеть как оно будет выглядеть без стилей.
При наполнение необходимо придерживатся простых правил, а именно:
- Основной заголовок сайта должен быть помещен в тег <h1>
- Для элементов навигации следует использовать списки <ol> или <ul>
- Обычное содержимое должно быть помещено в специальные теги, такие как например <p>
Наш код теперь выглядит так:
<body>
<div id=
"banner">
<h1>Site name</h1>
</div>
<div id=
"container">
<div id=
"container2">
<div id=
"navigation">
<ul>
<li><a href="#">Nav item 1</a></li>
<li><a href="#">Nav item 2</a></li>
<li><a href="#">Nav item 3</a></li>
</ul>
</div>
<div id=
"more">
<h3>Find out more</h3>
<p>Lorem ipsum..</p>
</div>
<div id=
"content">
<h2>Heading here</h2>
<p>Lorem ipsum..</p>
</div>
<div id="cleardiv"></div>
</div>
</div>
<div id=
"footer">
<ul>
<li><a href="#">Footer item 1</a></li>
<li><a href="#">Footer item 2</a></li>
<li><a href="#">Footer item 3</a></li>
<li><a href="#">Copyright © sitename</a></li>
</ul>
</div>
</body>
Просмотреть шаг 2
Перейти к шагу #3
Добавить комментарий
