点此查看 所有教程、项目、源码导航

本文目录

1. 前言
2. 目标效果
3. 开发过程
- 3.1 定义列表
- 3.2 调整高度与背景色
- 3.3 调整内外边距
- 3.4 去掉项目符号
- 3.5 设置列表项高度和位置
- 3.6 设置字体样式
- 3.6 让文字垂直居中
- 3.7 设置列表项边距
- 3.8 添加悬停效果
4. 小结

1. 前言

几乎所有网站都有导航栏，导航栏可以快速的定位到网站特殊内容部分。

本篇我们就来使用CSS，制作一个比较好看的导航栏。

2. 目标效果

我看了下最常用的几个网站的导航栏，发现腾讯首页导航栏效果还不错，如下：

我们就来做一个效果差不多的导航栏。

3. 开发过程

3.1 定义列表

首先我们导航栏是由多个菜单组成的，这种包含多个子项目的HTML元素，我们可以选用无序列表来实现。(当然也可以选择其他元素，不过列表的语义跟菜单比较相似，推荐使用)。

编写无序列表代码如下：

<body><ul class="nav"><li><a href="#">新闻</a></li><li><a href="#">视频</a></li><li><a href="#">图片</a></li><li><a href="#">军事</a></li></ul>
</body>

我们为列表设置了nav样式类，后续通过该类设置列表的样式。此时效果如下：

3.2 调整高度与背景色

首先为nav设置高度与背景色，通过取色器取到颜色值为#1479D7，然后可以通过开发者工具，看到高度为44px，所以CSS修改为：

         .nav {height: 44px;background-color: #1479D7;}

此时效果如下：

3.3 调整内外边距

通过观察，我们发现导航栏距离浏览器左右边有一定距离，可以通过margin调整外边距，另外列表默认样式中含有内边距部分，会影响我们的布局，索性直接把内边距设为0。代码如下：

         .nav {height: 44px;background-color: #1479D7;margin: 0 100px;padding: 0;}

此时效果如下：

3.4 去掉项目符号

原来的效果中是没有项目符号的，我们通过 list-style-type: none;去掉它，CSS修改为：

         .nav {height: 44px;background-color: #1479D7;margin: 0 100px;padding: 0;list-style-type: none;}

此时效果如下：

3.5 设置列表项高度和位置

此时我们继续观察，目前我们的列表项是垂直排列的，但是实际上列表项需要水平排列。此处可以通过float:left;来实现列表项从左到右水平排列。float是浮动的意思，在之前的教程中没有介绍，此处大家理解下使用float后，元素从左到右浮动排列就行了。另外我们将列表项高度也设置为44px，跟导航栏高度保持一致。

         .nav li {height: 44px;float: left;}

此时效果如下：

3.6 设置字体样式

通过开发者工具，我们能看到原来的字体样式和大小，此处直接借鉴过来，另外字体颜色毫无疑问是白色，然后还需要去掉超链接默认自带的下划线，所以将超级链接样式设置如下：

         .nav li a {font-family: SimSun, Arial, "Arial Narrow", HELVETICA;font-size: 1.1em;color: white;text-decoration: none;}

此时效果如下：

3.6 让文字垂直居中

我们知道导航栏高度为44px，那么如何让文字垂直居中呢？此处有一个非常常用的技术，就是设置元素行高度line-height，如果我们将元素行高度也设置为44px，意思是文本也占据44px的高度，那么文本自然就会处于44px高度的中间了。这是一种非常常用的垂直居中技术。如下：

  .nav li a {font-family: SimSun, Arial, "Arial Narrow", HELVETICA;font-size: 1.1em;color: white;text-decoration: none;line-height: 44px;}

此时效果如下：

3.7 设置列表项边距

目前列表项之间过于紧凑，我们可以通过margin增大边距，使其分散：

         .nav li a {font-family: SimSun, Arial, "Arial Narrow", HELVETICA;font-size: 1.1em;color: white;text-decoration: none;line-height: 44px;margin: 0 18px;}

此时效果如下，可以感觉比较相似了：

3.8 添加悬停效果

当鼠标悬停时，文字颜色和背景色会变化，我们可以通过取色器获取悬停的颜色值。如下：

         .nav li a:hover {color: #14539A;background-color: #CBE1ED;}

此时当鼠标经过时，效果如下：

4. 小结

至此，我们设计的导航栏跟腾讯首页的导航栏已经高度相似了，我觉得效果还不错。

大家可以去看看各网站的导航栏，好看的尝试用CSS模仿一下。

零基础CSS入门教程(28)–CSS导航栏实例相关推荐

零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
取得数组下标_《零基础C++入门教程》——（8）搞定二维数组与循环嵌套
一.学习目标了解二维数组的使用方法了解循环嵌套的使用方法目录预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...
sql数据库教程百度云_【推荐】零基础水彩画入门教程|零基础水彩教程百度云...
零基础水彩画入门教程|零基础水彩教程百度云! 照着教程画却总是画不好,这些水彩技法你真的学会了吗? 盲目地照着葫芦画瓢,不懂控制确实很难学会,可以关注一下公众号:每日学绘画,可以领取水彩电子书和全套视 ...
【PR】零基础快速入门教程
[PR]零基础快速入门教程 PR(Premiere)能做什么? PR欢迎界面及新建项目工作区及窗口说明导入文件建立序列视频剪辑添加字幕导出视频使用软件:Premiere2020 新年卷起 ...
零基础GitHub入门教程
最近Github很火,暑期的时候也注册了一个账号,可是其实一直没用.主要呢,是不知道那到底干什么用.现在要照着自己的学习记录一个像我这种完全零基础的人的入门教程. 首先,让我们先知道GitHub到底是 ...
大数据零基础如何入门教程
程序员必看大数据教程最全1024G学习资料免费赠送详解,大数据工作者可以施展拳脚的领域非常广泛,从国防部.互联网创业公司到金融机构,到处需要大数据项目来做创新驱动.数据分析或数据处理的岗位报酬也非常丰 ...
Processing零基础傻瓜入门教程-下载与安装与主界面简介
某绿(笔者)作为一名设计系的学生,其中一门课便要用到此软件,于是,一问三不知的某绿就开始了漫长的processing之路. 此软件的简介以及用途某绿在此文章中不提及,想必想要使用的你已经初步了解过.( ...
零基础HTML入门教程(5)--来吧，看看HTML语言代码是啥样子
点此查看本系列全部文章零基础Java全栈教程文章目录 1. 任务背景 2. 任务目标 3. 相关知识点 3.1 为啥叫HTML 3.2 什么是标记 3.3 HTML的标记 4. 任务实操 5. 任 ...

零基础CSS入门教程(28)–CSS导航栏实例

本文目录

1. 前言

2. 目标效果

3. 开发过程

3.1 定义列表

3.2 调整高度与背景色

3.3 调整内外边距

3.4 去掉项目符号

3.5 设置列表项高度和位置

3.6 设置字体样式

3.6 让文字垂直居中

3.7 设置列表项边距

3.8 添加悬停效果

4. 小结

零基础CSS入门教程(28)–CSS导航栏实例相关推荐

最新文章

热门文章