删除列表的外边距 ( margin )

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

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

垂直

水平

创建导航

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

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

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

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

运行范例 »

修改 <a> 标签样式

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

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

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

3. 
   

垂直导航栏

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

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

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

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

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

高亮当前导航项

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

创建链接并添加边框

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

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

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

全屏高度的固定导航条

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

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

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

水平导航栏

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

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

内联列表项

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

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

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

浮动列表项

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

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

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

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

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

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

激活/当前导航条

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

链接右对齐

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

添加分割线

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

固定导航条

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

固定在底部

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

灰色水平导航条

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！