css 导航栏垂直

最新推荐文章于 2023-12-27 14:36:07 发布

三尺秋水一点飞鸿

最新推荐文章于 2023-12-27 14:36:07 发布

阅读量475

点赞数 2

分类专栏： css 笔记

本文链接：https://blog.csdn.net/qq_42467563/article/details/83270241

版权

练习同时被 3 个专栏收录

201 篇文章 8 订阅

订阅专栏

笔记

185 篇文章 0 订阅

订阅专栏

css

2 篇文章 1 订阅

订阅专栏

本质：导航栏=链接列表

一般分为：垂直，水平2种

垂直导航

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>导航</title>
       <style>
           /*从列表中删除边距和填充设置整个列表宽度和背景色，添加边框实线红色，*/
           ul{
               list-style-type:none ;
               margin: 0;
               padding: 0;
               width: 200px;
background-color: #f1f1f1;
border: 1px solid red;

           }
           /*设置每一列为块元素,背景色,内边距*/
           li a {
               display: block;
               color: #000;
               padding: 8px 16px;
               text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色和字体颜色 */
           li a:hover {
           background-color: deepskyblue;
           color: sandybrown;
           }
           /*每一列居中,添加红色边框*/
           li {
           text-align: center;
           border-bottom: 1px solid red;
           }
           /*最后一列的下边框不要,因为会和ul边框重复变双线*/
           li:last-child {
           border-bottom: none;
           }

       </style>
   </head>
   <body>
       <ul>
           <li><a href="http://www.kugou.com/song/#hash=3FC7F2369A02F00F6315869804AE89E4&album_id=10684687" target="_blank">音乐</a></li>
           <li><a href="http://v.baidu.com/" target="_blank">视频</a></li>
           <li><a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E5%9B%BE%E7%89%87" target="_blank">图片</a></li>
           <li><a href="http://tg.37.com/?uid=1808911" target="_blank">游戏</a></li>

       </ul>
   </body>
</html>

效果：

也可以通过设置成全屏高度的固定导航条，不设置边框，ul相对窗口固定，设置宽高比例。body外边距为0.

ul {
width: 25%；
position: fixed;
height: 100%;
overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

body { margin: 0}

三尺秋水一点飞鸿

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 导航栏垂直

本质：导航栏=链接列表一般分为：垂直，水平2种垂直导航&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫