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

不过显然的,要是做个海报这么简单码农们就不哭了。所以现在我们要做一些没有设计师我们一样玩的很 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 样式的继承,即子元素会继承父元素的一些属性。比如文字相关的属性,大部分都是可继承的。

本章代码

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 代码教程——第二十九章 首屏大海报(三)

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏