HTML导航栏悬浮特效

仔仔酱a

于 2023-09-27 10:13:04 发布

阅读量337

点赞数 1

文章标签： css javascript css3

本文链接：https://blog.csdn.net/m0_73826787/article/details/133341993

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           ul{
               list-style: none;
           }
           a{
               text-decoration: none;
           }
           .nav ul{
               width:760px ;
               height:76px ;
               background: url(img/HOOL_bg.jpg) no-repeat;
               margin: 0 auto;
               padding:10px 0px 10px 220px;
           }
           .nav ul li{
               height:54px ;
               width: 150px;
               float: left;
               text-align: center;
               margin-left: 10px;
               line-height: 54px;
               /* border: 1px solid #470b12; */
               box-shadow: 0px 0px 1px 0px #470b12 inset;
               transition: box-shadow 3s linear;
           }
           .nav ul li a{
               color: #fff;
           }
           .nav ul li:hover{
               box-shadow: 0px 0px 20px 0 #470b12 inset;
           }

       </style>
   </head>
   <body>
       <div class="nav">
           <ul class="box">
               <li><a href="#">首页</a></li>
               <li><a href="#">知识星球</a></li>
               <li><a href="#">趣味问答</a></li>
               <li><a href="#">奖品</a></li>
           </ul>
       </div>

   </body>
</html>