html5 横向滑动导航栏

最新推荐文章于 2024-05-22 13:34:30 发布

Android-Developer

最新推荐文章于 2024-05-22 13:34:30 发布

阅读量1.4k

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/YDHIT/article/details/131010556

版权

以下是一个简单的 HTML5 横向滑动导航栏的示例：

```html
<!DOCTYPE html>
<html>
<head>
   <title>横向滑动导航栏</title>
   <style>
       nav {
           overflow-x: auto;
           white-space: nowrap;
           background-color: #333;
           padding: 10px;
       }

       nav a {
           display: inline-block;
           color: white;
           text-align: center;
           padding: 14px;
           text-decoration: none;
           font-size: 17px;
       }

       nav a:hover {
           background-color: #ddd;
           color: black;
       }
   </style>
</head>
<body>
   <nav>
       <a href="#">首页</a>
       <a href="#">新闻</a>
       <a href="#">产品</a>
       <a href="#">关于我们</a>
       <a href="#">联系我们</a>
       <a href="#">加入我们</a>
       <a href="#">反馈</a>
       <a href="#">帮助</a>
       <a href="#">设置</a>
       <a href="#">退出</a>
   </nav>
</body>
</html>

Android-Developer

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5 横向滑动导航栏

联系我们</a><a href="#">加入我们</a><title>横向滑动导航栏</title><a href="#">首页</a><a href="#">新闻</a><a href="#">产品</a><a href="#">反馈</a><a href="#">帮助</a><a href="#">设置</a><a href="#">退出
复制链接

扫一扫