Heim > Artikel > Web-Frontend > Ein mit CSS implementierter Ribbon-Effektcode
Ein mit CSS implementierter Ribbon-Effektcode
- 零下一度Original
- 2017-04-25 15:09:251965Durchsuche
Als ich CSS lernte, habe ich einen CSS-Ribbon-Effekt geschrieben und er fühlte sich ziemlich gut an. Ich werde ihn unten vorstellen. Finden wir es heraus
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.ribbon-content {
border: 1px solid #DDD;
font-weight: bold;
margin: 0 -10px;
min-height: 30px;
padding: 7px 31px;
text-align: center;
line-height: 30px;
}
.ribbon-left {
display: block;
border-left: 10px solid white;
border-top: 8px solid #EEE;
float: left;
height: 0;
margin-left: -10px;
width: 0;
}
.ribbon-right {
display: block;
border-right: 10px solid white;
border-top: 8px solid #EEE;
float: right;
height: 0;
margin-right: -10px;
width: 0;
}
</style>
</head>
<body>
<p style="margin: 0 auto; width: 200px;">
<p class="ribbon" style="background: whiteSmoke;">
<p class="ribbon-content" style="background: whiteSmoke;">标题</p>
<p class="ribbon-left"></p>
<p class="ribbon-right"></p>
</p>
<p style="background: whiteSmoke;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</p>
</body>
</html>2. [Bild] Capture.JPG
Das obige ist der detaillierte Inhalt vonEin mit CSS implementierter Ribbon-Effektcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Fehler in CSS, die Sie kennen müssen und wie Sie sie beheben könnenNächster Artikel：Fehler in CSS, die Sie kennen müssen und wie Sie sie beheben können