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


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



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


<ul> | Тег HTML

Тег <ul> устанавливает ненумерованный список




Тег <ul> устанавливает ненумерованный список.Применяя свойства CSS3 можно установить маркеры списку и дополнить иными визуальными эффектами.В примере показаны сразу 2 применяемых эффекта,без скриптов и картинок,на чистых свойствах CSS3.В HTML5 личных атрибутов не имеет.Тег поддерживает глобальные атрибуты,а так же атрибуты событий в HTML5




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





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


<!DOCTYPE html>
<html>
<head>
<title>Тег ul + эффекты CSS3</title>
<style>
ul {
padding:0;
margin:0;
}
li {
position:relative;
z-index:1;
overflow:hidden;
list-style:none;
padding:0;
margin:0 0 0.25em;
}
li a:link,
li a:visited {
display:block;
border:0;
padding-left:28px;
color:#02B6F1;
}
li a:hover,
li a:focus,
li a:active {
color:blue;
background:transparent;
}
li:before,
li:after,
li a:before,
li a:after {
content:"";
position:absolute;
top:50%;
left:0;
}
li a:before,
li a:after {
margin:-8px 0 0;
background:#02B6F1;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
background:blue;
}
.home a:before {
left:1px;
border-style:solid;
border-color:transparent;
border-width:8px 7px;
border-bottom-color:#02B6F1;
margin-top:-16px;
background:transparent;
}
.home a:after {
left:3px;
width:2px;
height:4px;
border-style:solid;
border-color:#02B6F1 #02B6F1 transparent;
border-width:3px 4px 0;
margin-top:0;
background:transparent;
}
.home a:hover:before,
.home a:focus:before,
.home a:active:before {
border-bottom-color:blue;
background:transparent;
}
.home a:hover:after,
.home a:focus:after,
.home a:active:after {
border-color:blue blue transparent;
}
.video a:before {
left:2px;
width:14px;
height:12px;
margin-top:-6px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
}
.video a:after {
left:14px;
border-style:solid;
border-width:5px 6px 5px 0;
border-color:transparent;
border-right-color:#02B6F1;
margin-top:-5px;
background:transparent;
}
.video a:hover:after,
.video a:focus:after,
.video a:active:after {
border-right-color:blue;
}
#nav li a {
    position: relative;
    transition: left .3s linear;
    -webkit-transition: left .3s linear;
    -o-transition: left .3s linear;
}
#nav li a:hover {
    left: 10px;
}
</style>
</head>
<body>
<ul id="nav">
<li class="home"><a href="#" title="Home">Home</a></li>
<li class="video"><a href="#" title="Video">Video</a></li>
<ul>
</body>
</html>

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





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





Категория: Блочные элементы | Добавил: IZOTOP (22.05.2012) | Автор: Меренков Михаил W
Просмотров: 1096 | Рейтинг: 0.0/0

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

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