使用 HTML5布局网页

01.28.2011, Librarys, by .

这是 DIV + CSS 时期的 HTML 代码布局模式,而且这个布局还是一个经典的两栏布局。不过这个模式的代码看起来不是那么清晰。而 HTML5 的语义化标签可以让这些代码看起来就很清晰了。下面的图片就是使用 HTML5 语义化标签的布局模式了。

不过要在 IE 下使用这些语义化的标签就需要这JS 来做兼容了,等到 IE9 发布后就不需要了。代码如下:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

然后仍然需要对 IE 下的这部分标签重置CSS样式,CSS代码如下:

article,aside,canvas,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;}

这样就在 IE 下显示正常了。

这也是本站现在这个主题使用的布局模式。最后祝大家春节快乐!

4 Replies

  1. 枫非寒 says:

    过年好!!! 😀

    Reply

  2. horatia.mars says:

    非常喜欢你的这套评论表情,能不能分享一下啊 😆 😆

    Reply

    1. Xu.hel says:

      等主题发布的时候就可以了

      Reply

  3. Jovker says:

    😆

    Reply

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据