CSS3制作鳳凰網導航

2024-09-05 12:17:17

字體：大中小

來源：轉載

供稿：網友

CSS3制作鳳凰網導航，所使用的技術并不復雜，你了解了：box-shadow,CSS制作圖形，旋轉，動畫，這樣制作這個效果就不會有壓力。
　　qq群:197326136

<!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   id="rhxhxnl"   class="container">	<h1>CSS3制作鳳凰網導航</h1>	<ul id="nav">		<li>Home</li>		<li>Blog</li>		<li id="lrj97xb"    class="expansion">			Tutorial			<ul class="sub-menu">				<li>css</li>				<li>css3</li>				<li>html</li>				<li>html5</li>				<li>jquery</li>				<li>javascript</li>				<li>php</li>			</ul>		</li>		<li>Demo</li>		<li>Contact</li>	</ul><p class="author" style="clear:both;padding-top: 50px;">作者：大漠<br>如有更好建議或疑問請加群：1041263</p></div>	</body></html>

上一篇：CSS3折疊菜單，折紙效果的菜單

下一篇：CSS3分享按鈕