稻米鼠 · 更新于 2018-08-16 14:00:51

第三十二章 一些格子

然后我们来做一些不一样的东西,一些格子,当然其实他未必显示成格子的样式,但是随便他怎么掩饰,他还是改变不了在我眼中那格子的本质。

比如现在呢,我们在上面通过海报把我们这并不存在的 APP 的大特性都展示出来了,但是我们还是觉得说服力不是很够啊,所以我们要在下面横排几个小特性,一般就是有个标题,有些文字说明,再多就是加个相关的图标。

现在我们就来写这一部分。首先,依旧是他的 Html ,写出框架和内容。

<div id="boxes">
    <div class="box">
        <h3>我是第一个盒子</h3>
        <p>是的,没错的,十分确认的,我是第一个盒子。</p>
    </div>
    <div class="box">
        <h3>反正我就是个盒子</h3>
        <p>是的,没错的,十分确认的,我就是一个盒子。</p>
    </div>
    <div class="box">
        <h3>我是盒子我骄傲</h3>
        <p>盒子怎么了,你不能瞧不起盒子的,我们也有自尊。</p>
    </div>
</div><!-- #boxes End -->

然后懒得去看效果,用鼻子想也知道什么德行,一行一个呗,你可以试一下,我不拦着你,反正试试不要钱,还能加深理解。最可怕的就是你们这些人啊,跟我别的没学,就学会了我的懒,根本不想动手,那怎么学得会啊。你看我虽然懒,但是写教程还是不含糊的嘛~~(自我夸奖一下感觉真好)

现在开始猜着写 CSS 样式哦。其实吧,想想也知道 #boxes 跟 .post-content 差不多啦,都是一个 960px 宽,居中对齐的区域,用来装一些内容。

所以:

#boxes {
    width: 960px;
    margin: 0 auto;
}

为什么没有高度啊?因为我也不知道他有多高啊,其实我管他多高呢,让内部元素把他撑起来就好了。

然后是什么?横排横排,那些 .box 要横排的,然后呢?横排之后你的给个宽度啊,没有宽度他就根据元素内容自动宽度了。

#boxes .box {
    float: left;
    width: 300px;
    padding: 10px;
}

关于这个宽度很多同学不会计算,其实很简单啊,960px 的宽度,平分三份,每份就是 320px,所以每个 .box 所占的宽度就是 320px。但是我们不能让他们紧紧贴在一起啊,所以就给他们加内补(外补也行),但是这个内补的宽度也要从这 320px 里出,所以左右两边各 10px,中间的内容宽度就只剩下 300px 了。至于垂直方向上,我们对高度没什么限制,所以就不需要这么麻烦的计算了。

现在终于可以去看看效果了,然后我们再根据效果做各种修饰。虽然我做的并不好看,但是每次看效果之前还是有一种莫名的兴奋啊~

横排的效果已经如我们所愿了啊。现在就是美观度的问题,这个问题很简单,也很复杂,好辩证的讲法。所以……反正我是没有什么审美的,简单设置一下好了。

然后我就给 CSS 加上了如下内容:

#boxes .box h3 {
    font-size: 24px;
    font-weight: 300;
    text-align: center;
}

然后看一下效果:

还算看得过去,当然底下的描述文字再多几行看起来就更舒服了,我就不加了,当然你要是觉得这几个格子之间的距离太近的话,你也可以把前边我们设置的内补适当进行调整,嗯,修改数值多做实验,是有助于加深你的理解的。

然后呢,我们那个审美奇葩的老板说看着太空了,要再加点什么图,看起来更加高大上一些,所以我们来试试给每个格子都加上一个图标。

#boxes .box {
    float: left;
    width: 300px;
    padding: 138px 10px 10px;
    margin-top: 30px;
    background: url(../images/box-icon.png) center 10px no-repeat;
}

也没什么复杂的,其实前边都讲过,注意让背景居中,不重复,然后在元素顶部增加内补给图标留出位置就好。看一下效果:

当然其实同理的,你也可以把图标设置在底下。比如改做:

#boxes .box {
    float: left;
    width: 300px;
    padding: 10px 10px 138px 10px;
    margin-top: 30px;
    background: url(../images/box-icon.png) center bottom no-repeat;
}

效果如下:

当然了,你也可以给他们分别设置图标,或者用 img 标签也是完全可以的,我就不一一举例了,不过你最好都动手试一试哦。

然后我们丢掉了一个什么?清除浮动!浮动用过要清除,新手一定要记得,否则很容易造成奇葩问题让自己迷惑。去加一个 <div class="clear"></div> 吧,加在哪里的问题大家可以下载源代码来研究啦~

本章学习卡片:卡片 32

本章代码下载:本章代码


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

alay9999@163.com (刘源)

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

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