Maison > Article > interface Web > Un code d'effet ruban implémenté avec CSS
Quand j'apprenais le CSS, j'ai écrit un effet de ruban CSS et c'était plutôt bien, je vais le présenter ci-dessous. Découvrons-le
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!