最近在做百度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;
background-color:purple;
}
.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;
background-color:purple;
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,这样当浏览器缩小到猫的左边界触碰到主内容的右边界时,猫会从右边开始消失。