稻米鼠 · 更新于 2018-11-28 11:00:43

第二十四章 导航条(九)

很多同学问,你看他们那谁家的小谁做的那个导航,鼠标一滑过还有变化,他们怎么做的?

那今天我们来讲一些更好玩的伪类,首先是 :hover,这个讲的是某元素被鼠标滑过的时候的样式。当然如果不定义的话就是没有变化喽,就像我们前边写的那样,但是如果我定义一下呢?

#nav .nav-item a:hover {
    background: #DDD;
}

然后我们去看看鼠标划过的效果:

看到变化啦,嗯,图上没有鼠标指针,但也猜得出来,我的鼠标放在下载上他的背景色发生了变化。你看他的文字大小啊、颜色啊,什么什么的其他东东是不是都没有变化?所以 :hover 是基于元素以前的样式进行变化的,我们只要把变化的内容写上就好了,相同的部分不需要重复的去定义。

原来鼠标滑过发生变化的代码竟然这么简单,曾经我们还当做一个什么什么的特效来看的啊!那么我们就再来点稍微复杂哦,看我改写成如下的样式:

#nav .nav-item a:hover {
    height: 40px;
    padding-top: 5px;
    line-height: 40px;
    background: #DDD;
    border-bottom: 5px solid #999;
}

我一下修改了好多内容,看看真复杂!但是仔细分析一下也就明白了,高度改成了 40px,所以 line-height 也改成 40px,这是为了垂直居中所做的相应的修改,而刚才高度上减少的 10px 则通过顶部内补 5px,底部增加 5px 的边框补回来了。因为上下是对称着添加的,所以文字依然垂直居中(看起来似乎没有变化),然后内补和边框都算作元素的范围之内(快递箱以及里面的填充物都算作整个箱子的范围之内),所以也不会影响 a 本身已经设定好的点击范围。

我们看看划过效果:

就是酱紫的效果了,怎么样?大家根据自己的理解修改上面的属性试试看有什么变化?

然后再说几个 链接元素常用的伪类:

:active 当前鼠标点下链接的时候

hover 当鼠标悬浮在元素上方时

link 当链接还未被访问过时

visited 当链接被访问过之后

现在我们也很少用这么多,设置一两种就不少了,比如导航部分的链接,设置一个 :hover 和一个 :active 就差不多,这个几个的用法一样,大家可以自行进行各种惨无人道的变态实验,以便使自己确实掌握这些伪类。

至此我们对导航条的美化也算简单的告一段落,如果你愿意,可以开动脑筋看看还可以做些什么样的美化,虽然我们现在学的 CSS 属性不是很多,但是通过有机的结合以就可以做出很多养眼的效果,希望大家多动手练习一下哦~

那么是不是我们的导航到此就算做完了呢?不是的,其实还有一个小小的问题没有解决。我们把浏览器窗口调小看一下哦~

你说,哎呀,怎么都出去?其实不是都出去了,而是根本就不在里面。不信你把 #nav 的高度去掉试试看,他的高度就会变为 0 ,根本没有被里面的元素撑起来。为什么会这样呢?因为里面的这些元素都进行了浮动,但是 #nav 并没有浮动。

浮动的和没有浮动的元素仿佛是不在一个频道的两群人,总觉的他们相互之间对不上频率,那怎么对上频率呢?两个办法:第一、浮动到底,要是所有的元素都浮动那自然就在一个频率上了,但是想想都觉得超麻烦;第二、清除浮动,就是在浮动结束之后清除一下,表示我浮动完了,咱们还是好朋友哦,不许再闹别扭啦,乖~

所以我们用完浮动之后一定要记得清除浮动,清除浮动的方法有很多,但是我们现在先来讲一种,是最容易理解的哦。

首先 #logo 和后面两个 ul ,以及 ul 里面的 li 都已经进行了浮动,那么在这样的局部范围内也算是全部浮动,于是他们之间相安无事,问题出在这些浮动的元素和外部没有浮动的元素 #nav 之间,所以我们要在 #nav 的内部这些浮动元素之后加一个: <div class="clear"></div>,

于是变成了:

<div id="nav">
    <div id="logo">
        <a href="#">代码能有多难?</a>
    </div>
    <ul id="nav-items">
        <li class="nav-item"><a href="#">首页</a></li>
        <li class="nav-item"><a href="#download">下载</a></li>
        <li class="nav-item"><a href="#feature">特点</a></li>
        <li class="nav-item"><a href="#about">关于</a></li>
    </ul>
    <ul id="nav-items-r">
        <li class="nav-item"><a href="#signin">登录</a></li>
        <li class="nav-item"><a href="#signup">注册</a></li>
    </ul>
    <div class="clear"></div>
</div>

然后在 CSS 里面写上:

.clear {
    clear: both;
}

这样就可以了,为什么要这么写呢,这样定义以后,下次我们需要清除浮动的话,只需要复制 <div class="clear"></div> 过去就可以了,定义一次,可以多处使用,也算是很方便的,当然这种办法会多出一个空白的 div,虽然不影响界面,但是强迫症会比较难受,额……这个我们以后再讲其他办法。(强迫症别杀我……)

好了,现在我们去掉 #nav 的高度看一下效果。

这样就不会出来了……只是浏览器窗口较小的时候好难看………我们下节课再解决……(不要追杀我呀!)

本章学习卡片:卡片 24

本章代码下载:本章代码


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

alay9999@163.com (刘源)

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

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