---

?原創：冰極峰

---

?

有朋友說原來的博客不好看，趁著五一節放假，花了點時間重新制作了一套樣式，圖片借用一個外國博客的圖片。

樣式全部基于自定義皮膚樣式改寫的。

說實話，改寫博客園樣式是一件比較痛苦的事情，你不能隨心所欲地加入樣式。因為博客園的結構層已經全部定死了，你唯一能做的事情就是在原來的結構上寫樣式。如果想應用一個好看的樣式，會顯得非常的困難，因為它并沒有定義一個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。

轉載于:https://www.cnblogs.com/binyong/archive/2009/05/02/1447886.html

總結

以上是生活随笔為你收集整理的博客新皮肤上市的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。