离线下载
获取电子书

稻米鼠 · 更新于 2018-05-22 10:00:32

第二十五章 导航条(十)

现在来说说这个浏览器宽度的问题,这可不是一个小问题哦,因为大家的显示器尺寸是不同的,所以浏览器窗口的大小相应的也必然无法保持一致,我们必须同时考虑到可能出现的各种情况才行。

那么当前我们遇到的问题是当浏览器宽度过小的时候导航的内容放不下,于是被排成了几行,很不好看。当然这个情况如果不去管他其实也没什么问题,因为我们后面要写的其他内容都很宽,足以撑着页面保证宽度足够当前的导航使用。但是有些同学希望做的更严谨一些,那么我们来试一试。

我们先来简单分析一下,我们做的是一个电脑页面,#nav 元素宽度和页面相同,一般情况都是没啥问题的,但是当浏览器宽度太小,就会被挤压,也就是 #nav 的宽度不能太小就好了。

我们能说不让读者调节浏览器尺寸么?显然不行,那么我们规定一下 #nav 的最小宽度吧~这个很简单,CSS 中给给 #nav 元素加一个属性 min-width: 960px; 就好。这是什么意思呢?如果是宽度 width:960px; 的话我们就理解了,这是固定宽度 960px。现在呢是 #nav 享有根据情况自动调节宽度的权利(就像以前一样),但是,当他的宽度小于 960px 时,不可以了,到 960px为止,你便只能固定这个宽度,不能再小了。这就是最小宽度的意义,大了你随意,但是不可以小于这个下限,否则强制设定为下限的值。我们再来看看效果。宽度足够的时候不用说了,我现在把浏览器宽度设定为 800px,然后再看:

底下出现了滚动条,因为要是自由宽度的话现在 #nav 应该是 800px 宽,但是这小于他的最小宽度 960px,于是就被强制为了 960px。一个很好玩的属性。

那么有最小就有最大, max-width 是最大宽度。与此同理的高度也可以通过添加前缀产生两个属性,最大高度(max-height)和最小高度(min-height)。因为用法相差无几在这里就不细说了。

然后我们开始研究一下新的问题,这个问题也许有很多朋友早就等不及了,大家写这个的时候有木有想过宽屏的朋友?这导航分左右,在宽屏上左边一堆,右边一堆,中间空着一大块,那感觉就好像是下图:

你看,我们解决完了尺寸太小的时候的情况,现在还要面临尺寸太大的时候的情况,但是这个情况好像不是设置最大尺寸可以解决的问题啊。因为我们还是蛮希望背景填满整个宽度的,只是内容不要这么分散就好了。

等等,我们说内容不要这么分散!那就把内容部分打个包好啦~,是不是?我去打个包哦,你看着:

<div id="nav">
    <div class="nav-content">
        <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>
</div>

看到了,我又加了一个 div(.nav-content),然后把以前的内容都放在里面。现在我们设定一下他的 CSS。

#nav .nav-content {
    width:960px;
}

这个挺好理解的,我就是把内容限定在这个里面了,给他一个固定的宽度,至于外面的 #nav 让他带着背景去适应窗口好了,我们来看效果:

换做这么写倒是内容紧凑了,可是内容不在中间怎么看啊?来啊,这里教大家一个让元素横向居中的办法,啥是居中?就是元素两边空余的宽度相同,对吧?所以我们这样写:

#nav .nav-content {
    width:960px;
    margin:0 auto;
}

就是添加了一个 margin:0 auto; 哦,上下外补是 0 没有啥问题,本来我们就不需要,而且不设置默认也是 0。现在说左右,auto 就是自动啊,就是根据情况自己看着办,你想两边权限一样,当 #nav 的宽度比 .nav-content 大的时候,反正不是这边空着就是那边空着,两人权利一样大的结果就是——平分。这是最公平的办法,那么空余的部分左右平分是不是就是左右间距一样,就是居中了呢?

但是用这个要注意两个问题:第一、这个办法没法搞定垂直居中,因为受到文档流向上的原动力影响(参见 VIP章节 关于浮动的故事),同理浮动元素也不行;第二、被居中的元素必须指定宽度,否则两边都搞不清一共剩下多少,怎么平分?

来看看效果:

一切正常了,那么我们想一想,现在有里面的 .nav-content (已经指定了宽度)来撑着,#nav 的 min-width 还有必要吗?当然没有了,于是去掉它。

到这里,今天我们其实讲了导航的两种布局方式,一种占用全部宽度,一种只占用中心一部分宽度。希望大家好好练习一下。其实这两种方式都蛮常见,大家可以留意观察一下我们见到的网站哦。

然后我们发现我们花费了整整十章才写了一个简陋的导航,但是我们这十章只是在讲导航么?我们快把常用的 CSS 知识说的差不多了好不好?所以一定要认真照着做练习,多思考,觉得懂了就按着自己的想法去修改去尝试,这样才能让自己真的理解他们。当然要是不很懂也没关系,页面刚写到这里,后面的内容还要反复用到这些知识,一回生二回熟,跟着学下去慢慢也就会了哦~~

本章学习卡片:卡片 25

本章代码下载:本章代码


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

alay9999@163.com (刘源)

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

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