CSS3制作凤凰网导航

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html lang="en-US">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>CSS3制作凤凰网导航</title>
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body {
			font-size: 12px;
			font-family: 'Covered By Your Grace', cursive;
			padding: 100px;
		}
		.container {
			width: 960px;
			margin: 0 auto;
		}
		/*menu style start*/
		#nav {
			width: 960px;
			margin: 50px auto;
			background: #8c319c;
			color: #fff;
			position:relative;
			box-shadow: -1px 0 0 #732184,-2px 0 0 #732184,-3px 0 0 #732184,-4px 0 0 #732184,-5px 0 0 #732184,-6px 0 0 #732184,-7px 0 0 #732184,-8px 0 0 #732184,-9px 0 0 #732184,-10px 0 0 #732184;
			border-top: 10px solid #000;
			float: left;
			width: 100%;
		}
		#nav::before {
			content:"";
			border: 5px solid #732184;
			border-color:#732184 #732184 #cecece #cecece;
			position: absolute;
			bottom: 0;
			left: -10px;
			width: 0;
			height: 0;
			display: block;
			z-index:2;
		}
		
		#nav::after {
			content:"";
			width: 10px;
			height: 9px;
			background: #000;
			position: absolute;
			top: -9px;
			left: -10px;
			display: block;
		}

#nav li {
			float: left;
			display: inline;
		}
		#nav a {
			display: block;
			float: left;
			padding: 10px 15px;
			text-decoration: none;
			text-transform: uppercase;
			color: #fff;
			font-weight: bold;
			font-size: 24px;
			box-shadow: 2px 0 0 rgba(255,255,255,0.5);
			-webkit-transition: all 0.5s ease-in .218s;
			-moz-transition: all 0.5s ease-in .0038s;
			-o-transition: all 0.5s ease-in .0038s;
			transition: all 0.5s ease-in .0038s;
		}
		#nav .sub-menu {
			position: absolute;
			left: 0;
			top: 100%;
			background: #eff7f7;
			right: 0;
			box-shadow: -1px 0 0 #cecece,-2px 0 0 #cecece,-3px 0 0 #cecece,-4px 0 0 #cecece,-5px 0 0 #cecece,-6px 0 0 #cecece,-7px 0 0 #cecece,-8px 0 0 #cecece,-9px 0 0 #cecece,-10px 0 0 #cecece;
		}
		#nav .sub-menu::before {
			content:"";
			border: 5px solid #cecece;
			border-color:#cecece #cecece #fff #fff;
			position: absolute;
			bottom: 0;
			left: -10px;
			width: 0;
			height: 0;
			display: block;
			z-index:2;
		}
		
		#nav .sub-menu a {
			color: #000;
			font-size: 20px;
			font-weight: normal;
		}
		#nav a:hover,
		#nav .expansion a {
			background: #eff7f7;
			color: #000;
			box-shadow: 1px 0 0 #a5adad, 2px 0 0 #b5bdbd,3px 0 0 #a5adad;
			padding-top: 14px;
			margin-top: -4px;
		}
		#nav .sub-menu a {
			background: none;
			box-shadow: none;
			padding-top: 10px;
			margin-top: 0;
		}
		#nav .sub-menu a:hover {
			color: rgb(140, 49, 156);
		}
	</style>
</head>
<body>
<div class="container">
	<h1>CSS3制作凤凰网导航</h1>
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li class="expansion">
			<a href="#">Tutorial</a>
			<ul class="sub-menu">
				<li><a href="#">css</a></li>
				<li><a href="#">css3</a></li>
				<li><a href="#">html</a></li>
				<li><a href="#">html5</a></li>
				<li><a href="#">jquery</a></li>
				<li><a href="#">javascript</a></li>
				<li><a href="#">php</a></li>
			</ul>
		</li>
		<li><a href="demo2.html">Demo</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
<p class="author" style="clear:both;padding-top: 50px;">作者：大漠<br>如有更好建议或疑问请加群：1041263</p>
</div>	
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3制作凤凰网导航

分类

CSS3

描述

CSS3制作凤凰网导航，所使用的技术并不复杂，你了解了：box-shadow,CSS制作图形，旋转，动画，这样制作这个效果就不会有压力。 <br>　　qq群:197326136