ссылка с изображением - PullRequest
Новая
       6

ссылка с изображением

1 голос
/ 10 июня 2010

у меня есть список ссылок

  • link1
  • link2
  • link3

как добавить изображение, оставленное на каждой ссылке в стиле CSS, а не в тегах html?

Ответы [ 3 ]

1 голос
/ 10 июня 2010

Похоже, что вы действительно хотите • изменить круглую точку маркера на изображение, которое вы указали.Вот так:

<UL id="navlist">

#navlist
{
list-style: none;
}

#navlist li 
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
}
1 голос
/ 10 июня 2010

Вы также можете использовать свойство list-style-image для этого: 

li {
    list-style-image: url("/images/servers.png");
}

Это добавит изображение, а не круг, квадрат и т. Д. К каждому элементу списка.

1 голос
/ 10 июня 2010

Используйте CSS, чтобы подавить существующие маркеры списка (list-style:none), затем укажите свое собственное изображение, используя background, как в этом фрагменте: 

li {
 list-style: none;
 background: url(16-heart-red-xxs.png) no-repeat left center;
 ...

Для получения дополнительной информации см .: http://webdesign.about.com/od/css/a/aa012907.htm

EDIT:

См. Ниже новый исходный код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    li
    {
        list-style: none;
        background: url(/images/servers.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    </style>
</head>
<body>
    <ul>
        <li><a href="http://trading-it.ru/Category/1--.aspx">??????? ? ????????? ????????????</a></li>
        <li><a href="http://trading-it.ru/Category/2--.aspx">????? ??? ????????</a></li>
        <li><a href="http://trading-it.ru/Category/3--.aspx">??????????, ????????</a></li>

        <li><a href="http://trading-it.ru/Category/4--apple.aspx">????????? Apple</a></li>
        <li><a href="http://trading-it.ru/Category/10--.aspx">??????????? ???????????</a></li>
        <li><a href="http://trading-it.ru/Category/11--.aspx">???????????? ?????????????</a></li>
        <li><a href="http://trading-it.ru/Category/12--.aspx">????????? ? ??????? ???????</a></li>
        <li><a href="http://trading-it.ru/Category/13--.aspx">????????? ?????????</a></li>
        <li><a href="http://trading-it.ru/Category/14-.aspx">?????????</a></li>

        <li><a href="http://trading-it.ru/Category/15--.aspx">?????????? ? ??????</a></li>
        <li><a href="http://trading-it.ru/Category/16--.aspx">??????????????? ????????????</a></li>
        <li><a href="http://trading-it.ru/Category/17--.aspx">??????? ????????????</a></li>
        <li><a href="http://trading-it.ru/Category/21-111.aspx">111</a></li>
    </ul>
</body>
</html>
...