0

我必须达到这样的目标：

在此处输入图像描述

我决定将 ol 与背景图像一起使用。

这是我的html和css：

//html

<ol>
    <li class="step1">
        <p>Text Text TextTextTextTextText   TextTextTextTextTextText            
            TextTextTextTextTextTextTextText  TextTextTextTextTextTextText </p>
    </li>
    <li class="step2">
        <p>Text Text TextTextTextTextText   TextTextTextTextTextText            
            TextTextTextTextTextTextTextText  TextTextTextTextTextTextText </p>
    </li>
    <li class="step3">
        <p>Text Text TextTextTextTextText   TextTextTextTextTextText            
            TextTextTextTextTextTextTextText  TextTextTextTextTextTextText </p>
    </li>
</ol>

//CSS

ol {
    list-style-position: inside;    
    list-style: none;
    font-size: 25px;
}

ol li {
    background-image: url(../images/poga_zala_fons.png), url(../images/Nr1.png);    
    background-position: -5px 0, -5px 0;
    background-repeat: no-repeat;
    padding-left: 7px;    
}

ol li.step1 p {
    background-color: #99cc33;        
    margin-left: 10px;
    z-index: -1;
}

ol li.step2 p {
    background-color: #ffff99;    
}

ol li.step3 p {
    background-color: #ffcc00;    
}

ol li p {
    font-size: 12px;
}

这是网站的链接

1）有很多问题，但第一个是我不能让ol的背景图像超过段落背景的背景图像。

2）其次，我不确定使用 ol/li 的想法是最好的，也许还有其他一些很好的建议可以更好地实现图像思考？请给我一些线索，我不是在问确切的解决方案。

我是 php 程序员，但对创建 CSS 设计很陌生。

4

1 回答 1

1

有很多可能的解决方案......如果你想保留列表（因为'语义'），这里有一个：

http://jsfiddle.net/ZfhEN/1/

HTML：

<ul id="list">
<li class="step1">
<div class='bgr'>
<p class='txt'>
Look for the CITYrefund.eu logo when doing your shopping- this is the sign that particular shop participate in CITYrefund Tax Free service system*. Tell the shop assistant that you want to use CITYrefund Tax Free system and show your passport or national ID card. The shop assistant will give you the SPECIAL TYPE OF FORM. Fill in and sign the customer sections of the form in the presence of the shop assistant. *If the shop isn't yet registered in CITYrefund Tax Free service system, you can always use our SPECIAL TYPE OF FORM "B" in almost any shop in Riga.
</p>
</div>
</li>
<li class="step2">
<p>You must export the goods (that is, take them out of the EU with you) by the last day of the third month after the one in which you buy them. Show your goods, till receipts and SPECIAL TYPE OF FORMS to a Latvian customs officer or to customs in the last EU country you visit. You must get your SPECIAL TYPE OF FORM checked and stamped by a customs officer.</p>
</li>
<li class="step3">
<p>Get your VAT refund by CITYrefund.eu according to your choosed options. Register your SPECIAL TYPE OF FORMS and till receipts online and then mail the original copies to our office address: CITYrefund Latvia SIA, Pakalninu iela 4, Tīraine, Latvia.</p>
</li>
</ul>

CSS：

#list {
        list-style-type:none;
        width:680px;
    }
    .step1 {

        background-image:url(number.jpg);
        background-repeat:no-repeat;
        height:319px;
        /*width:?  */
        margin:0;
        padding:0;
        z-index:99;
        position:relative;


}
.step1 .bgr {
    position:absolute;
    top:0;
    padding:0;
    margin:0;
    left:166px;

    background-color:#99cc33;
    height:100%;
    /*width:?*/
}
.step1 .txt {
    padding:20px;
    margin-top:30px;


}

当然，你将不得不调整大小、边距、填充，但我希望你能明白......

于 2013-06-09T14:34:32.993 回答