书签导航（收藏起来以后用）

最新推荐文章于 2024-09-23 18:50:30 发布

转载最新推荐文章于 2024-09-23 18:50:30 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mayicom/p/3802916.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用CSS实现的丝带样式的导航菜单效果，包括基本的CSS重置、背景设置、过渡效果等，通过简单的HTML结构和巧妙的CSS布局实现美观且交互良好的丝带效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'/>
	<title>CSS Ribbon</title>
	<style>
	* {
	/* Basic CSS reset */
	margin:0;
	padding:0;
	}

	body {
	/* These styles have nothing to do with the ribbon */
	background:url(dark_wood.png) 0 0 repeat;
	padding:35px 0 0;
	margin:auto;
	text-align:center;
	}

	.ribbon {
	display:inline-block;
	}

	.ribbon:after, .ribbon:before {
	margin-top:0.5em;
	content: "";
	float:left;
	border:1.5em solid #fff;
	}

	.ribbon:after {
	border-right-color:transparent;
	}

	.ribbon:before {
	border-left-color:transparent;
	}

	.ribbon a:link, .ribbon a:visited {
	color:#000;
	text-decoration:none;
	float:left;
	height:3.5em;
	overflow:hidden;
	}

	.ribbon span {
	background:#fff;
	display:inline-block;
	line-height:3em;
	padding:0 1em;
	margin-top:0.5em;
	position:relative;

	-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
	-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
	-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
	-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
	transition: background-color 0.2s, margin-top 0.2s;
	}

	.ribbon a:hover span {
	background:#FFD204;
	margin-top:0;
	}

	.ribbon span:before {
	content: "";
	position:absolute;
	top:3em;
	left:0;
	border-right:0.5em solid #9B8651;
	border-bottom:0.5em solid #fff;
	}

	.ribbon span:after {
	content: "";
	position:absolute;
	top:3em;
	right:0;
	border-left:0.5em solid #9B8651;
	border-bottom:0.5em solid #fff;
	}

	</style>
	</head>
	<body>
	<div class='ribbon'>
	<a href='#'><span>Home</span></a>
	<a href='#'><span>About</span></a>
	<a href='#'><span>Services</span></a>
	<a href='#'><span>Contact</span></a>
	</div>

	<script src="/follow.js" type="text/javascript"></script>
	<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

	<div style="width:700px;margin:10px auto 20px auto;padding:0 0 0 380px;overflow:hidden">
	<!-- Baidu Button BEGIN -->
	<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px">
	<a class="bds_tsina"></a>
	<a class="bds_tqq"></a>
	<a class="bds_renren"></a>
	<a class="bds_qzone"></a>
	<a class="bds_douban"></a>
	<a class="bds_xg"></a>
	<span class="bds_more">��</span>
	<a class="shareCount"></a>
	</div>
	<script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
	<script type="text/javascript" id="bdshell_js"></script>
	<script type="text/javascript">
	document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours
	();
	</script>
	<!-- Baidu Button END -->
	</div>
	</body>
	</html>