博客新皮肤上市

---

 原创：冰极峰

---

 

有朋友说原来的博客不好看，趁着五一节放假，花了点时间重新制作了一套样式，图片借用一个外国博客的图片。

样式全部基于自定义皮肤样式改写的。

说实话，改写博客园样式是一件比较痛苦的事情，你不能随心所欲地加入样式。因为博客园的结构层已经全部定死了，你唯一能做的事情就是在原来的结构上写样式。如果想应用一个好看的样式，会显得非常的困难，因为它并没有定义一个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&nbsp;
    文章- 1&nbsp;
    评论- 26&nbsp;   </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。