代码教程——第十七章 导航条（二）

现在我们来加 Logo 哦～，话说我这么懒就不用图片 Logo 了～。

代码如下，加在 #nav（就是 id="nav" 的元素） 里面：

挺简单易懂的，一个 div 里面放了个链接而已，你要是用图片就把代码能有多难？换成 <img src="你的图片地址" /> 就行，这个大家应该是会的。

然后说说这个 href="#" 是个什么东东，他就是链接到当前页面本身，当然其实他是用了锚点，不过我们后面再说。然后这个链接要不要新窗口打开？当然不要，一个单页面网站点一次 Logo 复制一个标签页算什么神奇体验？所以关于是否新标签打开这个细节我们要多做思考，从实际体验和读者需求出发去做决定，而不是听老板的全部新标签打开的奇特理念。其实在日常我们用鼠标中键点击（滚轮也能按，别说你不知道）链接，就可以直接新标签打开，完全无视网页本身的设置，这才叫随心所欲的体验。可惜很多人不喜欢学习这些使用技巧……

然后我们来看看代码效果哦～

你说，妈呀！丑爆了，不跟你学了！

是挺丑的，本来不加链接还勉强可以看，这加上链接连我都看不下去了呢，要不咱们一起逃学？不过在走之前我们先把 CSS 写一下，也算善始善终了。

虽然我们是小白，但是也大概猜得出来这蓝色带着下划线的效果是链接造成的，而且我们说 div 几乎不带样式，而我们也没做什么定义呢，那就是链接的问题了。我们来写 CSS：

然后解释一下，先看选择器 #logo a 这是什么意思呢，是 #logo 元素里面的所有 a 元素，这里就是说 id="logo" 这个 div 里面的所有链接（a），所以明白啦，用空格分隔的的选择器就是什么里面的什么。就好像说财务部的会计们，下午给大家发年终奖！是指财务部里面的会计，其他的不要。这里是 #logo 里面的所有 a 们。你们的样式是这个样子的：

color 是颜色，确切的说是文字颜色，#333 其实是 #333333 的简写，当颜色值的数字两两相同的时候可以简写，比如：#CDF 就代表 #CCDDFF 。

text-decoration 是文字的下划线，这里写 none 意思就是没有啦，因为我们不想要下划线。

font-size 是字体大小，前边讲过，我们这里选择 24px。

然后我们再看一眼效果哦～

诶，好像不那么难看了耶，但是还有两个问题，要是能解决的话我们觉得还是可以继续学习下去的。第一个是你这在垂直方向上都不居中，往上飘着那么明显老板看到会骂死你的；第二个是能不能设置成粗体看看效果？

对于 CSS 来说，垂直居中是个比较麻烦的事情，他根据不同的情况有着多种的解决方案，在这里我们先来讲一种简单的哦。当你的内容是单行文本的时候，你给他设置一个行高，这个行高等于他外部元素的高度，那么文字在它的外部元素中垂直居中。

说简单点行高就是这一行文字的高度，你设置一个 30px 的行高，但是文字大小设置的是 12px，明显文字高度不够用，于是上下就要补充空白，而美好的事情是上下补的空白是一致的，那我们们就利用这个来做垂直居中了。

所以上边给加一个

就搞定垂直居中的问题了，现在说加粗，这个属性很简单 font-weight，然后你说属性值写 bold，你看前面讲的单词我还记得哦～当然没问题，不过这个属性的属性值挺有意思的，所以我们在这里多说几句好了。

我们可以用 normal（普通），bold（粗体）这样的值对他进行定义，也可以用 100 —— 900 的整百的数字去定义字体的粗细，其中 400 相当于 normal，而 700 相当于 bold，明显的，我们用数字可以更细致的去设置，也更直观一些。那么用什么就看你个人的爱好了。

那么我们加入如下属性：

然后看看效果：

虽然不算好看，但是我们这节课也算是想做什么就做出了什么，很随心所欲的样子！