ylbtech-CSS:CSS 导航栏
1.返回顶部
1、

CSS 导航栏


导航栏

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

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


导航栏=链接列表

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

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

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

实例

<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>

尝试一下 »

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

实例

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

尝试一下 »

例子解析:

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

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


垂直导航栏

上面的代码,我们只需要 <a>元素的样式,建立一个垂直的导航栏:

实例

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

尝试一下 »

示例说明:

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

提示:查看 完整样式的垂直导航栏的示例

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


垂直导航条实例

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

实例

ul {
list-style-type: none;
margin:;
padding:;
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;
}

尝试一下 »


激活/当前导航条实例

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

实例

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

尝试一下 »


创建链接并添加边框

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

可以在 border <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;
}

尝试一下 »


全屏高度的固定导航条

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

实例

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

尝试一下 »

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


水平导航栏

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

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

内联列表项

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

实例

li
{
display:inline;
}

尝试一下 »

实例解析:

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

提示: 查看 完整样式的水平导航栏的示例

浮动列表项

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

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

实例

li
{
float:left;
}
a
{
display:block;
width:60px;
}

尝试一下 »

实例解析:

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

提示:查看 完全样式的横向导航栏的示例


水平导航条实例

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

实例

ul {
list-style-type: none;
margin:;
padding:;
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: fixed;
top:;
width: 100%;
}

尝试一下 »

固定在底部

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

尝试一下 »

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


灰色水平导航条

固定在底部

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

尝试一下 »


更多实例

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS:CSS 导航栏的更多相关文章

  1. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  3. 第8天:CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  4. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

  5. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. HTML/CSS:导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

  7. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. day13—CSS之导航栏

    转行学开发,代码100天——2018-03-29 见过这么多网页,没有导航栏的几乎没见过.因此,对导航栏的练习非常之必要. 导航栏的实现,基本上都是通过链接列表实现,即ul->li->a标 ...

  9. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  10. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

随机推荐

  1. [六省联考2017]分手是祝愿 题解(期望dp)

    题目描述 B 君在玩一个游戏,这个游戏由 n 个灯和 n 个开关组成,给定这 n 个灯的初始状态,下标为从 1 到 n 的正整数. 每个灯有两个状态亮和灭,我们用 1 来表示这个灯是亮的,用 0 表示 ...

  2. (12)C++ 继承

    1继承语法 class Base { public: void print() { cout << "Base" << endl; } }; class S ...

  3. linux安装相关软件

    XShell上传jdk文件到Linux并安装配置1.yum -y install lrzsz2.sudo rz选文件3.sudo tar -zxvf jdk-8u131-linux-x64.tar.g ...

  4. 自定义npm命令行工具,并发布到www.npmjs.com

    1.自定义一个npm脚本 - 1.新建一个项目(在任何路径都可以); - 2.使用`npm init -y`初始化项目 - 3.新建一个index.js文件,在文件的第一行添加 `#!/usr/bin ...

  5. 前端学习笔记——HTML

    1.前端的三把利器 HTML:我们把它比喻成赤裸的一个人 CSS:华丽的衣服 JS/JavaScript:赋予这个人的行为,也就是动起来 2.什么是HTML? HTML 是用来描述网页的一种语言.ht ...

  6. Cocos2d之运行Test项目

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 打开Test项目 路径为   C:\Dev\cocos2d-x-3.8.1\build 2.设定cpp-tests为启动项(当cpp ...

  7. 大型项目必备IPC之Binder机制原理(一)

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680 摘要 Binder是Android系统进程间通信(IPC)方式之一.Li ...

  8. HashSet源码解析笔记

    HashSet是基于HashMap实现的.HashSet底层采用HashMap来保存元素,因此HashSet底层其实比较简单. HashSet是Set接口典型实现,它按照Hash算法来存储集合中的元素 ...

  9. Python之内建函数

    常用内置函数: abs(): 绝对值 divmod():   取商和模 pow(): 指数运算 round():   返回浮点数 callable(): 判断函数是否可调用 isinstance(): ...

  10. 人生苦短,我学PYTHON

    人生苦短我学PYTHON 坚持 努力