博客園模板 樣式優化

更新，2013-07-12 15:14

加入3種屏幕寬度的判斷和樣式定義

 
           
           @media all and (width:1280px) { 
           
    #leftmenu { position: 
            absolute; 
            left: 
            35px; 
            width: 
            350px; 
            height: 
            auto; 
            } 
           
    #main { 
            margin-left: 
            400px; 
            margin-right: 
            35px; 
            max-width: 
            870px; 
            overflow: 
            hidden; 
            } 
           
    #cnblogs_post_body p img { 
            max-width: 
            600px; 
            } 
           
    .input_my_zzk { 
            width: 
            310px; 
            } 
           
    #top { 
            padding: 
            0 35px; 
            } 
           
}

@media all and (width:1152px) { 
           
    #cnblogs_post_body p img { max-width: 
            450px; 
            } 
           
    #leftmenu { 
            position: 
            absolute; 
            left: 
            10px; 
            width: 
            328px; 
            height: 
            auto; 
            } 
           
    #main { 
            margin-left: 
            348px; 
            margin-right: 
            0; 
            max-width: 
            769px; 
            overflow: 
            hidden; 
            } 
           
    .input_my_zzk { 
            width: 
            235px; 
            } 
           
    #top { 
            padding: 
            0 10px; 
            } 
           
}

@media all and (width:1024px) { 
           
    #cnblogs_post_body p img { max-width: 
            600px; 
            } 
           
    #leftmenu { 
            position: 
            absolute; 
            left: 
            10px; 
            width: 
            318px; 
            height: 
            auto; 
            } 
           
    #main { 
            margin-left: 
            338px; 
            margin-right: 
            10px; 
            max-width: 
            804px; 
            overflow: 
            hidden; 
            } 
           
    .input_my_zzk { 
            width: 
            225px; 
            } 
           
    #top { 
            padding: 
            0 10px; 
            } 
           
} 
           
         

更新，2013-07-12 14:35

加入了媒體查詢並做調整的定義，可是@media在IE9以下支持不是很好。

這樣雖然解決了一部分問題，可是左邊沒有辦法居中。因為這個模板的html的架構是：

 

<div id="top">

<div id="leftmenu"><div id="main">

<div class="footer">

因此自適應居中不好法做啊。

 
          @media all and (min-width:1280px) { 
          
    #cnblogs_post_body p img { max-width: 
           600px; 
           } 
          
    #leftmenu { 
           position: 
           absolute; 
           left: 
           10px; 
           width: 
           200px; 
           height: 
           auto; 
           } 
          
    #main { 
           margin-left: 
           210px; 
           margin-right: 
           0; 
           max-width: 
           814px; 
           overflow: 
           hidden; 
           } 
          
    .input_my_zzk { 
           width: 
           110px; 
           } 
          
} 
         

內容提點

Firebug簡單介紹

樣式定義簡介

修改實戰

序言

博客園提供了非常豐富的模塊，也有很多非常贊的模板，可總是會有一些很喜歡的模板，卻又覺得有些美中不足，如果可以自己美化一番，那就更妙了。

那么就從這里開始一次“博皮”的美容之旅。

博客園提供了兩種自定義樣式的途徑：

1、自己創建一個模板，提交給博客園管理團隊

2、使用一個現有模板，然后在此基礎上編寫自定義樣式

這里介紹的是第二種

Firebug簡單介紹

前端優化調試必須要有一個利器，而火狐上的Firebug插件就是其中之一。

下面就簡單的介紹下使用，熟悉的朋友跳過。

定位頁面元素

使用這個功能可以輕松的定位到頁面的任何html標簽。

首先點擊，然后鼠標移動到頁面的目標位置，然后鼠標按下。

比如這里鼠標移動到【常用鏈接】，鼠標按下后，就可以看到HTML代碼定位到目標位置了。

查看標簽的樣式定義

了解定位html標簽之后，再看看怎么定位查看css樣式定義。

通過上面定位html標簽，也會馬上顯示出目標標簽的樣式定義。

或者是在左邊[HTML窗口]點擊html標簽，右邊窗口也會馬上顯示標簽的樣式定義。

這里需要說一下的是，注意看右邊顯示的某定義位於樣式文件的第幾行，這樣有助於快速的找到需要修改的位置。

比如這里的

把自定義的樣式復制一個文件中，然后使用一個可以高亮帶行數顯示的編輯器打開。

調整樣式即時顯示

Firebug還有一個非常贊的功能

調整樣式，立即顯示效果

在樣式窗口，樣式定義位置雙擊，可以修改定義。

在空白位置雙擊，可以新建樣式定義。

樣式定義簡介

樣式定義需要記住三點要素：選擇器、屬性定義、屬性定義順序（是否沖突和覆蓋）

如果自己想不到好的樣式，就參考別人的設計，像支付寶、微博等網站的樣式設計的還是不粗的，或者自己喜歡的網站。

然后通過Firebug就可以輕易的獲取到定義的樣式。

手冊

手頭有最新的css參考手冊，這里推薦http://css.doyoe.com/css.chm 具有最新的css3參考，保持更新。

選擇符

具體請參考手冊，這里提一個有趣的應用場景

想設置某個模塊，而那個模塊既沒有id也沒有class屬性，從而無法定位？

沒關系，使用關系選擇符輕易的搞定。

比如我想設置的【隨筆分類】模塊恰好符合上面兩點的情況。

 

看到模塊上面的

<div id="itemListLin_con" style="display:none;">

挨的那么近，就拿你來定位了。

先來看看關系選擇符是怎么樣描述的。

選擇符	名稱	版本	簡介
E F	包含選擇符	CSS1	選擇所有被E元素包含的F元素。
E>F	子選擇符	CSS2	選擇所有作為E元素的子元素F。
E+F	相鄰選擇符	CSS2	選擇緊貼在E元素之后F元素。
E~F	兄弟選擇符	CSS3	選擇E元素所有兄弟元素F。

我們這里要用的就是相鄰選擇符

#itemListLin_con + h3 + ul { height: 350px; overflow: hidden; }

如此，就可以輕易解決定位的問題。

 

抓住了目標，當然就是好好蹂躪對方啦。

打開css參考手冊，想想搞那些花樣吧。

什么？想不到怎么玩？問谷哥度娘吧~~~~” css經典樣式”……

修改實戰

在博客管理——設置

可以看到

選擇一個模板

把自己寫的樣式復制過來，點擊下面的保存。

 

屬性定義

我介紹下自己覺得比較常用的幾個屬性定義。

margin、padding、float、with、height、min-with、min-height、max-with、max-height、(position top left bottom right)

把這幾個屬性用好，頁面元素基本就不會不受控制的亂竄了。

我使用模板的主要修改

整體調整

原來緊貼邊沿修改為左右兩邊各留出50像素的空，左邊欄由200調整寬度為400

如果是在小瀏覽器或者非最大化的情況，原來的樣式定義是挺不錯的，但是在大顯示器、寬屏、最大化的情況下，就會有些別扭了。

 

div.post {  border:  1px solid gainsboro;  min-width:  350px;  }

限定文章模塊最小寬度為350，防止無意義的縮小。

隨筆標簽 

調整前	調整后
這什么玩意啊，都看不清楚！   由於我的標簽設置的比較細，所以太多太多了，所以我想把它修改成緊湊式的排列。	之前一個標簽一行，可想而知這個模塊有多長，現在修改完之后，就非常節省空間了。

看看樣式是怎么定義的。

定義高度和超出 隱藏，防止頁面元素 錯亂。

#itemListLin_con + h3 + ul {  height:  350px;  overflow:  hidden;  }

這里最重要的一點是設置浮動，由於我的標簽一般不會很長，所以就沒有限定長度，如果你的標簽有的很長，則可以設置一個max-width，輕松搞定。

#itemListLin_con + h3 + ul > li {  float:  left;  margin-bottom:  5px;  margin-right:  10px;  overflow:  hidden;  }

搜索欄調整

這里需要說一下的就是圓角、:focus、:hover及生成背景圖片的應用

 
           input.btn_my_zzk, #btn_comment_submit 
 { 
           
     background: 
            linear-gradient(#FFFFFF, #F0F0F0) repeat scroll 0 0 #F0F0F0; 
           
     border: 
            1px solid #CCCCCC; 
           
     border-radius: 
            3px 3px 3px 3px; 
           
     cursor: 
            pointer; 
           
     font-weight: 
            bold; 
           
     text-shadow: 
            0 1px #FFFFFF; 
           
     white-space: 
            nowrap; 
           
 } 
          

linear-gradient 在ie10以下不支持~~~~

最新評論區域修改

修改前	修改后

 

這個修改很簡單，由於前面已經設定了左邊區域的寬度，所以，在這里，我只加了一個

#RecentCommentsBlock ul > li {  margin-bottom:  10px;  }

把標簽li的底部外延邊距設置成10像素。

發表評論區域調整

 

調整前	調整后

 

輸入框的調整和上面搜索輸入框的調整是一樣的原理。

 

主要是把[使用Ctrl+Enter鍵快速提交]浮動到左邊，通過設置頂邊的外延邊距來確定位置。 這里也用到了一個相鄰選擇符。

#commentbox_opt + p {  float:  left;  margin-top:  -30px;  }

提交評論 我是直接通過左邊外延邊距來使其定位在右邊。

margin-left: 475px;

推薦反對區域的調整

(更新，最后還是把推薦區域放回到右邊了...)

原來是固定在文章下面的，為了更加方便園友的操作，嘿嘿，我把它固定在頁面的左下角。

為什么要放在左下角，而不是右下角呢？

因為滾動條一般……是在右邊的，用戶在拉滾動條時，焦點相對也是在右邊的。

不是非常重要的信息，一直出現在用戶的視野，並不是好的設計，因此我移到了右邊，並且把推薦漂到了右邊。

這樣不會影響用戶的瀏覽，也是相當於用戶真的費勁把鼠標移動到最左邊去點推薦或反對時，是經過思考的。

好吧，其實我是怕用戶拉滾動條的時候，不小心點到了反對……

親，碼字辛苦，給點個推薦吧。

其它

其它地方也陸續進行了一些調整，比如文章區域的字體調整的更大一些；評論回復區的間距；回復的支持反對字體更小一點，避免干擾閱讀，鏈接顏色，線條大小等。

總算看起來更加舒服一點點了。

 

我使用的模板是Cogitation，修改后的樣式代碼下載： http://www.cnblogs.com/yelaiju/customcss.aspx?id=57777

原版樣式：

 

http://www.cnblogs.com/SkinUser.aspx?SkinName=Cogitation

 

http://www.cnblogs.com/klcf0220/

 

最后一句：樣式定義需要記住三點要素：選擇器、屬性定義、屬性定義順序（是否沖突和覆蓋），手冊在手。

 

歡迎回復交流，知必言言必盡。