第六十三章 页头

啊？！上一章写的就是页头，对对，不过这么空白着不好看啊，不是说还有个海报么，索性也写在这里好了，对，用图片作为页头的背景，诶呀，你们都会了啊，那我还讲什么呢？

也是，前面我们讲背景的时候讲过这个情况的。把背景图片和网页文件放在一起，然后修改 CSS，我这里把 CSS 都放在这里，大家看一下格式，以及这些已有的元素我是如何排列的，从最开始就注意，后面才不会乱哦~

* {font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;}header {background-image: url(background.jpg);background-size: cover;background-position: center;}header>h1 {text-align: center;font-weight: 400;}header>h2 {text-align: center;font-weight: 200;}

到目前为止，很简单，简直就是照着前面的章节抄过来而已，然而……

这不好看啊！问题很多，首先我看不见字，还有高度上太压抑了，然后如果你自己动手做了会发现四周有白边，这都是些什么鬼，我要自暴自弃了。

一个一个来，我们按着倒序来解决，首先说四周的白边，这个其实最简单了。因为 body 元素默认会有一个外补，避免内容过于接近浏览器边框，难以阅读（这个理由是我猜的）。反正，我不需要，就把它设置为 0 好了。有的时候记不清楚，懒得思考，为了防止万一……就把 html 元素一起设置了。

html,body {margin: 0;}

简单吧，这个设置几乎每次必写，想想还有字体设置什么的也是几乎每次必写，好麻烦。于是有的人会在网上找一个 CSS 重置的样式表，先引入进来。就是把这些每次都写的东西写在一个文件里，每次先把它引入进来。不过我比较推荐自己写一个，这样知道都有什么，也可以按着自己的需求删减。

然后左右的空白没了，但是顶部的空白还有。猜猜这是为啥？猜不出来就用开发者工具看呀~很快就能发现，这是标题顶部的外补溢出了（和 header 元素的外补叠加）。想想现在页头高度也不够，我们给页头加上一定的内补，这两个问题就都解决了。

header {/* …… 省略一些，节省篇幅 */padding: 60px 0;}

一下子范就出来了！然后文字看不见就修改文字颜色：

header {/* …… 省略一些，节省篇幅 */color: rgba(255, 255, 255, 0.8);}

背景有点花，也看不太清，但是比黑色文字好一点。但我们能就此满足么？不，我要是对这个效果敷衍，你们就该不看我的教程了。所以想想我们要的是什么吧：

文字清晰，但是背景很花，不容易做到，所以给文字加一个背景比较合理。

header>h1 {background-color: rgba(0, 0, 0, 0.4);text-align: center;font-weight: 400;}header>h2 {background-color: rgba(0, 0, 0, 0.4);text-align: center;font-weight: 200;}

别的先不说，你会发现这两个元素中很多相似的地方，我都要写两遍，不爽，不如把相同的地方合并一下：

header>h1,header>h2 {background-color: rgba(0, 0, 0, 0.4);text-align: center;}header>h1 {font-weight: 400;}header>h2 {font-weight: 200;}

效果上，文字是看的清了，但是两个黑条贯通左右，难看！

为什么会如此呢？因为标题元素默认宽度 100%，这是块元素。那修改宽度就行了，比如让宽度为 300px，结果宽度确实是降低了，但是元素在最左边，不居中了。

回想一下，块元素确实总是靠着左边，默认占用一行。现在怎么让这个宽度不够一行的元素居中呢？答案是用外补，将元素左右的外补设置为 auto，这个有确定宽度的块元素就居中了。注意哦：有确定宽度是必须的哦！

header>h1,header>h2 {width: 300px;margin: 5px auto;background-color: rgba(0, 0, 0, 0.6);text-align: center;}

这就看得过去了，想想上下外补影响到了什么，自己修改试试看哦。然后这种方法只能实现水平居中，不能进行垂直居中。

再加一些细节，比如圆角什么的，就可以算是完成了。效果如下：

完整 CSS 代码：

* {font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;}html,body {margin: 0;}header {background-image: url(background.jpg);background-size: cover;background-position: center;padding: 60px 0;color: rgba(255, 255, 255, 0.8)}header>h1,header>h2 {width: 300px;margin: 5px auto;background-color: rgba(0, 0, 0, 0.6);text-align: center;border-radius: 6px;}header>h1 {font-weight: 400;}header>h2 {font-weight: 200;}

不过这里我们只是给出了固定的宽度，如果标题文字发生变化，也需要对宽度进行相应的修改。那么能不能让它根据内容的多少自动变化呢？答案是可以的，我们下一章再聊。