代码教程——第三十二章 一些格子

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

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

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

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

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

所以：

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

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

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

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

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

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

然后看一下效果：

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

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

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

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

效果如下：

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

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

 

本章代码