Алфавитный список ABCV
Этот алфавитный список выглядит минималистично и занимает мало места. Из особенностей - буквы выстроены в линии, каждый из кругов с буквами в линии имеет свой отдельный селектор, так что при желании их можно покрасить в разные цвета, задать разные стилевые параметры. В стиле рассчитано место для 6 кругов в одной линии, в каждом из которых написано 2 буквы. Для кругов с тремя буквами имеется отдельные стилевые настройки. Для списков на русском и на английском CSS и HTMl чуть-чуть разные.
[html]<style>
.ABCV{/*блок целиком*/
width:500px; /*ширина*/
margin:auto; /*отступы автоматические*/
line-height:16px; /*высота линий*/
}
#LTRSV {/*Буквы блок полностью*/
width:500px; /*ширина*/
height:35px; /*высота*/
margin-bottom:25px; /*отступ снизу*/
text-align:center; /*текст по центру*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}
#LTRSV:hover {/*Наведение на буквы*/
height:160px; /*высота появляющегося контейнера*/
color:white; /*цвет шрифта*/
}
#LTRSV span{/*чёрная полоса*/
display:block;
margin-top:-25px; /*отступ сверху*/
height:5px; /*высота линии*/
background:black; /*цвет линии*/
}
.LTRSV {/*круглые области на фоне букв*/
transition:all ease 0.35s; -webkit-transition:all ease 0.35s; /*анимация*/
position:relative; /*позиционирование*/
z-index:3;
display:inline-block;
vertical-align:top; /*вертикальное выравнивание*/
margin:0 15px; /*отступы*/
height:33px; /*высота*/
width:35px; /*ширина*/
padding:12px 5px 0px 5px; /*отступы*/
border-radius:35px; /*закругление краём*/
text-align:center; /*по центру*/
color:white; /*цвет шрифта*/
background:teal; /*фоновый цвет*/
}
.LTRSV div {/*контейнер при наведении на буквы - настройки*/
position:absolute; /*позиционирование*/
z-index:1;
margin-left:-45px; /*отступ слева*/
margin-top:25px; /*отступ сверху*/
width:500px; /*ширина*/
height:0; /*высота ноль - то есть его не видно*/
overflow:hidden;
background:rgba(250,250,250,0.3); /*цвет фона*/
color:black; /*цвет шрифта*/
text-align:left; /*текст слева*/
font-size:11px; /*размер шрифта*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}
.LTRSV:hover div{/*контейнер при наведении на буквы - появляется*/
width:500px; /*ширина*/
height:135px; /*высота*/
}
.LTRSV p {/*блок с текстом в сером конейнере*/
width:490px; /*ширина*/
height:125px; /*высота*/
padding:5px; /*отступ по всем четырём краям*/
overflow:auto;
transform:translateY(-125px); -webkit-transform:translateY(-125px); /*анимация*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}
.LTRSV:hover p{/*блок с текстом в сером конейнере при наведении мышью на буквы*/
transform:translateY(0px); -webkit-transform:translateY(0px); /*анимация*/
}
.VII div{/*двигаем второй круг с буквами*/
position:absolute; /*позиционирование*/
margin-left:-120px; /*отступ слева*/
}
.VIII div{ /* двигаем 3й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-195px; /*отступ слева*/
}
.VIV div{ /* двигаем 4й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-270px; /*отступ слева*/
}
.VV div{ /* двигаем 5й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-345px; /*отступ слева*/
}
.VVI div{/* двигаем 6й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}
.STUV {/*Блок с буквами S T U*/
font-size:12px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.STUV div{ /* двигаем Блок с буквами S T U */
position:absolute; /*позиционирование*/
margin-left:-270px;/*отступ слева*/
}
.XYZV {/*Блок с буквами XYZ*/
font-size:12px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.XYZV div{/* двигаем Блок с буквами XYZ */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}
</style>
<div class="ABCV">
<!-- ПЕРВАЯ ЛИНИЯ --><div id="LTRSV">
<!-- A B --><div class="LTRSV">A B<!-- КОНТЕНТ В БЛОКЕ A B --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- C D --><div class="LTRSV VII">C D<!-- КОНТЕНТ В БЛОКЕ C D --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- E F --><div class="LTRSV VIII">E F<!-- КОНТЕНТ В БЛОКЕ E F --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- G H --><div class="LTRSV VIV">G H<!-- КОНТЕНТ В БЛОКЕ G H --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- I J --><div class="LTRSV VV">I J<!-- КОНТЕНТ В БЛОКЕ I J --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- K L --><div class="LTRSV VVI">K L<!-- КОНТЕНТ В БЛОКЕ K L --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ПЕРВОЙ ЛИНИИ БУКВ --><span></span></div><br/>
<!-- ВТОРАЯ ЛИНИЯ --><div id="LTRSV">
<!-- M N --><div class="LTRSV">M N<!-- КОНТЕНТ В БЛОКЕ M N --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- O P --><div class="LTRSV VII">O P<!-- КОНТЕНТ В БЛОКЕ O P --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Q R --><div class="LTRSV VIII">Q R<!-- КОНТЕНТ В БЛОКЕ Q R --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- S T U --><div class="LTRSV STUV">S T U<!-- КОНТЕНТ В БЛОКЕ S T U --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- V W --><div class="LTRSV VV">V W<!-- КОНТЕНТ В БЛОКЕ V W --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- X Y Z --><div class="LTRSV XYZV">X Y Z<!-- КОНТЕНТ В БЛОКЕ X Y Z --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ВТОРОЙ ЛИНИИ БУКВ --><span></span></div></div>[/html]
[html]<style>.ABCV{/*блок целиком*/
width:500px; /*ширина*/
margin:auto; /*отступы автоматические*/
line-height:16px; /*высота линий*/
}
#LTRSV {/*Буквы блок полностью*/
width:500px; /*ширина*/
height:35px; /*высота*/
margin-bottom:25px; /*отступ снизу*/
text-align:center; /*текст по центру*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}
#LTRSV:hover {/*Наведение на буквы*/
height:160px; /*высота появляющегося контейнера*/
color:white; /*цвет шрифта*/
}
#LTRSV span{/*чёрная полоса*/
display:block;
margin-top:-25px; /*отступ сверху*/
height:5px; /*высота линии*/
background:black; /*цвет линии*/
}
.LTRSV {/*круглые области на фоне букв*/
transition:all ease 0.35s; -webkit-transition:all ease 0.35s; /*анимация*/
position:relative; /*позиционирование*/
z-index:3;
display:inline-block;
vertical-align:top; /*вертикальное выравнивание*/
margin:0 15px; /*отступы*/
height:33px; /*высота*/
width:35px; /*ширина*/
padding:12px 5px 0px 5px; /*отступы*/
border-radius:35px; /*закругление краём*/
text-align:center; /*по центру*/
color:white; /*цвет шрифта*/
background:teal; /*фоновый цвет*/
}
.LTRSV div {/*контейнер при наведении на буквы - настройки*/
position:absolute; /*позиционирование*/
z-index:1;
margin-left:-45px; /*отступ слева*/
margin-top:25px; /*отступ сверху*/
width:500px; /*ширина*/
height:0; /*высота ноль - то есть его не видно*/
overflow:hidden;
background:rgba(250,250,250,0.3); /*цвет фона*/
color:black; /*цвет шрифта*/
text-align:left; /*текст слева*/
font-size:11px; /*размер шрифта*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}
.LTRSV:hover div{/*контейнер при наведении на буквы - появляется*/
width:500px; /*ширина*/
height:135px; /*высота*/
}
.LTRSV p {/*блок с текстом в сером конейнере*/
width:490px; /*ширина*/
height:125px; /*высота*/
padding:5px; /*отступ по всем четырём краям*/
overflow:auto;
transform:translateY(-125px); -webkit-transform:translateY(-125px); /*анимация*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}
.LTRSV:hover p{/*блок с текстом в сером конейнере при наведении мышью на буквы*/
transform:translateY(0px); -webkit-transform:translateY(0px); /*анимация*/
}
.VII div{/*двигаем второй круг с буквами*/
position:absolute; /*позиционирование*/
margin-left:-120px; /*отступ слева*/
}
.VIII div{ /* двигаем 3й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-195px; /*отступ слева*/
}
.VIV div{ /* двигаем 4й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-270px; /*отступ слева*/
}
.VV div{ /* двигаем 5й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-345px; /*отступ слева*/
}
.VVI div{/* двигаем 6й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}
.STUV {/*Блок с буквами СТУ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.STUV div{ /* Блок с буквами СТУ */
position:absolute; /*позиционирование*/
margin-left:-195px; /*отступ слева*/
}
.FHCV {/*Блок с буквами ФХЦ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.FHCV div{ /* Блок с буквами ФХЦ */
position:absolute; /*позиционирование*/
margin-left:-270px; /*отступ слева*/
}
.CHSHV {/*Блок с буквами ЧШЩ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.CHSHV div{ /* Блок с буквами ЧШЩ */
position:absolute; /*позиционирование*/
margin-left:-345px; /*отступ слева*/
}
.EUYV {/*Блок с буквами ЭЮЯ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.EUYV div{/* двигаем Блок с буквами ЭЮЯ */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}</style>
<div class="ABCV">
<!-- ПЕРВАЯ ЛИНИЯ --><div id="LTRSV">
<!-- A Б --><div class="LTRSV">А Б<!-- КОНТЕНТ В БЛОКЕ A Б --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- В Г --><div class="LTRSV VII">В Г<!-- КОНТЕНТ В БЛОКЕ В Г --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Д Е --><div class="LTRSV VIII">Д Е<!-- КОНТЕНТ В БЛОКЕ Д Е --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Ж З --><div class="LTRSV VIV">Ж З<!-- КОНТЕНТ В БЛОКЕ Ж З --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- И К --><div class="LTRSV VV">И К<!-- КОНТЕНТ В БЛОКЕ И К --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Л М --><div class="LTRSV VVI">Л М<!-- КОНТЕНТ В БЛОКЕ Л М --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ПЕРВОЙ ЛИНИИ БУКВ --><span></span></div><br/>
<!-- ВТОРАЯ ЛИНИЯ --><div id="LTRSV">
<!-- Н О --><div class="LTRSV">Н О<!-- КОНТЕНТ В БЛОКЕ Н О --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- П Р --><div class="LTRSV VII">П Р<!-- КОНТЕНТ В БЛОКЕ П Р --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- С Т У --><div class="LTRSV STUV">С Т У<!-- КОНТЕНТ В БЛОКЕ С Т У --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Ф Х Ц --><div class="LTRSV FHCV">Ф Х Ц<!-- КОНТЕНТ В БЛОКЕ Ф Х Ц --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- Ч Ш Щ--><div class="LTRSV CHSHV">Ч Ш Щ<!-- КОНТЕНТ В БЛОКЕ Ч Ш Щ --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Э Ю Я --><div class="LTRSV EUYV">Э Ю Я<!-- КОНТЕНТ В БЛОКЕ Э Ю Я --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ВТОРОЙ ЛИНИИ БУКВ --><span></span></div></div>[/html]
Ксс-код ставим в Свой стиль (но возможно понадобится немного корректировок), в хтмл-верх в тегах <style>:
Или отдельным файлом:
HTML-код надо ставить или в сообщения (с помощью дополнительно - html в сообщениях), или на отдельную страницу.
© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD
