Styling eine geordnete Liste mit Hintergrundbild

.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>

Ich möchte eine geordnete Liste in HTML erstellen, die wie dieser sollte Liste bestellt haben, ohne einen „Punkt Dieser

sieht " Die Nummerierung sollte kursiv und in Schriftgröße anpassbar sein. sollte entweder ein Hintergrundbild/eine Farbe wie angezeigt haben. Kann mir bitte jemand helfen? Ich bin derzeit in der Lage, den "Punkt" zu entfernen und Hintergrundfarbe hinzuzufügen. Allerdings kann ich die Ränder zwischen Hintergrundbild und Nummer nicht so anpassen, dass sie ähnlich aussieht wie unten gezeigt. Kann jemand helfen?

Quelle

2017-02-22 Rajan Phatak

wie pro Ihre UI veröffentlichen Sie Ihren Code ändern können –

ich Ihnen nur raten müssen, um einige CSS Eigenschaft hinzufügen, um dieses Design zu erreichen, fügen Sie diese CSS in ol li:before Selektor

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

Herausgegeben

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

Ergebnis würde so aussehen:

Sie Schriftfarben und Schatten

.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>

Quelle

2017-02-22 11:35:50

ich bitte hinter einen Platz Bild gesucht die Zahl und nicht nur ein Schatten. –

Überprüfen Sie die aktualisierte Antwort, Sie müssen die quadratische Box, die in reinem 'CSS' nicht Bild erzeugt wird, ändern –

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

verwenden CSS und das Bild auf den Weg machen Sie es wollen

Quelle

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

Sie so etwas wie dies nutzen könnten:

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

Quelle

2017-02-22 11:29:54

Styling eine geordnete Liste mit Hintergrundbild

Antwort

Verwandte Themen