Руководство по HTML5
Адам Фриман
Создание сайдбаров (боковых панелей)
Элемент aside
обозначает содержание, которое имеет лишь косвенное отношение к окружающему контенту. Это похоже на боковую рубрику в книге или журнале. Содержание этого элемента имеет косвенное отношение к остальной части страницы, содержанию элементов article
или section
, но оно не является частью основного информационного потока. Это может быть дополнительный задний фон, набор ссылок на связанные статьи и так далее. В таблице 10-10 представлен элемент aside
.
Таблица 10-10: Элемент aside
Элемент | aside |
Тип элемента | Потоковый |
Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы, но этот элемент не может быть потомком элемента address |
Локальные атрибуты | Нет |
Содержание | Элементы style и потоковый контент |
Стиль тегов | Открывающий и закрывающий теги |
Новый в HTML5 | Да |
Изменения в HTML5 | N/A |
Соглашение по стилям | aside { display: block; } |
В листинге 10-8 показано, как используется элемент aside
. Я добавил сайдбар к одной из статей и указал стили, чтобы придать ему внешний вид простой боковой рубрики из журнала.
Листинг 10-8: Добавление элемента aside
и придание ему стилей
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
h1, h2, h3, article > footer {
background: grey;
color: white;
}
hgroup > h1 {
margin-bottom: 0;
margin-top: 0;
}
hgroup > h2 {
background: grey;
color: white;
font-size: 1em;
margin-top: 0px;
margin-bottom: 2px;
}
body > header *, body > footer * {
background: transparent;
color: black;
}
article {
border: thin black solid;
padding: 10px;
margin-bottom: 5px;
}
article > footer {
padding: 5px;
margin: 5px;
text-align: center;
}
article > footer > nav > a {
color: white;
}
body > article > section,
body > article > section > section {
margin-left: 10px;
}
body > header, body > footer {
border: medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
body > nav {
text-align: center;
padding: 2px;
border: dashed thin black;
}
body > nav > a {
padding: 2px;
color: black;
}
aside {
width: 40%;
background: white;
float: right;
border: thick solid black;
margin-left: 5px;
}
aside > section {
padding: 5px;
}
aside > h1 {
background: white;
color: black;
text-align: center;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">Fruits I Like</a></li>
<li><a href="#activitiesilike">Activities I Like</a></li>
</ul>
</nav>
</header>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
</header>
<aside>
<h1>Why Fruit is Healthy</h1>
<section>
Here are three reasons why everyone should eat more fruit:
<ol>
<li>Fruit contains lots of vitamins</li>
<li>Fruit is a source of fibre</li>
<li>Fruit contains few calories</li>
</ol>
</section>
</aside>
I like apples and oranges.
<section>
<h1 id="morefruit">Additional fruits</h1>
I also like bananas, mangoes, cherries, apricots, plums,
peaches and grapes.
<section>
<h1>More information</h1>
You can see other fruits I like <a href="fruitlist.html">here</a>
</section>
</section>
<footer>
<nav>
More Information:
<a href="http://fruit.org">Learn More About Fruit</a>
</nav>
</footer>
</article>
<article>
<header>
<hgroup>
<h1 id="activitiesilike">Activities I like</h1>
<h2>It hurts, but I keep doing it</h2>
</hgroup>
</header>
<section>
<p>
I like to swim, cycle and run. I am in training for my first
triathlon, but it is hard work.
</p>
<h1 id="tritypes">Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint, Olympic and so on.
<section>
<h1 id="mytri">The kind of triathlon I am aiming for</h1>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</section>
</section>
<footer>
<nav>
More Information:
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
</footer>
</article>
<footer id="mainFooter">
©2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
</footer>
</body>
</html>
Вы можете увидеть результат использования элемента aside
и дополнительных стилей на рисунке 10-11. Я добавил некоторый текст в документ, как показано на рисунке, чтобы сделать основной контекстный поток более очевидным.
Рисунок 10-11: Добавление элемента aside
и придание ему стилей