Maison  >  Article  >  interface Web  >  Un code d'effet ruban implémenté avec CSS

Un code d'effet ruban implémenté avec CSS

零下一度
零下一度original
2017-04-25 15:09:251948parcourir

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>

2. [Image] Capture.JPG                                                      

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn