首页利用html做一个美观大方的侧面导航栏

利用html做一个美观大方的侧面导航栏

时间: 2023-08-04 11:03:30 浏览: 62

好的，下面是一个简单的 HTML 代码示例，可以实现一个美观大方的侧面导航栏： ```HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>侧面导航栏</title> <style> /* 设置导航栏样式 */ .sidenav { height: 100%; /* 高度设置为100% */ width: 200px; /* 宽度设置为200px */ position: fixed; /* 固定在页面位置 */ z-index: 1; /* 设置层级 */ top: 0; /* 导航栏顶部与页面顶部距离为0 */ left: 0; /* 导航栏左侧与页面左侧距离为0 */ background-color: #f1f1f1; /* 设置背景颜色 */ overflow-x: hidden; /* 横向滚动条隐藏 */ padding-top: 20px; /* 导航栏顶部内边距为20px */ } /* 设置导航栏链接样式 */ .sidenav a { padding: 6px 8px 6px 16px; /* 链接内边距 */ text-decoration: none; /* 文本装饰为无 */ font-size: 20px; /* 文本字号 */ color: #818181; /* 文本颜色 */ display: block; /* 将链接转换为块级元素 */ } /* 设置链接鼠标悬停样式 */ .sidenav a:hover { color: #f1f1f1; /* 鼠标悬停时文本颜色为白色 */ } /* 设置活动链接样式 */ .active { background-color: #4CAF50; /* 设置背景颜色 */ color: white; /* 文本颜色为白色 */ } </style> </head> <body>  <div class="sidenav"> <a href="#home" class="active">首页</a> <a href="#about">关于我们</a> <a href="#services">服务项目</a> <a href="#contact">联系我们</a> </div>  <div> <h1>欢迎使用侧面导航栏</h1> <p>这是一个演示页面。</p> </div> </body> </html> ``` 你可以将上述代码复制到一个新建的 HTML 文件中，然后在浏览器中打开该文件，就可以看到一个简单的侧面导航栏和一个示例页面了。你可以根据自己的需求来修改导航栏的样式和链接内容。