HTML代码
<--!
<div class="left_1" style="margin-top:10px;">
<h2 class="bg_title"><img class="top_h_1" src="pics/top_h_1.jpg" /></h2>
<ul class="cjzx">
<li id="cj_0"><a href="/" >星座”虎女郎“的时装本命</a></li>
<li id="cj_1"><a href="/" >全球最漂亮的脸蛋排行</a></li>
<li id="cj_2"><a href="/" >星座谁的房屋最乱</a></li>
<li id="cj_3"><a href="/" >谈结婚就逃跑的结婚情人</a></li>
<li id="cj_4"><a href="/" >射手和天蝎的麻辣爱情</a></li>
<li id="cj_5"><a href="/" >最容易对女孩子一见钟情的星座</a></li>
<li id="cj_6"><a href="/" >注定一辈子谈不拢的星座</a></li>
<li id="cj_7"><a href="/" >首相中隐藏的惊人秘密</a></li>
<li id="cj_8"><a href="/" >最容易对女孩子一见钟情的星座</a></li>
<li id="cj_9"><a href="/" >注定一辈子谈不拢的星座</a></li>
</ul>
</div>
-->
CSS 代码,
<--!
/*财经资讯*/
.left_1 {widh:252px;border:1px solid #dcdcdc; padding:1px;margin:0 6px;float:left;}
.cjzx{width:252px; height:280px;padding:0px; overflow:hidden;font-size:14px;}
.cjzx li{text-align:left;
display:block;
list-style:none ;
line-height:200%;
padding:4px;
text-indent:30px;
width:226px;
height:20px;
text-overflow:hidden;
white-space:nowrap;}
#cj_0{
background:url(../pics/list_c.png) no-repeat;
background-position:0px 6px;
position: relative; //如果设定了list前面的图片,那么样式一定要确定,list-style:none ;无样式
}
#cj_1{background:url(../pics/list_c.png) no-repeat;
background-position:0 -20px;
#cj_2{background:url(../pics/list_c.png) no-repeat;
background-position:0 -46px;
position: relative;}
#cj_3{background:url(../pics/list_c.png) no-repeat;
background-position:0 -72px;
position: relative;}
#cj_4{background:url(../pics/list_c.png) no-repeat;
background-position:0 -98px;
position: relative;}
#cj_5{background:url(../pics/list_c.png) no-repeat;
background-position:0 -124px;
position: relative;}
#cj_6{background:url(../pics/list_c.png) no-repeat;
background-position:0 -150px;
position: relative;}
#cj_7{background:url(../pics/list_c.png) no-repeat;
background-position:0 -178px;
position: relative;}
#cj_8{background:url(../pics/list_c.png) no-repeat;
background-position:0 -204px;
position: relative;}
#cj_9{background:url(../pics/list_c.png) no-repeat;
background-position:0 -230px;
position: relative;}
-->
以上就是显示一张图片的部分图片的例子,有兴趣的同学可以制作一页面试试效果。