主要内容宽度固定的自适应头部

最近在做百度IFE2015的task，task中给出了一个要求：用纯CSS页面实际内容宽度为980px，头部背景、大图、底部背景均为100%宽，当浏览器宽度低于980px时，页面宽度不变，允许出现横向滚动条。右上角的Github图标在浏览器低于980px时消失。于是作为一个初学者，大周我经过几天的实践，终于得到了想要的效果。

首先，要想实现页面主要内容居中有两种方案，利用margin和绝对定位。我习惯第一种方案，所以飞快地写了一个，效果如下：

html代码如下：

    <div class="header-bg">
   <div class="header">
       <div id="h-menubar">
       <ul class="menu">
       <li>首页</li>
    <li>文章</li>
    <li>作品</li>
    <li>关于</li>
   </ul>
   </div>
   </div>
</div>

css:

.header-bg {
width:100%;
height:80px;

}
.header {
width:980px;
height:80px;
margin:0 auto;
position:relative;
border:1px solid black;
}
#h-menubar {
position:absolute;
right:0;
bottom:5px;
}

为了看得清楚给主要内容加了个边框。

接下来就是github图标了。要想把一张图片显示在一个div的右下方大概有：1.把图片作为该div的background-image；2.由于图片是行内元素，可以利用text-align；3.将图片的display设成block，并利用绝对定位或浮动。

由于点击该图片可以链接到github首页，我把图片放在了链接里，所以排除方案1。而我的header是块级元素，所以我最终选择了方案3。

html：

<a href="https://github.com/" target="_Blank">
<img src="images/icon-github.png" alt="github链接">
</a>

css：

.header-bg a {
display:block;
float:right;
margin:-37px 10px 0 0;
}

接着我试着缩小浏览器窗口，结果如下：

因为我中间div背景是透明的，猫并没有消失，那设置下div的背景呢？

额，要求是达到了，可是这样不好看啊。于是我想给猫设置一个左margin，但是它对右浮动和绝对定位是无效的。所以我决定用方案2使猫位于header右下角，并且利用绝对定位使主要内容居中。最终效果如下：

css：

.header-bg {
width:100%;
height:34px;

text-align:right;
padding-top:46px;
}
.header {
width:980px;
height:80px;
margin-left:-490px;
position:absolute;
left:50%;
top:0;
}

.header-bg a {
margin:0 10px 0 1010px;
text-decoration:none;
}

链接的左margin为主内容宽度980px+猫宽度30px，这样当浏览器缩小到猫的左边界触碰到主内容的右边界时，猫会从右边开始消失。