Question

我必须得到这样的东西：

enter image description here

我决定使用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;
}

Here is link to webste

1）有很多问题，但第一个是我不能得到ol的背景图像在段背景的背景图像上。

2）其次，我不确定使用ol / li的想法是最好的，也许还有一些其他好的建议如何更好地实现图像中的思考？请给我一些线索，我不是要问确切的溶剂。

我是php程序员，但是为CSS创建设计的新手。

Answer 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;


}

当然，你必须调整尺寸，边距，填充，但我希望你有所了解......

ol bg图像应该超过li bg图像

1 个答案: