公告
部落格搬家教學 (想從其他部落格搬來的都請參考看看)
各位親愛的會員大家好:

部落格痞客模版在設計當時所遵循的原則是以最佳方式呈現網頁的語意
所以在編寫架構的時候完全沒有使用任何的排版及外觀樣式(純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   --------------------*/

痞客邦站方公告 發表在 痞客邦 PIXNET 留言(36) 人氣()


留言列表 (36)

發表留言
  • hua
  • 好詳細呀~ 真是太好了~ ^^
  • 橘栗子
  • 請問,
    如果是網誌文章的文字重疊呢@@?
    這個有辦法用css修復嗎???
  • chienyuchia
  • 還不錯~
    挑幾個起來用
  • pali0621
  • 謝謝詳盡的解說! 感恩ㄟ!
  • ffmuteki9
  • 真的很實用
  • pinkyvivi
  • 哈~XD謝謝喔~
    我今天才發現這個問題!馬上就有解決方案~
    你們真是天使痞客天團呢!
  • luckyroger
  • 真棒的圖解呢:P
  • sty0805
  • 好棒噢 *
  • Tienming
  • 太實用了!這個

    這個真的是超實用的說!
  • 大湯姆
  • 真是太棒了!有夠貼心的~讚!
  • dense302
  • 圖文解說不錯喔

    剛剛才發現非VIP的誰來我家改成5筆了
  • ttanya
  • haha ^^ I like it
  • 小無
  • 其實我還挺喜歡側邊欄被擠掉的情況耶XD 因為可以完整的看大圖XD
    不過還是感謝P團隊的用心和貼心:) 
  • 無小雙
  • 你們實在太用心了!
    真是佛心來的呀~~
  • ejp3
  • wooooo
    酷耶
  • yoyocat24
  • 酷斃酷斃~~唷唷唷唷
  • toprich
  • 建議

    建議box-layout.css改為可以複製
  • selena0612
  • 哇嗚

    感謝

    另希望兩欄式的網誌版面可以多一點
    好讓大家可以有更多選擇
    (小妹個人比較偏好兩欄式的啦,因為比較一目了然,方便閱讀
    有滾軸的,要下拉,且切割畫面,搞的有點亂咧...)
  • OneWei
  • 能解決版面問題看起來就清爽多了!
    過去總因為版面錯亂好多版面樣式只能忍痛放棄…
  • waiwai0308
  • 太讚了啦...對新手而言來說非常棒難怪我都想說為啥都只能排直的...
  • soullegend
  • O口O

    超用心>w<
  • soullegend
  • 話說回來,還是不能讓我們設定各分類下預設標題列表或簡短摘要嗎?
  • ayu0515
  • 好貼心

    圖片好用心
    辛苦喔 XD
  • snoopy0614
  • ^^

    太棒了~
    謝謝~
  • meng33meng
  • 有圖解耶~真好懂~THANKS
  • MDMA
  • 奇怪

    照裡面CSS複製下來後
    貼到我的語法最底下~~但是問題還是沒改善耶
    不知道是哪邊出了問題~~
    可以幫我看看嗎~~~~3Q
  • MDMA
  • 啊!!!

    原來是我使用"方格黑"版面的關係@@"
    真是................美中不足>"<
  • jck11
  • 好像不錯喔,謝謝啦。
  • FoxyFeeling
  • 為什麼不能複製咧
    @_____@ 我剛試了半天失敗。
  • Una
  • 我也不能複製。
  • nickelback5
  • 真的好詳細
    謝謝
  • 小佳
  • 還是不會吶

    可以在交交我嗎??
    我有設定哩!!
    不過還是沒有出來~
    那請問rss如果是無名的那要怎麼訂閱呢??
    3q
  • scwuaptx
  • 寫的真好
    感謝分享
【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消