CSS3制作凤凰网导航
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 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>
上一个:网页背景调色器,调整RGB三基色值
下一个:CSS背景渐变,对角渐变