Heim > Artikel > Web-Frontend > Wie lege ich den durchgestrichenen Stil mit CSS fest? (Detaillierte Code-Erklärung)
Wie lege ich den durchgestrichenen Stil mit CSS fest? (Detaillierte Code-Erklärung)
- 藏色散人Original
- 2018-10-08 15:07:5120611Durchsuche
Dieser Artikel führt Sie hauptsächlich in die Einstellungs- und Implementierungsmethode von CSS-Durchstreichung ein.
Ich glaube, wenn Sie die Websites großer Einkaufszentren durchsuchen, werden Sie einige Auswirkungen auf die Produktwerbung feststellen, z. B. wie stark der ursprüngliche Preis eines Produkts hervorgehoben wird und wie stark der aktuelle Preis geändert wird Damit Benutzer eine intuitivere Lücke finden, wird der ursprüngliche Preis normalerweise durchgestrichen!
Zusätzlich zu diesem Effekt, der auf der Mall-Website, auf unseren normalen Websites oder Forenseiten erscheint, wird natürlich auch CSS verwendet, um den Website-Inhalt schöner und prägnanter darzustellen, um den Durchstreichungseffekt zu erzielen !
Wie kann man also CSS verwenden, um einen durchgestrichenen Stil zu erreichen?
Nachfolgend erklären wir anhand eines einfachen Codebeispiels ausführlich, wie CSS-Strikethrough implementiert wird!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css删除线</title>
<style>
.demo{
text-decoration:line-through;
color: red;
}
span{color:black;}
</style>
</head>
<body>
<div>
<p><span class="demo"><span>这里有一个删除线</span></span></p>
</div>
</body>
</html>Aufruf über den Browser, CSS Strikethrough erzielt den unten gezeigten Effekt:
Das text-decoration: line-through Stilattribut.
text-decoration: line-through; und den Stil , um die Textschriftfarbe zu definieren, die durchgestrichen werden soll Stileffekte mit verschiedenen Textfarben!
In ähnlicher Weise können wir auch leicht die entsprechenden Auswirkungen des ursprünglichen Preises und des aktuellen Preises erzielen:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css删除线</title>
<style>
.demo{
text-decoration:line-through;
color: red;
}
span{color:black;}
</style>
</head>
<body>
<div>
<p>原价：<span class="demo"><span>500元</span></span><br>
现价：150元
</p>
</div>
</body>
</html>Wie unten gezeigt:
Festlegen der Durchstreichung und Steuerung der Durchstreichungsfarbe in CSS ! Sehr einfach und leicht zu verstehen, ich hoffe, es wird Freunden in Not helfen!
Das obige ist der detaillierte Inhalt vonWie lege ich den durchgestrichenen Stil mit CSS fest? (Detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!