css 导航栏水平

最新推荐文章于 2024-05-11 04:31:37 发布

三尺秋水一点飞鸿

最新推荐文章于 2024-05-11 04:31:37 发布

阅读量510

点赞数

分类专栏： css 笔记

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

版权

练习同时被 3 个专栏收录

201 篇文章 8 订阅

订阅专栏

笔记

185 篇文章 0 订阅

订阅专栏

css

2 篇文章 1 订阅

订阅专栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

需要用到 li { display:inline; }

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           ul{
               list-style-type: none;
               margin: 0;
               padding: 0;

           }
           li{
               display: inline-block;
               width: 200px;
               text-align: center;
               background-color: #CCCCCC;


           }
           /* 鼠标移动到选项上修改背景颜色和字体颜色 */
           li a:hover {
           background-color: deepskyblue;
           color: sandybrown;
           }
           /*设置每一列为块元素,背景色,内边距*/
           li a {
               display: block;
               color: black;
               padding: 8px 8px;
               text-decoration: none;
}
       </style>
   </head>
   <body>
       <ul>
           <li><a href="http://699pic.com/?sem=1&sem_kid=33480&sem_type=1" target="_blank">图片</a></li>
           <li><a href="http://www.iqiyi.com/" target="_blank">视频</a></li>
           <li><a href="https://v.qq.com/" target="_blank">动漫</a></li>
           <li><a href="https://m.qq.com/" target="_blank">音乐</a></li>
       </ul>

效果：

运用 浮动(float) 和上面的代码基本一样只有一点改动，将li { display:inline; }改成 li{float: left;}

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           ul{
               list-style-type: none;
               margin: 0;
               padding: 0;
               overflow:hidden;

           }
           li{
               float: left;
               width: 200px;
               text-align: center;
               background-color: #CCCCCC;


           }
           /* 鼠标移动到选项上修改背景颜色和字体颜色 /
           li a:hover {
           background-color: deepskyblue;
           color: sandybrown;
           }
           /设置每一列为块元素,背景色,内边距*/
           li a {
               display: block;
               color: black;
               padding: 8px 8px;
               text-decoration: none;
}
       </style>
   </head>
   <body>
       <ul>
           <li><a href="http://699pic.com/?sem=1&sem_kid=33480&sem_type=1" target="_blank">图片</a></li>
           <li><a href="http://www.iqiyi.com/" target="_blank">视频</a></li>
           <li><a href="https://v.qq.com/" target="_blank">动漫</a></li>
           <li><a href="https://m.qq.com/" target="_blank">音乐</a></li>
       </ul>




   </body>
</html>

效果：

三尺秋水一点飞鸿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css 导航栏水平

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。需要用到 li { display:inline; }&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
复制链接

扫一扫