标签：
最近在做百度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，这样当浏览器缩小到猫的左边界触碰到主内容的右边界时，猫会从右边开始消失。
标签：
原文地址：http://www.cnblogs.com/shuyzhou/p/5789957.html
