稻米鼠 · 更新于 2018-10-17 12:00:45

第二十九章 首屏大海报(三)

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

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

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

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

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

<div id="post">
    <div class="post-content">

    </div><!-- .post-content  End-->
</div><!-- #post End -->
#post .post-content {
    width: 960px;
    height: 100%;
    margin: 0 auto;
}

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

在这之后是什么?往里面加东西啊。来,先加上这句:

<h1>稻米鼠是大帅哥!</h1>

当然了,我们知道这是一个不容置疑的事实。但是,你应该知道吧,上边这句要放在 .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)定义一下好了。

#post .post-content h1 {
    margin-top: 120px;
    color: #EFEFEF;
    text-align: center;
    font-size: 42px;
}

看看效果:

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

<p>这是一个毋庸置疑的事实,我们用灵魂承诺,此言不虚!</p>

然后看效果:

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

#post .post-content {
    width: 960px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    color: #EFEFEF;
    text-align: center;
}
#post .post-content h1 {
    margin-top: 120px;
    font-size: 42px;
}

来看效果哦:

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

本章学习卡片:卡片 29

本章代码下载:本章代码


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

alay9999@163.com (刘源)

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

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