原创：冰极峰
有朋友说原来的博客不好看，趁着五一节放假，花了点时间重新制作了一套样式，图片借用一个外国博客的图片。
样式全部基于自定义皮肤样式改写的。
说实话，改写博客园样式是一件比较痛苦的事情，你不能随心所欲地加入样式。因为博客园的结构层已经全部定死了，你唯一能做的事情就是在原来的结构上写样式。如果想应用一个好看的样式，会显得非常的困难，因为它并没有定义一个class或ID，真让人有“英雄无用武之地”的感觉。
本博客样式是一个自适应宽屏的结构，当用户分辩率超出1024*768时，头部两侧的隐藏的背景图片则显示出来，但主内容区始终是居中显示的。并且整个网页应用的平铺的背景图，使网页两侧在宽屏下看起来显得不空洞。
整个结构花费时间最多的就是头部两侧的图片，因为不能改写结构层，所以制作过程显得痛苦而郁闷。为了便效果看起来好一点，图片采用了PNG格式的半透明图片，应用JS文件使它兼容IE6。因为头部没有更多的容器来装填图片，所以在博客园后台的“自定义头部页面”中加入了两个空白的DIV。
简单分析一下头部结构层：
首页的原始结构
< div id ="header" > < div id ="blogTitle" > < a id ="lnkBlogLogo" href ="http://www.cnblogs.com/binyong/" >< img id ="blogLogo" src ="/Skins/custom/images/logo.gif" alt ="返回主页" /></ a > <!-- done --> < h1 >< a id ="Header1_HeaderTitle" class ="headermaintitle" href ="http://www.cnblogs.com/binyong/" > 冰极峰 </ a ></ h1 > < h2 > 简单生活，简单生活！ </ h2 > </ div > <!-- end: blogTitle 博客的标题和副标题 --> < div id ="navigator" > <!-- done --> < ul id ="navList" > < li >< a id ="MyLinks1_HomeLink" class ="menu" href ="http://www.cnblogs.com/" > 博客园 </ a ></ li > < li >< a id ="MyLinks1_SpaceLink" class ="menu" href ="http://space.cnblogs.com/" > 社区 </ a ></ li > < li >< a id ="MyLinks1_MyHomeLink" class ="menu" href ="http://www.cnblogs.com/binyong/" > 首页 </ a ></ li > < li >< a id ="MyLinks1_NewPostLink" class ="menu" href ="http://www.cnblogs.com/binyong/admin/EditPosts.aspx?opt=1" > 新随笔 </ a ></ li > < li >< a id ="MyLinks1_ContactLink" accesskey ="9" class ="menu" href ="http://www.cnblogs.com/binyong/contact.aspx?id=1" > 联系 </ a ></ li > < li >< a id ="MyLinks1_Admin" class ="menu" href ="http://www.cnblogs.com/binyong/admin/EditPosts.aspx" > 管理 </ a ></ li > < li >< a id ="MyLinks1_Syndication" class ="menu" href ="http://www.cnblogs.com/binyong/rss" > 订阅 </ a > < a id ="MyLinks1_XMLLink" class ="aHeaderXML" href ="http://www.cnblogs.com/binyong/rss" >< img src ="images/rss.gif" alt ="订阅" style ="border-width:0px;" /></ a ></ li > </ ul > < div class ="blogStats" > <!-- done --> 随笔- 27 文章- 1 评论- 26 </ div > <!-- end: blogStats --> </ div > <!-- end: navigator 博客导航栏 --> </ div >页头的图片全部定义在ID为blogtitle的div中。
头部加入的结构如下：
< div id ="t1" > < div id ="t2" ></ div > </ div >这两个多余的容器是来装填头部的两张图片的，都是定义100%宽度并居中显示，让它们在宽屏下也始终能居中显示。
#t1 { width : 100% ; height : 100% ; height : 476px ; background : url(http://images.cnblogs.com/cnblogs_com/binyong/z-bg-header.gif) repeat-x left top ; z-index : -2 ; } #t2 { width : 100% ; height : 100% ; background : url(http://images.cnblogs.com/cnblogs_com/binyong/z-headbg.png) no-repeat 50% 94px ; z-index : 0 ; _background-position : 50% 95px ; }
初步测试以下的IE浏览器环境中通过：IE6、IE7、FF3、傲游浏览器2、OPERA9.63。
转载于:https://www.cnblogs.com/binyong/archive/2009/05/02/1447886.html
相关资源：数据结构—成绩单生成器