经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
教你玩转CSS 导航栏
来源：cnblogs　　作者：水香木鱼　　时间：2021/2/22 8:40:38　　对本文有异议

CSS 导航栏

垂直

 

水平

 

一、导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

  1.     <ul>
  2.       <li><a href="#home">主页</a></li>
  3.       <li><a href="#news">新闻</a></li>
  4.       <li><a href="#contact">联系</a></li>
  5.       <li><a href="#about">关于</a></li>
  6.     </ul>

现在，让我们从列表中删除边距和填充：

  1.     ul {
  2.         list-style-type: none;
  3.         margin: 0;
  4.         padding: 0;
  5.     }

例子解析：

  • list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距和填充设置为0

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

二、垂直导航栏

上面的代码，我们只需要 元素的样式，建立一个垂直的导航栏：

  1.  a
  2.     {
  3.         display:block;
  4.         width:60px;
  5.     }

示例说明：

  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

注意： 请务必指定 元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。

1.垂直导航条实例

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

 

  1.  ul {
  2.         list-style-type: none;
  3.         margin: 0;
  4.         padding: 0;
  5.         width: 200px;
  6.         background-color: #f1f1f1;
  7.     }
  8.      
  9.     li a {
  10.         display: block;
  11.         color: #000;
  12.         padding: 8px 16px;
  13.         text-decoration: none;
  14.     }
  15.      
  16.     /* 鼠标移动到选项上修改背景颜色 */
  17.     li a:hover {
  18.         background-color: #555;
  19.         color: white;
  20.     }

 

2.激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

  1.   .active {
  2.         background-color: #4CAF50;
  3.         color: white;
  4.     }

3.创建链接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。

可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

  1. ul {
  2.         border: 1px solid #555;
  3.     }
  4.      
  5.     li {
  6.         text-align: center;
  7.         border-bottom: 1px solid #555;
  8.     }
  9.      
  10.     li:last-child {
  11.         border-bottom: none;
  12.     }

 

4.全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

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

 

 

注意: 该实例可以在移动设备上使用。

三、水平导航栏

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

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

1.内联列表项

建立一个横向导航栏的方法之一是指定元素， 上述代码是标准的内联:

  1. li {
  2.         display:inline;
  3.     }

 

实例解析：

  • display:inline; -默认情况下，
  • 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

2.浮动列表项

在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：

  1.  li
  2.     {
  3.         float:left;
  4.     }
  5.     a
  6.     {
  7.         display:block;
  8.         width:60px;
  9.     }

 

实例解析：

  • float:left - 使用浮动块元素的幻灯片彼此相邻
  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

水平导航条实例

创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

  1.  ul {
  2.         list-style-type: none;
  3.         margin: 0;
  4.         padding: 0;
  5.         overflow: hidden;
  6.         background-color: #333;
  7.     }
  8.      
  9.     li {
  10.         float: left;
  11.     }
  12.      
  13.     li a {
  14.         display: block;
  15.         color: white;
  16.         text-align: center;
  17.         padding: 14px 16px;
  18.         text-decoration: none;
  19.     }
  20.      
  21.     /*鼠标移动到选项上修改背景颜色 */
  22.     li a:hover {
  23.         background-color: #111;
  24.     }

 

激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

  1. .active {
  2.         background-color: #4CAF50;
  3.     }

 

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

  1. <ul>
  2.       <li><a href="#home">主页</a></li>
  3.       <li><a href="#news">新闻</a></li>
  4.       <li><a href="#contact">联系</a></li>
  5.       <li style="float:right"><a class="active" href="#about">关于</a></li>
  6.     </ul>

添加分割线

<li> 通过 border-right 样式来添加分割线:

  1.  /* 除了最后一个选项(last-child) 其他的都添加分割线 */
  2.     li {
  3.         border-right: 1px solid #bbb;
  4.     }
  5.      
  6.     li:last-child {
  7.         border-right: none;
  8.     }

 

固定导航条

可以设置页面的导航条固定在头部或者底部：

固定在头部

  1. ul {
  2.         position: fixed;
  3.         top: 0;
  4.         width: 100%;
  5.     }

 

固定在底部

  1.     ul {
  2.         position: fixed;
  3.         bottom: 0;
  4.         width: 100%;
  5.     }

灰色水平导航条

固定在底部

  1.     ul {
  2.         border: 1px solid #e7e7e7;
  3.         background-color: #f3f3f3;
  4.     }
  5.      
  6.     li a {
  7.         color: #666;
  8.     }

 

原文链接：http://www.cnblogs.com/chenchunbo/p/14414018.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号