<aside> | Тег HTML - Справочник HTML + HTML5 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник HTML » Документы


ОбъектыБлочные элементы
ТаблицыСтрочные элементы
СимволыФорматирование
ДокументыИзображения
ЗвукФормы
СпискиУстаревшие теги
ФреймыСкрипты



Адаптивный сайт - aTmpl


<aside> | Тег HTML

Тег <aside> создаёт дополнительное поле




Тег <aside> служит для добавления на страницу дополнительного поля.В дополнительном поле может содержатся что угодно.Для дополнительного поля нужно прописывать индивидуальные стили.Тег поддерживает глобальные атрибуты в HTML5




Синтаксис тега <aside> ( закрывающий тэг обязателен )


<aside>Элемент</aside>

Тег работает в браузерах





Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тег aside в HTML5</title>
<style>
article {
display:block;
width:50%;
height:auto;
float:left;
background-color:green;
padding:10px;
-webkit-box-shadow:11px -9px 3px rgba(50, 50, 198, 0.7);
-moz-box-shadow:11px -9px 3px rgba(50, 50, 198, 0.7);
box-shadow:11px -9px 3px rgba(50, 50, 198, 0.7);
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
aside {
display:block;
width:30%;
height:auto;
margin:1px 5px auto auto;
background-color:blue;
padding:10px;
-webkit-box-shadow:11px -9px 3px rgba(50, 196, 41, 0.7);
-moz-box-shadow:11px -9px 3px rgba(50, 196, 41, 0.7);
box-shadow:11px -9px 3px rgba(50, 196, 41, 0.7);
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
nav {
color:green;
font-weight:bold;
}
nav a:link {
text-decoration:blink;
}
</style></head>
<body>
<header>
<h3>
<a href="/board/7-1-0-28">Тэг aside</a>
</h3>
</header>
<article>
Тег aside служит для добавления на страницу дополнительного поля.
В дополнительном поле может содержатся что угодно.
Для дополнительного поля нужно прописывать индивидуальные стили.
</article>
<aside>
<nav>
<ul>
<li><a href="#">Пункт №1</a></li>
<li><a href="#">Пункт №2</a></li>
<li><a href="#">Пункт №3</a></li>
<li><a href="#">Пункт №4</a></li>
<li><a href="#">Пункт №5</a></li>
</ul>
</nav>
</aside>
</body>
</html>

Пример в действии





Русские шрифты





Категория: Документы | Добавил: IZOTOP (03.06.2012) | Автор: Меренков Михаил W
Просмотров: 964 | Теги: второй блок, меню с боку, дополнительное поле | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]