本文目录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元素我们可以选用无序列表来实现。(当然也可以选择其他元素不过列表的语义跟菜单比较相似推荐使用)。编写无序列表代码如下bodyulclassnavliahref#新闻/a/liliahref#视频/a/liliahref#图片/a/liliahref#军事/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模仿一下。
