十一月
11

css层固定,position语法

今天花了点时间重写了404错误页面的模板,原来的没有头部,没有尾部,只是很简单的一个错误提示,而且由于是独立页面,和我的网站风格完全不是一回事。于是便给他加上了 头部(header)和尾部(footer)。

本来以为前后加上<?php get_header(); ?>和<?php get_footer(); ?>就完事了,但是没想到打开404页面后居然页面完全一团乱。又看了一下,发现是header中包含有未闭合标签。于是只好重新编辑一下。

最后是页面底部,这个我发现,由于404页面很简单,只有一个错误提示框,高度只有三百多,所以当我将footer直接加在body的最下方,由于电脑屏幕高度远远大于三百,所以导致footer底部部分下方还有一片无内容区域,显得突兀又难看。

我想的第一种方法是直接将container高度设置为1000px,这样基本上在主流的浏览器上都可以保证footer部分下方不会空出来了,不过这样一来在许多电脑上由于分辨率的问题而会出现长长地滚动条。

于是上网找方法,真是五花八门。基本上都是JavaScript配和css做的。唉,搞个几乎没人会看到的404页面也值得这么大动干戈么?我记得原来在博客大巴开的一个博客在页面左上角和右下角各有一个返回底部和返回顶部的固定按钮,只使用css就搞定了。只是这么久了,我已不记得当时如何做的了,不过跟position定位有关。

于是我又打开博客大巴那个博客,看了一下后台代码,果然,纯css完全就可以实现一个层固定在浏览器的各个方位。关键就是positon——

position: fixed;
#position: fixed;
_position: absolute;

下面的#和_开头的是hack,写过css一定都不会陌生。因为IE6不支持CSS中的position:fixed属性。关于positona的四个属性的含义不明白的同学请自查。

绝对定位以后,直接bottom:0;就ok了。不管你的浏览器分辨率再大,底部(footer)永远在底部了。。哈哈。

不过应用绝对定位也不是绝对好,比如我这样的话如果某人将浏览器缩小,高度不足400,那么就会出现footer遮挡了。不过,没人会将浏览器所那么小浏览网页吧。。。。

最后,预览一下吧,任一一个错误页面都行。。。比如,404http://www.qiqiboy.com/404


——by qiqiboy

本文标签: , ,

分享

本文短网址: http://qiqi.boy.im/16

这篇文章已经有 20 条评论

Comments (20) Trackbacks (0)
You can leave a response or Trackback this entry .
  1. 万戈 -#1

    我的404就一张图片,简单的很

  2. kun530 -#2

    博客主题很漂亮~~ 喜欢 你自己设计的?

  3. QiQiBoY -#3

    @kun530
    从头做没必要,拿inove修改来的

    @万戈
    还是小沈阳。。。。很有个性

  4. 卫星 -#4

    主题改的不错啊,我还以为neoease发布新主题了

  5. 卢松松 -#5

    嗯嗯 我也是这样做的

  6. 老饕 -#6

    难道是技术狂人?呵呵

  7. QiQiBoY -#7

    :grin: @卫星
    mg12的新主题发布需要等段时间了,他刚加入阿里,肯定有的忙了。。。

    @卢松松
    我去看了你的,囧 :???: ,没发现呀,404貌似是浏览器默认的那。。。

    @老饕
    这个。。我真的没资格。。。 :sad:

  8. Zenoven自由人 -#8

    佩服啊。。。我改的很好啊 很像mg12那个 我开始一直以为是那个呢

  9. 在路上 -#9

    我的404页面都没有整他,呵呵!

  10. 三七八蛋 -#10

    博主的皮肤很有现代气息啊。
    我也要改改404皮肤了。呵呵

  11. QiQiBoY -#11

    @ 在路上
    这个看个人喜好了,有时间和精力的弄一下也无妨

    @ 三七八蛋
    呵呵,现在气息?真的么。。。。.

  12. 老七 -#12

    主题好炫。。看的好爽啊。。

  13. QiQiBoY -#13

    @ 老七
    。。。。我这儿可没啥效果,居然也能叫“炫”。。。。。灰啦啦一片。。

  14. 仁心博客 -#14

    你真会折腾啊

  15. 小T -#15

    这主题改得真不错。佩服

  16. QiQiBoY -#16

    @ 小T
    哈哈,谢谢,。。。:smile: 改不算 本事,原主题制作者才算真的厉害。。。

  17. niuhuifei -#17

    这个主题好看,很眼熟,跟mg12的新主题差不多。

  18. 吓我一跳 -#18

    哈哈,原来如此啊,对了关于css的hack,不得不说一下,最好不要用_,因为验证css的时候会提示错误,为了顺利通过验证,最好使用!important来hack

  19. 吓我一跳 -#19

    刚才试了一下你的404,发现有错误:menu.js
    还有问一下 你把inove修理的跟mg12现在用的几乎一模一样,真是牛逼啊

  20. QiQiBoY -#20

    @ 吓我一跳
    404没呀,正常呀,你刷新浏览器试试。。。页面js多,难免有未成功加载的时候。。。
    @ niuhuifei
    你域名不错。。。

  1. No trackbacks yet.

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: