html+css3实现精美导航
2016-06-27 09:05
579 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 下拉导航 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--css-->
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:url('img/title.jpg') repeat-x, url('img/bg.jpg');}
.nav{width:924px; height:47px; margin:40px auto;}
.nav ul li{list-style-type:none; height:47px; line-height:47px; float:left; color:black; border:1px solid #000; width:130px; text-indent:center; font-size:18px; text-align:center; background:-webkit-linear-gradient(top,
rgba(0,0,0,0.2), rgba(0,0,0,0.6));/*渐变色*/ box-shadow:1px -1px 12px #fff;}
.nav ul li:hover{background:rgba(6,4,8,0.8)}
.nav ul li.first{border-radius:5px 0px 0px 5px;}
.nav ul li.last{border-radius:0px 5px 5px 0px;}
.nav ul li a{text-decoration:none; color:#fff;}
.nav .qdsj{height:0px; overflow:hidden;}
.nav ul li:hover .qdsj{height:147px; transition:1s;/*动画*/}
.nav .qdsj li{background:rgba(10,5,5,0.3)}
.nav .qdsj:hover{cursor:pointer; background:rgba(8,6,6,0.2)}
.nav .bcyy{display:none;}
.nav ul li:hover .bcyy{display:block; animation:ani 2s;}
/*旋转动画*/
@-webkit-keyframes ani{
from{-webkit-transform:rotateY(0deg);}
to{-webkit-transform:rotateY(360deg);}
}
</style>
</head>
<body>
<!--导航栏开始-->
<div class="nav">
<ul>
<li class="first">
<a href="#">前端设计</a>
<!--隐藏菜单-->
<ul class="qdsj">
<li><a href="">HTML5</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">Jquery</a></li>
</ul>
</li>
<li><a href="#">平面设计</a></li>
<li><a href="#">动画设计</a></li>
<li>
<a href="#">编程语言</a>
<!--隐藏菜单-->
<ul class="bcyy">
<li><a href="">C++</a></li>
<li><a href="">Java</a></li>
<li><a href="">Php</a></li>
</ul>
</li>
<li><a href="#">手机开发</a></li>
<li><a href="#">开课程序</a></li>
<li class="last"><a href="#">我的博客</a></li>
</ul>
</div>
<!--导航栏结束-->
</body>
</html>
效果图如下：
<html>
<head>
<title> 下拉导航 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--css-->
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:url('img/title.jpg') repeat-x, url('img/bg.jpg');}
.nav{width:924px; height:47px; margin:40px auto;}
.nav ul li{list-style-type:none; height:47px; line-height:47px; float:left; color:black; border:1px solid #000; width:130px; text-indent:center; font-size:18px; text-align:center; background:-webkit-linear-gradient(top,
rgba(0,0,0,0.2), rgba(0,0,0,0.6));/*渐变色*/ box-shadow:1px -1px 12px #fff;}
.nav ul li:hover{background:rgba(6,4,8,0.8)}
.nav ul li.first{border-radius:5px 0px 0px 5px;}
.nav ul li.last{border-radius:0px 5px 5px 0px;}
.nav ul li a{text-decoration:none; color:#fff;}
.nav .qdsj{height:0px; overflow:hidden;}
.nav ul li:hover .qdsj{height:147px; transition:1s;/*动画*/}
.nav .qdsj li{background:rgba(10,5,5,0.3)}
.nav .qdsj:hover{cursor:pointer; background:rgba(8,6,6,0.2)}
.nav .bcyy{display:none;}
.nav ul li:hover .bcyy{display:block; animation:ani 2s;}
/*旋转动画*/
@-webkit-keyframes ani{
from{-webkit-transform:rotateY(0deg);}
to{-webkit-transform:rotateY(360deg);}
}
</style>
</head>
<body>
<!--导航栏开始-->
<div class="nav">
<ul>
<li class="first">
<a href="#">前端设计</a>
<!--隐藏菜单-->
<ul class="qdsj">
<li><a href="">HTML5</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">Jquery</a></li>
</ul>
</li>
<li><a href="#">平面设计</a></li>
<li><a href="#">动画设计</a></li>
<li>
<a href="#">编程语言</a>
<!--隐藏菜单-->
<ul class="bcyy">
<li><a href="">C++</a></li>
<li><a href="">Java</a></li>
<li><a href="">Php</a></li>
</ul>
</li>
<li><a href="#">手机开发</a></li>
<li><a href="#">开课程序</a></li>
<li class="last"><a href="#">我的博客</a></li>
</ul>
</div>
<!--导航栏结束-->
</body>
</html>
效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 