离线下载
获取电子书

稻米鼠 · 更新于 2018-05-22 10:00:32

第二十七章 首屏大海报(一)

一块八的啤酒真不经喝,没聊两句就喝光了,导致上一章有点短。现在还剩下四毛钱,买个棒棒糖都不够,话说有钱不知道怎么花也是一种折磨啊。

今天开始聊这个页面的大海报部分,但是一个关键的问题是:首屏。这是页面的灵魂所在啊,好在我不用考虑这些,设计的问题交给设计师去发愁好了,所以我今天就随便找张图片演示一下就好。

你真的这么去想?太好了,你又被我忽悠了,其实今天是要你们看看前端如何灭掉设计师的。别反驳我,看下去你就知道设计是死的,网页是活的了。

我们首先确定海报是宽屏的,就是屏幕多宽,我的海报就有多宽,这是为了让老板感觉到:“”哎妈呀!你们做得好震撼!“好的,我们开始添加 Html 代码,应该按着顺序加载 #nav 部分之后。

<div id="post">
</div><!-- #post End -->

注意,我现在开始更加规范的写代码了,所以注释一定要跟上,随着代码的增加,越来越容易让我们看迷糊了,所以注释这个小秘书显得愈发性感起来了。

我们知道 Html 最多只是骨感美,想要丰满,必须”创世神“(CSS)。

#post  {
    width: 100%;
    height: 450px;
}

现在设计师可以骂街了,你整天问的(别说没有,群里我被我问了可是不止一次两次的)网页我该设计成什么宽度的问题,在这里可一点麻烦都没有,一个 width: 100%; 明确解决了。你说那还没放图片呢,说这个为时过早吧?其实放上图片你哭得更惨。

我先去准备一张图片哦,要够大的才够爽,嘿嘿~于是我随手找了这张,仅作演示而已。挺大的,2048×1363 像素的,我懒,就不根据需求裁剪了,你们不许像我这么懒,这样不好,因为图片过大会导致加载过慢的。好了,先欣赏一下这张图片:

然后开始设置背景了哦,其实很简单的,以前我们设置纯色背景用的是: background:颜色值; 现在改成: background:url(图片地址); 就好了。这里说一下, background 是个复合属性,其实分开写的话有个七八十来个,我记不住,我就记住了一个,就用它了,我省心,它累不累的又不关我的事……其实这样更简单明确啦,分着写……字多!

#post  {
    width: 100%;
    height: 450px;
    background: url(../images/bg.jpg);
}

简单吧,来看看效果哦~

什么,你的图片没有显示?右键——审查元素,你会在右侧 CSS 里看到图片的地址,然后点击或者右键(根据不同浏览器操作略有不同)打开图片,然后查看地址栏,看看图片地址跟他的实际地址有什么区别,然后据此修改代码。这可是一个很好的练习机会,希望不要错过哦。

不过其实你要是按着前边我们说的文件结构去做的话,这边也照抄基本不会有什么错,只是错过了一个练习而已。

好了好了,其实现在图片位置并不合适,我们看到整张图片就显示了一个左上角。我们要定义一下背景图片的位置(background-position),但是在这之前我们有必要先讲一下网页的坐标系。坐标系三要素,原点,坐标轴,正方向(恩恩,其实我说错了,应该是……你管呢,我现在就想说这三个,就这么地吧~)。原点,以参照物的左上角为原点,坐标轴有三个:X 轴(横向,即左右)、Y 轴(纵向,即上下),Z 轴(深度,即前后)。学过三维的同学说,咦,这个好熟悉的说。然后正方向,X 轴向右为正方向,Y 轴 向下为正方向,Z 轴 向屏幕外是正方向。

你没听懂?请打电话给你的初一几何老师,让他数落你一小时三十二分钟。基本上本教程用到的最深奥的数学知识也没超出初一初二的水平,而且也只是用到最基础的一点概念而已,公式什么的……不好意思,我也早就还给老师了(别打,老师我是真的从来没用到过他们啊!)

其实网页上涉及的坐标问题很复杂,但是我的原则是,记不住我干脆不记,用的时候简单测试一下就知道了。

背景位置的属性值分为两个,一个 X 轴,一个 Y 轴,他们都可以用数值去表示图片的起点(左上角)坐标。然后我们漏说了一个问题:原点,我们以本元素的右上角为原点。你说你隐约知道怎么调整背景位置了,Too 森普! X 轴还有三个特殊值:left、center、right;Y 轴也还有三个特殊值:top、center、bottom。可以顾名思义吗?就是以图片的左(中、右、上、中、下)边与元素的左(中、右、上、中、下)边对齐。很复杂?看懂了就行,看懂了用的时候自然就会想起来了。

这就完了?还有百分比呢,喵的,w3schools 的网站不管是中文和英文都没仔细去解释这个问题,百分比和数值是有根本的区别的,他跟那几个特殊值倒是很像,这里只简单的说一下:

background-position: 0% 0% 相当于 background-position: top left

background-position: 50% 50% 相当于 background-position: center center

background-position: 100% 100% 相当于 background-position: right bottom

其余数值自己体会。然后再说一下,w3school 说:”提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。“这句话在英文版 w3schools 中并未提及。然后中文的 w3school 只是对英文 w3schools 第三方翻译,而不是官方出品。然后其实浏览器发展的那么快,现在根本不需要这个设置了。所以,奉劝一句,那些把 w3schools 奉为圭臬的同学醒醒吧,拿他当词典也就好了,但词典不是标准,只是参考。而且如果可能,尽量直接看英文版。好吧,我又多事了,管这干啥……你爱信谁信谁,反正我说的又不全对。

回到正题,现在我们的背景应该如何设置?横向居中对齐,用 center ,纵向要往上一些,以便保证最美好的位置得以展现,这里用固定值就好,所以用像素来表示,那么图片在 Y 轴的起点向上偏移,上面是负方向,所以用负值表示,于是我们写作 background-position:center -250px;,不过我懒,于是把它加载了 background 这个复合属性里:

#post  {
    width: 100%;
    height: 450px;
    background: url(../images/bg.jpg) center -250px;
}

来看看效果哦~

我觉得单这一个属性就很好玩了,大家可以试着去做各种设置,看他的变化,然后想象一下在什么情况下需要这种设置。

本章学习卡片:卡片 27

本章代码下载:本章代码


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

alay9999@163.com (刘源)

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

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