离线下载
获取电子书

稻米鼠 · 更新于 2018-02-23 02:01:00

第十七章 导航条(二)

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

代码如下,加在 #nav(就是 id="nav" 的元素) 里面:

<div id="logo">
    <a href="#">代码能有多难?</a>
</div>

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

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

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

你说,妈呀!丑爆了,不跟你学了!

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

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

#logo a {
    color:#333;
    text-decoration: none;
    font-size:24px;
}

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

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

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

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

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

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

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

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

所以上边给加一个

line-height: 50px;

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

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

那么我们加入如下属性:

font-weight: 700;

然后看看效果:

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

本章学习卡片:卡片 17

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me