博客園模板樣式優化

時間 2019-11-06

標籤博客模板樣式優化简体版

原文原文鏈接

更新，2013-07-12 15:14css

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

@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; }
}

View Code

更新，2013-07-12 14:35前端

加入了媒體查詢並作調整的定義，但是@media在IE9如下支持不是很好。node

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

所以自適應居中很差法作啊。
css3

@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; }
}

內容提點 git

Firebug簡單介紹瀏覽器

樣式定義簡介架構

修改實戰前端優化

序言

博客園提供了很是豐富的模塊，也有不少很是讚的模板，可老是會有一些很喜歡的模板，卻又以爲有些美中不足，若是能夠本身美化一番，那就更妙了。
編輯器

那麼就從這裏開始一次「博皮」的美容之旅。

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

一、本身建立一個模板，提交給博客園管理團隊

二、使用一個現有模板，而後在此基礎上編寫自定義樣式

這裏介紹的是第二種

Firebug簡單介紹

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

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

定位頁面元素

使用這個功能能夠輕鬆的定位到頁面的任何html標籤。

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

好比這裏鼠標移動到【經常使用連接】，鼠標按下後，就能夠看到HTML代碼定位到目標位置了。

查看標籤的樣式定義

瞭解定位html標籤以後，再看看怎麼定位查看css樣式定義。

經過上面定位html標籤，也會立刻顯示出目標標籤的樣式定義。

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

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

好比這裏的

把自定義的樣式複製一個文件中，而後使用一個能夠高亮帶行數顯示的編輯器打開。

調整樣式即時顯示

Firebug還有一個很是讚的功能

調整樣式，當即顯示效果

在樣式窗口，樣式定義位置雙擊，能夠修改定義。

在空白位置雙擊，能夠新建樣式定義。

樣式定義簡介

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

若是本身想不到好的樣式，就參考別人的設計，像支付寶、微博等網站的樣式設計的仍是不粗的，或者本身喜歡的網站。

而後經過Firebug就能夠輕易的獲取到定義的樣式。

手冊

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

選擇符

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

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

不要緊，使用關係選擇符輕易的搞定。

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

看到模塊上面的

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

先來看看關係選擇符是怎麼樣描述的。

選擇符	名稱	版本	簡介
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如下不支持~~~~