css打造自己的部落格園

    css打造自己的部落格園

    現在互連網上提供的社區、部落格、免費空間的網站有很多。像交友類的社區網站有myspace、facebook，國內的則有校內、億聚、佔座等，而部落格則有像部落格中國、新浪部落格、部落格園等。我學習web前端技術也有一定的時間了，最近在部落格園這個國內著名的開發網站上註冊了一個帳戶。昨天剛考完試，今天周末，有一把時間供自己揮霍。就開始自己整整部落格。
    當然，自我臭屁一下，作為一個學css的csser。拿模板來對付自己也有點太不負責了吧。好，那我就自己設計一下自己的部落格頁面吧。
    說幹就幹，具體的小步驟如下：
    1：開啟自己的部落格，在“管理”-“部落格設定”中勾選“禁用模板預設CSS”複選框；
    2：用firefox的外掛程式firebug查看一下自己的部落格首頁的html檔案結構（此步驟可選），查看頁面原始碼；
    3：在文字編輯器（如：Dreamweaver,Expresion Web,Editplus）中開啟源檔案，針對html設定css樣式；
    4：css樣式寫完後，預覽，直到自己滿意為止。然後將css代碼copy到“管理”-“部落格設定”中“通過CSS定製頁面”的文字框中；
    5：預覽，自己的頁面就呈現在你面前了。
    可是，還有一個最大的問題是，一張頁面中完全不用圖片做背景或是設定其它的樣式那多不爽啊。我遇到的問題是自己的在css設定的背景圖片一個都沒顯示出來。所以頁面的品質也就大打折扣了。心想：應該要上傳以個圖片檔案夾然後讓css檔案讀取這個檔案夾，圖片就出來了。可是找了半天都沒有找到上傳圖片的按鈕。
    最後找到了一個笨辦法：將用到的背景圖片上傳到相簿裡。這樣圖片就會存在於網路伺服器上而不是本機上，然後在css檔案中引用絕對路徑。這樣，背景圖片也就能順利顯示了，自己的頁面也就能夠完整地呈現在面前了。
    文章的最後想稍微談一下部落格園個人首頁中html檔案的結構，這樣就可以寫出各種漂亮的頁面出來了。這讓我想起了一個很著名的css網站——css禪意花園（www.csszengarden.com）。
    部落格園的個人首頁的html主要分為5大塊：top,leftmenu,rightmenu,main,footer。其中主內容區的三大塊leftmenu,rightmenu,main水平方向並列顯示，可以設定它們分別向左、向右、向左浮動，再在footer添加清除浮動，這樣頁面的基本布局就差不多出來了。