稻米鼠 · 更新于 2018-10-18 09:00:47

第四十二章 定位实例(三)

然后我们的问题是:这货怎么一直这么显示着,这不是我想要的结果啊,要是可以鼠标划到上面才显示,鼠标离开就隐藏有多好?当然了,这种效果几乎是各个网站所必备的。

第一步:我先把它隐藏掉,省得碍眼。

这个最简单了,给 #nav>ul>li>ul 选择器里面加一个属性就好,display:none;,意思就是显示方式是不显示。好了,不碍眼了,但是,他会一直隐藏,那就没什么作用了,所以:

第二步:鼠标滑过显示。我们说过鼠标滑过这个状态使用伪类 :hover 来表示。所以其实我们如下设置即可:

#nav>ul>li:hover>ul {
    display: block;
}

这里要理解的一个问题是,我们把鼠标划到哪个元素上,而显示出来的又是哪个元素?那么这里是当鼠标放在 #nav>ul>li 上面的时候,它里面的 ul 被显示出来。

那么我们预期的效果就达到了,大家要自己研究一下源码,定位这个问题在 CSS 里面是个很重要的问题。

然后我们开始下一个练习,给这个页面右下添加一个返回首页的按钮,就像很多网站都有的那样。大家应该都知道什么样子,他不随页面滚动,一直处于页面的右下角。

像这种浮于页面之上的东西,他并不占据什么位置。也很难说他在逻辑上属于什么元素。而且它的重要性也不是很高,只是增加用户体验,而不是用户打开页面所第一预期的内容。所以这种代码一般放在页尾,就是 </body> 标签的前面。

那么这个按钮写起来很简单的:

<div id="go-top"><a href="#">返回<br>顶部</a></div>

简单吧,一个链接而已,我们知道 # 可以链接到锚点,但是后面如果没有锚点名称,只是一个简单的 #,那就是链接到当前页面的顶部。其实说是滚动上去更贴切一些。里面文字什么的我就不用解释了吧。

然后给他设置样式:

#go-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    border: 1px solid #999;
    background: #EEE;
    font-size: 12px;
    text-align: center;
}
#go-top a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

这个太简单,不讲了。自己动手改改参数,或者把文字换成图片玩吧。下节课开始我们要给这个页面再加一些高大上的内容,哼唧~

效果见下图的右下角。

本章代码下载:本章代码

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

alay9999@163.com (刘源)

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

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