的樣式與背景圖像的有序列表

.color-overlap-right { 
 
\t background-color : #d93; 
 
\t margin-right : -25%; 
 
} 
 

 
ol { 
 
\t margin-left:0; 
 
\t padding-left:0; 
 
\t counter-reset: ol-item 
 
} 
 

 
ol li { 
 
\t margin-left:0; 
 
\t padding-left:0; 
 
\t list-style-type:none; 
 
\t counter-increment: ol-item; 
 
} 
 

 
ol li:before { 
 
\t content:counter(ol-item) " "; 
 
\t background-image: url('../img/square.png'); 
 
\t background-position: 0 -20px; 
 
    background-repeat: no-repeat; 
 
}

<html lang="en"> 
 
<div class="container"> 
 
    <div class="color-overlap-right"> 
 
\t \t \t <div class="left-text"> 
 
     <ol style="list-style: aliceblue;"> 
 
      <li>Earn</li> 
 
\t \t \t \t \t \t <li>Transfer</li> 
 
\t \t \t \t \t \t <li>Apply</li> 
 
     </ol> 
 
     </div> 
 
\t </div> 
 
</div>

我想在HTML看起來像這樣

這應該有序列表創建一個有序列表，而「點「編號應以斜體和字體大小自定義。應該顯示背景圖像/顏色。有人可以幫忙嗎？我目前能夠刪除「點」並添加背景顏色。不過，我無法調整背景圖片和數字之間的邊距，使其看起來類似於下圖所示。有人可以幫忙嗎？

來源

2017-02-22 Rajan Phatak

發佈您的代碼，請 –

我猜你只需要添加一些CSS屬性來實現這個設計，在ol li:before選擇

ol li:before { 
    font-size: 39px; 
    color: #fff; 
    font-weight: bold; 
    padding-left: 15px; 
    text-shadow: -4px 2px 7px #504747; 
    font-style: italic; 
    font-family: sans-serif; 
}

編輯添加這些CSS

/*This is for square box*/ 
    ol li:after{ 
     content: ""; 
     display: block; 
     background: #ab6b0b; 
     position: absolute; 
     top: 17px; 
     left: 3px; 
     height: 18px; 
     width: 17px; 
    }

結果會是這樣：

您可以修改字體顏色和陰影按你的UI

.color-overlap-right { 
 
    background-color: #d93; 
 
    margin-right: -25%; 
 
} 
 

 
ol { 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    counter-reset: ol-item 
 
} 
 

 
ol li { 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    list-style-type: none; 
 
    counter-increment: ol-item; 
 
    position: relative; 
 
} 
 

 
ol li:before { 
 
    content: counter(ol-item) " "; 
 
    background-image: url('../img/square.png'); 
 
    background-position: 0 -20px; 
 
    background-repeat: no-repeat; 
 
    font-size: 39px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    padding-left: 25px; 
 
    text-shadow: -4px 2px 7px #504747; 
 
    font-style: italic; 
 
    font-family: sans-serif; 
 
} 
 

 
ol li:after{ 
 
    content: ""; 
 
    display: block; 
 
    background: #ab6b0b; 
 
    position: absolute; 
 
    top: 17px; 
 
    left: 3px; 
 
    height: 18px; 
 
    width: 17px; 
 
}

<html lang="en"> 
 
<div class="container"> 
 
    <div class="color-overlap-right"> 
 
    <div class="left-text"> 
 
     <ol style="list-style: aliceblue;"> 
 
     <li>Earn</li> 
 
     <li>Transfer</li> 
 
     <li>Apply</li> 
 
     </ol> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-22 11:35:50

我想後面的廣場形象數字而不僅僅是一個影子。 –

檢查更新後的答案，您需要修改在純'CSS'中生成的方框而不是圖像 –

html { 
    background-color : #d93; 

} 

ol { 
    margin-left:0; 
    padding-left:0; 
    counter-reset: ol-item; 
    color:#fff; 
    font-family: arial; 
} 

ol li { 
    margin-left:0; 
    padding-left:0; 
    list-style-type:none; 
    counter-increment: ol-item; 

} 

ol li:before { 
    font-size:40px; 
    background: #d25f14; 
    content: counter(ol-item) ; 
    width:28px; 
    height:24px; 
    overflow:show; 
    display:inline-block; 
    background:url(place your image here); 
    text-align:right; 
    margin-bottom:20px; 
    margin-right:10px; 
}

使用該CSS，使圖像的方式，你希望它

來源

2017-02-22 11:22:49 18zehn

你可以使用這樣的事情：

HTML：

<ol class="mylist"> 
    <li> 
    <div>&nbsp;</div><span>Earn</span></li> 
    <li> 
    <div>&nbsp;</div><span>Transfer</span></li> 
    <li> 
    <div>&nbsp;</div><span>Apply</span></li> 
</ol>

CSS：

body { 
    background-color: #d93; 
} 

.mylist { 
    font-size: 25px; 
} 

.mylist li { 
    position: relative; 
    counter-increment: section; 
    list-style: none; 
    margin-left: -20px; 
    z-index: 0; 
} 

.mylist li span { 
    font-size: 17px; 
    font-family: arial; 
    color: #FFFFFF; 
} 

.mylist li div { 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    background-color: #D25F15; 
    z-index: 1; 
    border-radius: 2px; 
} 

.mylist li:before { 
    position: relative; 
    font-style: italic; 
    font-weight: bold; 
    color: #FFFFFF; 
    content: counter(section) " "; 
    margin-left: 12px; 
    z-index: 2; 
}

Demo

來源

2017-02-22 11:29:54

的樣式與背景圖像的有序列表

回答

相關問題