Всем приветы и ответы!
В этом небольшом решении мы будет стилизовать благодаря знаниям HTML-CSS тегов и стилей, облако тегов! Данное решение подойдет как для интернет магазинов, так и для обычных сайтов и блогов!
HTML код
В данном коде нет ничего сложного!
Обычная div ячейка в которой размещены ссылки с разными классами:
<div class="oblako-tegov">
<a class="teg1" href="#">книги</a>
<a class="teg2" href="#">посуда</a>
<a class="teg3" href="#">компьютеры</a>
<a class="teg4" href="#">телефоны</a>
<a class="teg5" href="#">ёлка</a>
<a class="teg1" href="#">дети</a>
<a class="teg2" href="#">машина</a>
<a class="teg3" href="#">игры</a>
<a class="teg4" href="#">жизнь</a>
<a class="teg5" href="#">еда</a>
</div>
CSS стили
/* Разноцветное облако тегов
-------------------------------------------*/
.oblako-tegov {
float:left;
width:40%;
background-color: #f6f6f6;
padding:25px 5% 25px 5% ;
margin: 30px 0px 30px 0px ;
}
.oblako-tegov a {
float:left;
padding:5px 10px 5px 10px ;
}
.oblako-tegov a:hover {color: #fff;}
a.teg1 {color: #912600;}
a.teg1:hover {background-color: #cc3500;}
a.teg2 {color: #877900;}
a.teg2:hover {background-color: #d8c100;}
a.teg3 {color: #1d6c01;}
a.teg3:hover {background-color: #2daf00;}
a.teg4 {color: #004e6b;}
a.teg4:hover {background-color: #007ead;}
a.teg5 {color: #430069;}
a.teg5:hover {background-color: #7600b9;}
не забудьте изменить следующие параметры стилей для своего проекта в интернете:
width:40% — ширина ячейки
padding:25px 5% 25px 5% — боковые отступы
У вас картинка не помещается на экран смартфона и страница с примером уехала куда-то в сторону.
Спасибо, исправил, обновил кеш, должно теперь работать как нужно.