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

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

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

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

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

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

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

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

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

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

简单吧，来看看效果哦~

什么，你的图片没有显示？右键——审查元素，你会在右侧 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 这个复合属性里：

来看看效果哦~

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

本章代码