BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Как поменять стандартную нумерацию в списке на свой стиль, используя CSS

Как поменять стандартную нумерацию в списке на свой стиль, используя CSS

2019-03-19 / Вр:20:50 / просмотров: 757

Всем привет!
В сегодняшней статье я расскажу, как поменять стандартную нумерацию в списке на свой стиль, используя CSS.
Все вы знакомы с тегом <ol> в HTML и прекрасно знаете, о какой нумерации я говорю.
Если вы не догадываетесь, тогда ознакомьтесь вот с этой статьей.

Итак, поменяем небольшим кодом CSS внешний вид нумерации списка.

Стандартный код в HTML списка:

<ol>
<li> BlogGood.ru </li>
<li> StepkinBLOG.ru </li>
<li> web-reactive.com</li>
</ol>

Результат:

  1. BlogGood.ru
  2. StepkinBLOG.ru
  3. web-reactive.com

Если добавите вот такой CSS код:

ol{
counter-reset: myCounter;
}

li{
list-style: none;
}

li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}

В результате на экране вы увидите симпатичные квадратики:

Как поменять стандартную нумерацию в списке на свой стиль, используя CSS

Можно и заменить квадратики на круги, используя правила  border-radius:

ol{
counter-reset: myCounter;
}

li{
list-style: none;
}

li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50px;
}

В результате вы увидите:

Как поменять стандартную нумерацию в списке на свой стиль, используя CSS

И напоследок приятный бонус код.

В CSS:

ol {
counter-reset:myCounter;
margin-left:0;
padding-left:5px;
color: rgb(100,100,100);
}

li {
position: relative;
padding-left: 3em;
margin: 0.45em 0;
list-style: none;
line-height: 1.8em;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

li:hover {
color: rgb(0,0,0);
}

li:before {
content:counter(myCounter);
counter-increment:myCounter;
position:absolute;
top:0;
left:0;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
padding:0px;
color:#fff;
background:#2980b9;
font-weight:bold;
text-align:center;
border-radius: .9em;
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

li:hover:before {
background-color: #2ecc71;
}

li li:before{
background-color: #3498db;
}

li:after {
position: absolute;
top: 2.1em;
left: 0.9em;
width: 2px;
height: calc(100% - 2em);
content: '';
background-color: rgb(203, 203, 203);
z-index: 0;
}

li:hover:after {
background-color: #2ecc71;
}

li li {
font-size: 0.8em;
}

В HTML:

<h1>Рецепт</h1>
<ol>
<li>
В большой сковороде разогрейте растительное масло.
</li>
<li>
В большой миске смешайте ингредиенты:
<ol>
<li>5 тертых картофелин</li>
<li>2 яйца (взбить)</li>
<li>1 луковица</li>
<li>3 ст.л. муки</li>
<li>соль и перец по вкусу</li>
</ol>
</li>

<li>
Выкладывайте картофельное тесто большой ложкой на сковороду и слегка прижмите оладьи лопаточкой. Жарьте примерно 4 минуты с каждой стороны, пока не подрумянятся.
</li>
<li>
Сразу подавайте на стол
</li>
</ol>

В результате:

Как поменять стандартную нумерацию в списке на свой стиль, используя CSS

Буду рад, если эта информация была вам полезной!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4540