Вверх страницы

Вниз страницы

Forix ФоРуМ рунета

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Номерация в круге


.т5. Номерация в круге

Сообщений 1 страница 2 из 2

1

К примеру мы хотим вывести номерацию наших сайтов (описаний, реклам,рецептов итд итп).
Сначала покажу как это будет выглядеть. Чтобы вы понимали о чём речь http://sh.uploads.ru/t/1muZY.gif
Итак ВОТ КАК ЭТО ВЫГЛЯДИТ

https://forumupload.ru/uploads/0019/ef/02/2/t72485.png

Теперь поняли  http://s7.uploads.ru/t/m08n9.gif

Теперь я Вам покажу что и как http://s7.uploads.ru/t/m08n9.gif

Итак. Ставим номерацию тугда где Вам надо (таким способом)

HTML

Код:
<ol>
<li> for.ixbb.ru </li>
<li> onlov.best </li>
<li> samo.mybb.online</li>
</ol>

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;
border-radius: 50px;
}

На этом впринципе и всё --
Будут вопросы. Пишите в теме
[good]

0

2

И вот Вам приятный бонус
http://s7.uploads.ru/t/m08n9.gif Ловим

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>

В итоге у нас получилось так http://sh.uploads.ru/t/1muZY.gif

https://forumupload.ru/uploads/0019/ef/02/2/t63807.png

Пользуемся http://s9.uploads.ru/t/nOydv.gif радуемся!

[good]

0


Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » .т5. Номерация в круге


создать форум