[英]link with image
我有鏈接列表
如何添加留有CSS樣式而不是html標簽的每個鏈接上的圖像?
使用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
編輯:
參見下面的新源代碼:
<!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>
聽起來,您真正想要做的是將•圓形項目符號點更改為指定的圖像。 像這樣:
<UL id="navlist">
#navlist
{
list-style: none;
}
#navlist li
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
}
您還可以為此使用list-style-image
屬性:
li {
list-style-image: url("/images/servers.png");
}
這會將圖像而不是圓形,正方形等添加到列表的每個元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.