В этой статье узнаете, как убрать стандартные маркеры списка, а вот вместо них вывести свое изображение, которое может изначально тематическими значится. Но безусловно, что оно изначально идет ярким, чтоб можно подчеркнуть маркированный список.
Здесь по дизайну выстраиваем каркас под списки, который будет светлый, также ему закруглим углы, кто-то может его оформить под свой стиль. Здесь считаю главным, чтоб он выводил ту информацию, которая соответствует или заинтересует пользователя.
Если по умолчанию идет простые точки, то здесь их кардинально изменяем на картинку. В нашем случай простые зеленые галочки, которые отлично смотрятся на темном и светлом фоне.
Так реально выглядит список:
Установка:
HTML
Код
<center><h1>Маркированный список с изображением</h1></center>
<div class="vesugtasp-gotuntklas">
<ul>
<li>
ZorNet.Ru - портал для вебмастера 1</li>
<li>ZorNet.Ru - портал для вебмастера 2</li>
<li>ZorNet.Ru - портал для вебмастера 3</li>
<li>ZorNet.Ru - портал для вебмастера 4</li>
<li>ZorNet.Ru - портал для вебмастера 5</li>
</ul>
</div>
CSS
Код
ul {
list-style:url("http://zornet.ru/ABVUN/Abas/degakolas/list.png");
padding: 12px 34px;
}
.vesugtasp-gotuntklas {
background: #eae6e6;
border-radius: 7px;
margin: 35px auto 0;
width: 765px;
box-shadow: 0 1px 3px 0px #292727;
}
@media screen and (max-width: 765px) {
.vesugtasp-gotuntklas {
width:100%;
border-radius: 0;
}
}
Здесь уже самостоятельно подбираем изображение, как говорилось, чтоб они привлекали внимание и были как можно ближе к тематике сайта.
Нужно изначально знать, это говорится про размер картинки, который должен быть небольшим, но, а лучше выставить 16×16 пикселей. Остается поставить ссылку в нужное место стилистике CSS, где остается прописать прямой стиль до картинки.
Демонстрация
