关于CSS“ 显示一张图片的部分图片”问题

rebecca

浏览: 314964 次
性别:
来自: 北京

最近访客更多访客>>

kxlele

莫世_abc

Linevers

jameszhangjp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML和CSS

CSS 资讯 C C++C#

废话少说，举例

原本图片，

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;

          position: relative;}
#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;}