列表用background-image無法添加圖片標(biāo)簽
請(qǐng)問,為什么我的新聞列表加不了圖標(biāo)?謝謝
HTML部分
<!doctype?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"
?content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<link?rel="stylesheet"?href="css/main.css"?type="text/css"/>
????<script?src="js/setHomeSetFav.js"?type="text/javascript"?charset="GB2312"></script>
????<script?src="js/myfocus-2.0.1.min.js"?type="text/javascript"></script>
????<script?src="js/mf_fancy.js"?type="text/javascript"></script>
????<link?rel="stylesheet"?href="css/mf_fancy.css"?type="text/css"/>
????<script?type="text/javascript">
?myFocus.set({
????????????id:'picBox'
?})
????</script>
</head>
<body>
<div?class="top">
????<div?class="top_content">
????????<ul>
????????????<li><a?href="#">聯(lián)系我們</a></li>
????????????<li><a?href="#"?onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
????????????<li><a?href="#"?onclick="SetHome(window.location)">設(shè)為首頁</a></li>
????????</ul>
????</div>
</div><!--top結(jié)束-->
<div?class="wrap">
????<div?class="logo">
????????<div?class="logo-left"><img?src="images/logo.jpg"?alt="慕課網(wǎng)"></div>
????????<div?class="logo-right"><img?src="images/tel.jpg"?alt="服務(wù)熱線">24小時(shí)服務(wù)熱線:<span?class="tel">123-456-7890</span></div>
????</div><!--logo結(jié)束-->
?<div?class="clear"></div>
????<div?class="nav">
????????<div?class="nav-left"></div>
????????<div?class="nav-mid">
????????????<div?class="nav-mid-left">
????????????????<ul>
????????????????????<li><a?href="#">首頁</a></li>
????????????????????<li><a?href="list.html">關(guān)于慕課</a></li>
????????????????????<li><a?href="list.html">新聞動(dòng)態(tài)</a></li>
????????????????????<li><a?href="list.html">課程中心</a></li>
????????????????????<li><a?href="list.html">在線課程</a></li>
????????????????????<li><a?href="list.html">人才招聘</a></li>
????????????????</ul>
????????????</div>
????????????<div?class="nav-mid-right">
????????????????<form?action=""?method="post">
????????????????????<input?type="text"?class="search-text"/>
????????????????</form>
????????????</div>
????????</div><!--nav-mid結(jié)束-->
?<div?class="nav-right"></div>
????</div><!--nav結(jié)束-->
?<div?class="clear"></div>
????<div?class="ad"?id="picBox">
????????<div?class="loading"><img?src="images/loading.gif"?alt="圖片加載中"/></div>
????????<div?class="pic">
????????????<ul>
????????????????<li><img?src="images/ad2.jpg"?></li>
????????????????<li><img?src="images/ad3.jpg"?></li>
????????????????<li><img?src="images/ad4.jpg"?></li>
????????????</ul>
????????</div>
????</div><!--ad結(jié)束-->
?<div?class="main">
????????<div?class="news">
????????????<div?class="title">
????????????????<h2?class="title-left">新聞中心</h2><span?class="title-right"><a?href="news.html">More>></a></span>
????????????</div><!--title結(jié)束-->
?<div?class="pic-news">
????????????????<img?src="images/news.jpg"?>
????????????????<h2><a?href="news.html">慕女神喊你來表白!</a></h2>
????????????????<p>活動(dòng)時(shí)間:5月20號(hào)-5月25號(hào)<br/>
?獲獎(jiǎng)公布時(shí)間:5月26日<br/>
????????????????????<a?href="news.html">Learn?More>></a>
????????????????</p>
????????????</div><!--pic-news結(jié)束-->
?<div?class="news-list">
????????????????<ul>
????????????????????<li><a?href="news.html">【慕客訪談?用戶篇】“有為屌絲”在路上</a><span>2014-06-01</span></li>
????????????????????<li><a?href="news.html">【有獎(jiǎng)活動(dòng)】給父親的三行書信</a><span>2014-06-01</span></li>
????????????????????<li><a?href="news.html">《程序猿，請(qǐng)曬出你的童年》活動(dòng)獲獎(jiǎng)公告</a><span>2014-05-30</span></li>
????????????????????<li><a?href="news.html"?title="訪談">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a><span>2014-05-28</span></li>
????????????????</ul>
????????????</div><!--news-list結(jié)束-->
?</div><!--news結(jié)束-->
?<div?class="course"></div><!--course結(jié)束-->
?<div?class="sidebar"></div><!--sidebar結(jié)束-->
?</div><!--main結(jié)束-->
</div><!--wrap結(jié)束-->
</body>
</html>
CSS部分
<!doctype?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"
?content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<link?rel="stylesheet"?href="css/main.css"?type="text/css"/>
????<script?src="js/setHomeSetFav.js"?type="text/javascript"?charset="GB2312"></script>
????<script?src="js/myfocus-2.0.1.min.js"?type="text/javascript"></script>
????<script?src="js/mf_fancy.js"?type="text/javascript"></script>
????<link?rel="stylesheet"?href="css/mf_fancy.css"?type="text/css"/>
????<script?type="text/javascript">
?myFocus.set({
????????????id:'picBox'
?})
????</script>
</head>
<body>
<div?class="top">
????<div?class="top_content">
????????<ul>
????????????<li><a?href="#">聯(lián)系我們</a></li>
????????????<li><a?href="#"?onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
????????????<li><a?href="#"?onclick="SetHome(window.location)">設(shè)為首頁</a></li>
????????</ul>
????</div>
</div><!--top結(jié)束-->
<div?class="wrap">
????<div?class="logo">
????????<div?class="logo-left"><img?src="images/logo.jpg"?alt="慕課網(wǎng)"></div>
????????<div?class="logo-right"><img?src="images/tel.jpg"?alt="服務(wù)熱線">24小時(shí)服務(wù)熱線:<span?class="tel">123-456-7890</span></div>
????</div><!--logo結(jié)束-->
?<div?class="clear"></div>
????<div?class="nav">
????????<div?class="nav-left"></div>
????????<div?class="nav-mid">
????????????<div?class="nav-mid-left">
????????????????<ul>
????????????????????<li><a?href="#">首頁</a></li>
????????????????????<li><a?href="list.html">關(guān)于慕課</a></li>
????????????????????<li><a?href="list.html">新聞動(dòng)態(tài)</a></li>
????????????????????<li><a?href="list.html">課程中心</a></li>
????????????????????<li><a?href="list.html">在線課程</a></li>
????????????????????<li><a?href="list.html">人才招聘</a></li>
????????????????</ul>
????????????</div>
????????????<div?class="nav-mid-right">
????????????????<form?action=""?method="post">
????????????????????<input?type="text"?class="search-text"/>
????????????????</form>
????????????</div>
????????</div><!--nav-mid結(jié)束-->
?<div?class="nav-right"></div>
????</div><!--nav結(jié)束-->
?<div?class="clear"></div>
????<div?class="ad"?id="picBox">
????????<div?class="loading"><img?src="images/loading.gif"?alt="圖片加載中"/></div>
????????<div?class="pic">
????????????<ul>
????????????????<li><img?src="images/ad2.jpg"?></li>
????????????????<li><img?src="images/ad3.jpg"?></li>
????????????????<li><img?src="images/ad4.jpg"?></li>
????????????</ul>
????????</div>
????</div><!--ad結(jié)束-->
?<div?class="main">
????????<div?class="news">
????????????<div?class="title">
????????????????<h2?class="title-left">新聞中心</h2><span?class="title-right"><a?href="news.html">More>></a></span>
????????????</div><!--title結(jié)束-->
?<div?class="pic-news">
????????????????<img?src="images/news.jpg"?>
????????????????<h2><a?href="news.html">慕女神喊你來表白!</a></h2>
????????????????<p>活動(dòng)時(shí)間:5月20號(hào)-5月25號(hào)<br/>
?獲獎(jiǎng)公布時(shí)間:5月26日<br/>
????????????????????<a?href="news.html">Learn?More>></a>
????????????????</p>
????????????</div><!--pic-news結(jié)束-->
?<div?class="news-list">
????????????????<ul>
????????????????????<li><a?href="news.html">【慕客訪談?用戶篇】“有為屌絲”在路上</a><span>2014-06-01</span></li>
????????????????????<li><a?href="news.html">【有獎(jiǎng)活動(dòng)】給父親的三行書信</a><span>2014-06-01</span></li>
????????????????????<li><a?href="news.html">《程序猿，請(qǐng)曬出你的童年》活動(dòng)獲獎(jiǎng)公告</a><span>2014-05-30</span></li>
????????????????????<li><a?href="news.html"?title="訪談">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a><span>2014-05-28</span></li>
????????????????</ul>
????????????</div><!--news-list結(jié)束-->
?</div><!--news結(jié)束-->
?<div?class="course"></div><!--course結(jié)束-->
?<div?class="sidebar"></div><!--sidebar結(jié)束-->
?</div><!--main結(jié)束-->
</div><!--wrap結(jié)束-->
</body>
</html>
2019-07-05
你樣式復(fù)制錯(cuò)了，看不到啥問題啊