CSS3实现漂亮Menu菜单代码

最新推荐文章于 2025-07-09 09:20:15 发布

Molly_Yuan

最新推荐文章于 2025-07-09 09:20:15 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： menu css header float c

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用CSS3技术实现的导航菜单案例。该菜单具备现代网页设计风格，通过CSS3特性实现了平滑过渡效果和美观的悬停状态。菜单项在鼠标悬停时会显示带有渐变效果的高亮区域。

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 技术实现的菜单</title>
<style type="text/css">
body{
   background:#202020;
   font:bold 12px Arial, Helvetica, sans-serif;
   margin:0;
   padding:0;
   min-width:960px;
   color:#bbbbbb;
}
a {
   text-decoration:none;
   color:#fff;
}
h1 {
   font: 4em normal Arial, Helvetica, sans-serif;
   padding: 20px;   margin: 0;
   text-align:center;
}
h1 small{
   font: 0.2em normal Arial, Helvetica, sans-serif;
   text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
   display: block;
}
header {
       padding:0 40px;
       margin:0 auto;
       position:relative;
       width:915px;
       height:145px;
}
header nav ul{
   list-style:none;
   padding-top:50px;
}
header nav li {
   position:relative;
   float: left;
   width:150px;
   text-align:center;
   padding-top:35px;
   padding-bottom:35px;
   color:#fff;
   margin-right:20px;
   border-radius:5px;
   background:#161616;
   border-bottom:1px solid #333;
   border-left:1px solid #000;
   border-right:1px solid #333;
   border-top:1px solid #000;
   cursor:pointer;
}
li:after, li:before {
   -moz-transition:width 0.5s ease 0s;
   height: 0px;
    width: 0px;
    position: absolute;
    content: ' ';
    display: block;
    opacity:0;
   box-shadow: 0px 0px 5px #00c6ff;
}
li:after {
   background: -moz-linear-gradient(left, #0ad, #08b);
    top: 84px;
   left: 75px;
}
li:before {
   background: -moz-linear-gradient(right, #0ad, #08b);
    top: 84px;
   right:75px;
}
li:hover:after,li:hover:before{
    width: 72px;
   height: 1px;
    opacity:1;
}
</style>
</head>
<body>
<header>
<nav>
   <ul>
    <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>
</header>
</body>
</html>