Создать нумерованный список конечно не проблема. Но вот создать стильный и красиво оформленный нумерованный список сможет наверное не каждый. Но вы не отчаивайтесь! Сейчас мы все это быстро исправим.
Так вот сегодня мы с вами и создадим красивый нумерованный список с помощью технологий css3. Нумерованный список часто используется на сайтах для вывода информации с автоматической нумерацией строк. Пример простого нумерованного списка. я думаю приводить нет необходимости замащивать страницу ненужным кодом. На этом вступление завершаю и переходим к созданию красивого нумерованного списка с css3 оформлением.
Смотрим пример реализации
Демо демонстрация
Код HTML
<div class="container">
<ol class="ordered-list">
<li>Первая строка нумерованного списка</li>
<li>Вторая строка</li>
<li>3 строка</li>
<li>Нумерованный список строка 4</li>
<li>Нумерованный список строка 5</li>
<li>Создание красивого списка</li>
<li>Красивый нумерованный список</li>
<li>Стилизация css3 нумерованный список</li>
</ol>
</div>
Код CSS3
.container {
width: 500px;
margin: auto;
background: #FFFFFF;
padding: 10px 20px;
margin-top: 20px;
}
ol.ordered-list {
counter-reset:li; /* Указываем, что это нумерованный список */
margin-left:0; /* Левый отступ */
padding-left:0; /* Левый padding */
}
ol.ordered-list > li {
position:relative; /* Позиционирование */
margin:0 0 6px 2em; /* Даем каждому пункту списка левый край, чтобы создать место для чисел */
padding:4px 8px; /* Добавляем некоторый интервал вокруг содержания */
list-style:none; /* Отключаем страндартную нумерацию */
border-top:2px solid #ccc;
background:#fff;
cursor: default
}
ol.ordered-list > li:before {
content:counter(li); /* Используем для нумерации */
counter-increment:li; /* Вставляем 1 */
/* Позиция номера */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Разметка отступа по отношению к создержимому страницы */
margin-right:8px;
padding:4px;
border-top:2px solid #ccc;
color:#fff;
background:#ccc;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
ol.ordered-list > li:hover, ol > li:hover {
border-color: rgba(128,104,64,1);
background-color: #f5f5f5; }
ol.ordered-list > li:hover:before, ol > li:hover:before {
background-color: rgba(128,104,64,1);
border-color: rgba(128,104,64,1); }
.ordered-list li ol,
.ordered-list li ul {margin-top:6px;}
.ordered-list ol ol li:last-child {margin-bottom:0;
Как вы могли наблюдать html и css3 код занял совсем немного места, но зато мы стилизовали нумерованный список красиво и не привычно.