css导航栏

最新推荐文章于 2023-09-20 08:50:45 发布

wewqeqwwq1

最新推荐文章于 2023-09-20 08:50:45 发布

阅读量55

点赞数

文章标签： css html linq

本文链接：https://blog.csdn.net/wewqeqwwq1/article/details/122812553

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
       ul {
           list-style-type: none;
           margin: 0;
           padding: 0;
           width: 200px;
           background-color: #f1f1f1;
       }

       li a {
           display: block;
           color: #000;
           padding: 8px 16px;
           text-decoration: none;
       }
       li a.active {
           background-color: #4CAF50;
           color: white;
       }
       li a:hover:not(.active) {
           background-color: #555555;
           color: white;
       }
       ul {
            border: 1px solid #555;
       }
       li {
            text-align: center;
            border-bottom: 1px solid #555;
       }
       li:last-child {
            border-bottom: none;
       }

       ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            height: 100%; /* 全屏高度 */
            position: fixed;
            overflow: auto; /* 如果导航栏选项多，允许滚动 */
       }

       </style>
   </head>
   <body>
       <ul>
          <li><a class="active" href="#home">主页</a></li>
          <li><a href="#news">新闻</a></li>
          <li><a href="#contact">联系</a></li>
          <li><a href="#about">关于</a></li>
       </ul>
   </body>
</html>