部落格痞客模版超實用CSS基本排版 box-layout.css @ PIXNET 痞客邦站方部落格 ::PIXNET 痞客邦::

加入書籤:

各位親愛的會員大家好：

部落格痞客模版在設計當時所遵循的原則是以最佳方式呈現網頁的語意
所以在編寫架構的時候完全沒有使用任何的排版及外觀樣式（純HTML，無CSS狀態下看不見任何排版及樣式）
有的時候我們發現部落格痞客模版的某些區塊在樣式編排上需要較進階的CSS編寫技巧，
以至於有些會員心裡有期望的呈現方式，卻不知從何下手

這篇文章針對一般編寫CSS樣式時常見的排版做一個簡單的說明
我們列出了常見排版所使用的CSS code，在這裡將這個檔案稱為 box-layout.css
親愛的會員們可以依照自己部落格上出現的狀況選取對應的CSS code加入至現有的CSS表中，
也可以在任何情況下將全部完整的 box-layout.css 複製加入
當然您也可以在製作樣式最初時就將它納入樣式表，這將會非常節省您製作樣式的時間
經過評量，box-layout.css 只有極小的機率與您現有的CSS相衝突，請各位親愛的會員們放心使用這份 box-layout.css
請特別注意：box-layout.css 的使用方式為加入至現有的CSS中，而不是完全取代喔！並且請將它放在整個CSS樣式表的最下方！

相關的樣式問題請至 PIXNET服務專區 - Pixnet CSS 設計交流區　
如果您有常見的排版問題也歡迎以迴響方式告知我們，我們會依照出現機率決定是否新增至 box-layout.css 中

box-layout.css 可以解決以下五項常見狀況：

以下為 box-layout.css 之內容，請全部複製，或依您部落格狀況選取對應的 CSS code
請特別注意：box-layout.css 的使用方式為加入至現有的CSS中，而不是完全取代喔！並且請將它放在整個CSS樣式表的最下方！

/*------------------------------------------------------------
以下為   PIXNET 部落格痞客模版專用 box-layout.css
任何疑問請至 PIXNET - 服務專區 Pixnet CSS 設計交流區
http://support.pixnet.tw/index.php?board=6.0
------------------------------------------------------------*/

/* 誰來我家田字型排版 */
#visitor ul{
   _height: 1% ;
   overflow: hidden ;
   _overflow: none ;
}
#visitor li{
   float:left ;
}

/* 我去誰家田字型排版 */
#crumb ul{
   _height: 1% ;
   overflow: hidden ;
   _overflow: none ;
}
#crumb li{
   float:left ;
}

/* 碎碎唸聯播好友圖像靠左文字靠右 */
#broadcast ul{
   _height: 1% ;
   overflow: hidden ;
   _overflow: none ;
}
.broadcast-photo{
   float:left ;
}

/* 解決迴響樓梯型歪斜排版問題 + 文字重疊問題　迴響人圖像靠左迴響內容靠右 */
.single-post{
   _height: 1% ;
   overflow: hidden ;
   _overflow: none ;
}
.post-photo{
   width:120px ;
   float:left ;
   text-align:Center ;
}

/* 解決圖片太大撐破版面，側邊欄往下掉的問題 */
#content{
    overflow: hidden ;
}

/*-------------------- 以上為   PIXNET 部落格痞客模版專用 box-layout.css   --------------------*/

admin 發表在 PIXNET 痞客邦迴響(36) 引用(0) 人氣(4866)