CSS 导航栏

导航栏是一个链接列表,熟练使用导航栏,对于任何网站都非常重要

CSS 可以将导航栏美化成直观和好看,而不是一个枯燥的链接列表

垂直

水平


创建导航 HTML

一般情况下,导航栏都使用 <ul><li><a> 三个 HTML 元素创建

下面的代码,我们使用这三个元素创建一个标准的 HTML 列表导航栏

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

运行范例 »

删除列表的外边距 ( margin ) 、填充 ( padding ) 和 列表样式 ( list-style )

list-style-type:none 用于移除列表前小标志

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

运行范例 »

修改 <a> 标签样式

修改 <a>display CSS 属性显示为块状,同时设置宽度为 60px

a
{
    display:block;
    width:60px;
}

运行范例 »

  1. display:block 显示块元素的链接,让整体变为可点击链接区域 ( 不只是文本 ) ,它允许我们指定宽度

  2. width:60px 块元素默认情况下是最大宽度。我们要指定一个 60 像素的宽度

垂直导航栏

因为 <li> 默认是块状的,会铺满水平的宽度,所以我们创建的导航默认就是垂直的

你可以点击 完整样式的垂直导航栏的示例

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

鼠标移动到导航项时改变背景色


我们可以给 <a> 添加 hover 效果,当鼠标移动到元素上时该拜年背景色

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

运行范例 »

高亮当前导航项


给当前导航项的 <a> 元素添加一个 active 类,然后添加对应的 CSS 来高亮当前导航项

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

运行范例 »

创建链接并添加边框

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

可以在 <ul> 上添加 border 属性来让导航栏有边框

如果要在每个选项上添加边框,可以在每个 <li> 元素上添加 border-bottom

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

运行范例 »

全屏高度的固定导航条

一般情况下我们都会遇到这样的需求

  1. 左边是一个导航栏,全屏高度,且固定位置
  2. 右边是内容区域,可滚动

我们可以给 <ul> 元素添加 heightposition 属性来达到这样的效果

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多,允许滚动 */
}

运行范例 »

水平导航栏

创建水平导航栏的方法有两种: 使用 内联(inline)浮动(float) 的列表项

一般情况下我们推荐使用 浮动( float ),因为这样我们可以设置导航项的宽度

内联列表项

内联列表项很简单,只要给 <li> 添加 display:inline CSS 样式即可

li
{
    display:inline;
}

运行范例 »

默认情况下,<li> 元素是块元素

通过添加 display:inline; 可以删除换行符之前和之后每个列表项,以显示一行

浮动列表项

大家都应该发现了,内联的列表项的宽度不一样,要解决这种 bug

我们只能使用 浮动 ( float ) 的方法

如果需要所有的链接宽度相等,可以浮动 <li> 元素,并指定 <a> 元素的宽度

li {
    float:left;
}

a {
    display:block;
    width:60px;
}

运行范例 »

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

创建一个水平导航条,鼠标经过时改变背景色

下面的 CSS 样式创建了一个水平导航条,在鼠标移动到选项后修改背景颜色

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #111;
}

运行范例 »

激活/当前导航条

在点击了选项后,可以添加 "active" 类来标准哪个选项被选中

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

运行范例 »

链接右对齐

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

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

运行范例 »

添加分割线

如果给 <li> 添加 border-right 样式来添加分割线

/* 出来最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

运行范例 »

固定导航条

可以给 <ul> 添加 position:fixedtop:0 属性将导航条固定在顶部

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

运行范例 »

固定在底部

可以给 <ul> 添加 position:fixedbottom:0 属性将导航条固定在底部

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

运行范例 »

灰色水平导航条

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li a {
    color: #666;
}

运行范例 »

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.