代码教程——第二十九章 首屏大海报（三）

不过显然的，要是做个海报这么简单码农们就不哭了。所以现在我们要做一些没有设计师我们一样玩的很 High 的工作。

你看我的海报其实还只有一个背景，上节课虽然加了链接，也不过是自欺欺人，没内容谁点击啊？所以我们要开始添加内容了。

那么上一节加的那个链接就显得不够精致，所以不要他了，于是我们好像又回到了第二十七章结束的时候。注意哦，现在每个元素我都在讲着他的多种可能性，你们一定要注意点，跳着看的话可就乱了哦。

首先做什么？首先要给定内容一个范围，这样比较便于控制里面的内容，否则我们基于宽度变来变去的 #post 进行定位就会很困扰，要考虑的可能性太多了。但是如果我在其中划出一片固定大小的区域用来放内容，事情就变得简单了。

划定一个区域，肯定是居中的，能够被各种屏幕正常显示的区域了，然后高度就是 #post 的高度，等等，怎么感觉越说越像昨天加的链接了？

相似度确实不低呢，所以啦，其实写网页就是那点东西，套来套去的，套的多了自然就熟练了，也就会用了。

在这之后是什么？往里面加东西啊。来，先加上这句：

当然了，我们知道这是一个不容置疑的事实。但是，你应该知道吧，上边这句要放在 .post-content 里面哦，别放错位置。

然后如果你刷新页面的话……你会从这一刻开始怀疑人生。

先说 h1 标签是什么，是标题，标题标签有六个 h1—h6，依次从大到小。这么说这个标签肯定又是有自带样式的了，当然我们可以根据需求欢快的去重新定义他们。那么现在的问题是怎么引起的呢？h1 自带了 margin 属性，但是 margin 可不单纯，这个属性用起来很复杂，所以我特别建议一下，如果可以用 padding 的情况最好不要去用 margin ，除非你真的足够熟悉它的特性。

那么现在我们怎么做呢，我先打一个不太恰当的比方去理解一下当前的情况，padding 是内补，内部问题终究是好解决的。margin 是外补，这是一个要跟他的相邻元素或者父元素产生相互影响的事情，于是就有点热闹了。眼下的问题是父元素对他的约束力不够，就是当爹的没管住孩子，孩子就开始淘气了。怎么管住孩子呢？加一些特别的属性就可以的，这个可以根据情况选择各种属性，比如给父元素加个内补神马的，但是这里我们并不希望加内补，因为内补会影响元素的尺寸。那就加一个语义上说得过去的属性好了，反正我也挺随心的。

那么给父元素（#post .post-content ）加上一个 overflow: hidden; 好了，你说这个什么意思？这倒是很值得说道一下。overflow 这个属性是说元素内容如果超出了元素的范围怎么办。这就比方说你一个高二百的元素里插入了一个高五百的图片，多出来那三百高度怎么办？我们后面的属性值也给出了答案，hidden 隐藏。藏起来不让人看到就是了哦。

然后刷新页面，你看到终于算是符合预期了。现在就开始下一个问题，标题居中。这个很简单了，文字水平居中啊，居左啊，居右啊，用这个属性来定义：text-align 可用的属性值有 left、center、right 等，这个比较显而易见，不多说，顺便把文字颜色（color），距离顶部的距离（margin-top）定义一下好了。

看看效果：

嗯，为了强调这个事实，我又把字号（font-size）改大了一些，这样感觉更有说服力啊。但是我怕你们还是无法正确理解我的帅啊~所以我还要在这个标题底下加上一行小字说明一下。当然就是在 h1 元素下面加上：

然后看效果：

说真的，我仔细找了半天才找到那一行小字。现在我们很容易想到给他加上各种样式，不过仔细想想，我们要加的样式跟上面的 h1 元素好像有很多重复啊。这时候其实我们没必要定义两次。那个同学说用一样的 class ，没错！这只是其中的一个方法，现在我们来试试另外一种。我去把 h1 的文字颜色（color）、文字对齐方式（text-align）的定义，移动到 #post .post-content 元素的定义里。变成了如下的样子：

来看效果哦:

你看实现了，但是我并没有去定义更多的内容，或者说没多打几个字。这是 CSS 样式的继承，即子元素会继承父元素的一些属性。比如文字相关的属性，大部分都是可继承的。

本章代码