文章發佈於Sevendesign,如需轉貼請保留本訊息,並註明原文連結
原文連結:http://sevendesign1230.pixnet.net/blog/post/2460072

我想大家一定知道,早在之前痞客就已經釋出CSS架構圖,雖然我們可以藉由架構圖來了解痞客幫的整體架構,但是卻還是困擾著不擅CSS的朋友。 在現在網路上應該也有許多網友釋出CSS架構表,但事實上卻還是存有許多的缺陷。在此,我做了一份淺顯易懂且詳細的痞客幫CSS架構表,雖仍不盡完善(若有相關問題煩請網友們能提出修正,謝謝),但希望提供給更多的朋友使用;請搭配痞客幫CSS架構圖讓您更得心應手。

Html  /*整體設定.可在此設定捲軸顏色*/
body  /*整體設定*/
#body-div  /*整個頁面*/
a  /*超連結*/
a:hover  /*滑鼠移動到超連結上時*/

#authority  /*後台功能列(發表新文章.管理後台)*/
└#authority a  /*後台功能列超連結文字--*/
└#authority a:hover  /*後台功能列滑鼠在連結上--*/
└ #authority #newpost /*發表新文章功能鈕*/
└ #authority #backstage /*進入後台功能鈕*/

#container  /*所有內容區塊*/
#container2  /*所有內容區塊2*/
#container3  /*所有內容區塊3*/
└ #header  /*橫幅*/
    └ #login-bar  /*招呼語&登入登出*/
    └ #banner   /*橫幅主要內容*/
        └ #banner h1 a  /*部落格標題連結*/
     └ #banner h1 a:hover   /*部落格標題滑鼠在連結上*/
     └ #banner .skiplink   /*跳到主文*/
     └ #banner h2   /*部落格描述*/
     └ #banner h2 a   /*部落格描述連結*/
     └ #banner h2 a:hover   /*部落格描述滑鼠在連結上*/
     └ #blog-category   /*部落格全站分類*/
     └ #blog-category a   /*部落格全站分類連結*/
     └ #blog-category a:hover   /*部落格全站分類滑鼠在連結上*/
    └ #navigation  /*其他服務連結區塊*/
     └ #navigation a   /*其他服務連結*/
     └ #navigation a:hover   /*其他服務滑鼠在連結上*/
     └ #navigation li   /*其他服務連結區塊內的所有項目*/
     └ #navigation li #link-album /*相簿連結*/
     └ #navigation li #link-blog   /*部落格連結*/
     └ #navigation li #link-guestbook   /*留言板連結*/
     └ #navigation li #link-profile   /*名片連結*/
└ #main  /*主要內容區塊*/
    └ #content  /*主要內容區*/
      └ #spotlight   /*公告版位區塊*/
       └ #spotlight h5 /*公告版位標題*/
         └ #spotlight h5 a /*公告版位標題連結*/
       └ #spotlight h5 a:hover /*公告版位標題滑鼠在連結上*/
         └ #spotlight-text /*公告版位內容*/
       └ #spotlight-text a /*公告版位內容連結*/
       └ #spotlight-text a:hover   /*公告版位內容滑鼠在連結上*/

      └ #article-area   /*文章+列表+回應區塊*/
       └ #article-box   /*文章+列表區塊*/
         └ .article-area-title   /*所有文章區塊標題(目前分類)*/
         └ #view-mode   /*瀏覽模式區塊*/
            └ #view-mode span  /*瀏覽方式四字*/
            └ #view-mode span a  /*瀏覽模式連結*/
            └ #view-mode span a:hover  /*瀏覽模式滑鼠在連結上*/
         └ .article /*單篇文章*/
            └ .article-head  /*單篇文章標題+發表時間*/
               └ .publish{}  /*發表時間*/
               └ .year{}  /*年*/
               └ .month{}  /*月份*/
               └ .date{}  /*日期*/
               └ .day{}  /*星期*/
               └ .time{}  /*時間*/
               └ .title  /*單篇文章標題區塊*/
                  └ .title h2 a /*文章標題*/
                  └ .title h2 a:hover /*文章標題滑鼠在連結上*/
                  └ .title h2 img{}  /*文章標題前的密碼圖示|隱藏圖示|好友保護圖示*/
            └ .article-head .article-body  /*文章內容區*/
               └ .bookmark  /*加入書籤*/
               └ .article-content  /*文章內容*/
               └ .article-content a  /*文章內容內連結*/
               └ .article-content a:hover   /*文章內容內滑鼠在連結上*/
               └ .more/*繼續閱讀*/
               └ .fans-club  /*小圈圈討論*/
               └ .author/*發表作者與時間*/
               └ .farward/*推薦上專欄|轉寄文章*/
            └ .article-footer  /*文章附加資訊*/
               └ .refer  /*全站分類+個人分類*/
               └ .history  /*歷史上的今天區塊*/
                  └ .history h6  /*歷史上的今天標題*/
                  └ .history ul  /*文章分類*/
                  └ .history ul li /*文章分類項目*/
               └ .back-to-top /*回到頁首*/
                  └ .back-to-top a  /*回到頁首連結*/
                  └ .back-to-top a:hover  /*回到頁首滑鼠在連結上*/
         └ .main-list   /*瀏覽方式:標題列表區塊*/
            └ .main-list a  /*文章名稱連結*/
            └ .main-list a:hover  /*文章名稱滑鼠在連結上*/
            └ .main-list table  /*列表表格*/
            └ .main-list h3  /*列表標題*/
            └ .main-list th  /*列表表頭表格*/
               └ .main-list th.list-num  /*編號標題*/
                 └ .main-list th.list-date  /*發表時間標題*/
                 └ .main-list th.list-title  /*文章標題標題*/
                 └ .main-list th.list-visit  /*人氣標題*/
                 └ .main-list th.list-comment  /*迴響標題*/
               └ .main-list td  /*列表一般表格*/
                 └ .main-list td.list-num  /*編號*/
                 └ .main-list td.list-date  /*發表時間*/
                 └ .main-list td.list-title  /*文章名稱*/
                 └ .main-list td.list-visit  /*人氣內容*/
                 └ .main-list td.list-comment  /*迴響內容*/
       └ #user-post   /*回應+引用區塊*/
         └ #trackback-box.user-post-box   /*引用區塊*/
          └ #trackback-title.user-post-title   /*引用區塊標題*/
              └ #trackback-title.user-post-title img  /*開合圖示*/
              └ #trackback-title.user-post-title span  /*標題文字*/
            └ #trackback-box #trackback-url  /*引用網址*/
              └ #trackback-box input#trackback-input  /*引用網址列*/
              └ #trackback-box #trackback-box input  /*按鈕*/
          └ #trackback-text.user-post-text   /*所有引用區塊*/
              └ #tackback-text .single-post   /*單一引用*/
               └ #trackback-text .post-info  /*飲用者資訊*/
               └ #trackback-box .post-text  /*單一引用內容*/
         └ #comment-box.user-post-box   /*迴響區塊*/
          └ #comment-box .user-post-title   /*迴響列表標題*/
             └ #comment-box .user-post-title img  /*開合圖示*/
             └ #comment-box .user-post-title span  /*標題文字*/
             └ #content .post-comment  /*發表留言按鈕*/
             └ #content .post-comment a  /*發表留言按鈕連結*/
             └ #content .post-comment a:hover  /*發表留言按鈕滑鼠在連結上*/
          └ #comment-text.user-post-text   /*所有迴響區塊*/
             └ .single-post  /*單一迴響區塊*/
                └ .single-post .post-info  /*迴響者資訊*/
                   └ .floor  /*樓層*/
                   └ img.hidden-message /*悄悄話圖示*/
                   └ .user-name a  /*迴響者名稱連結*/
                   └ .user-name a:hover  /*迴響者名稱滑鼠在連結上*/
                   └ .pixnet-user  /*痞客幫會員圖式*/
                   └ .home-page a  /*迴響者網址*/
                   └ .post-time  /*留下迴響時間*/
                   └ .show-message | .hide-message  /*公開|隱藏*/
                   └ .delete-messaage  /*刪除迴響*/
                   └ .reply-message  /*回覆迴響*/
                   └ .user-ip  /*迴響者ip*/
               └ .single-post .post-photo  /*迴響者頭像*/
               └ .single-post .post-text  /*單一迴響內容區塊*/
                  └ .single-post .post-text p  /*單一迴響內容區塊內容*/
               └ .single-post .reply-text  /*回覆迴響內容區塊*/
                  └ .single-post .reply-text p  /*回覆迴響內容區塊內容*/
          └ #comment-form   /*迴響留言區塊*/
             └ #comment-form p  /*本篇迴響權限*/
             └ #comment-form table  /*迴響留言表格*/
             └ #comment-form table tr.comment-form-title  /*留下迴響區塊*/
             └ #comment-form table tr.comment-form-title h4  /*留下迴響標題*/
             └ #comment-form table th  /*標題欄位區塊*/
             └ #comment-form table th font  /*標題欄位星號*/
             └ #comment-form table td  /*輸入欄位區塊*/
             └ #comment-form input#blogcommenttext_name  /*迴響者名稱*/
             └ #comment-form input  /*輸入欄位(電子郵件+個人網頁+留言標題)*/
             └ #comment-form input.radio  /*選項按鈕*/
             └ #comment-form textarea  /*留言區塊*/
             └ #comment-form input#send-comment  /*送出按鈕*/
       └ .page a   /*頁數連結*/
       └ .page a:hover   /*頁數滑鼠在連結上*/

    └ #links  /*側欄功能列*/
    └ #links-row-2   /*三欄示第二欄*/
    └ #links-row-1   /*三欄示第一欄*/
      └ #headshot   /*個人頭像區塊*/
       └ #headshot .box-title   /*個人頭像標題*/
       └ #headshot .box-text   /*個人頭像內容區塊*/
           └ #headshot li#headshot-img  /*個人頭像*/
         └ #headshot li#friend-apply   /*申請好友*/
         └ #headshot li#send-message   /*傳送私訊*/
      └ #murmur   /*我的碎碎唸區塊*/
       └ #murmur .box-title   /*我的碎碎唸標題*/
       └ #murmur .box-text   /*我的碎碎唸內容區塊*/
           └ #murmur .box-more a  /*更新|所有歷史碎碎唸連結*/
           └ #murmur .box-more a:hover  /*更新|所有歷史碎碎唸滑鼠在連結上*/
           └ .murmur-time  /*發表時間*/
      └ #broadcast   /*好友的碎碎唸區塊*/
       └ #broadcast .box-title   /*好友的碎碎唸標題*/
       └ #broadcast .box-text   /*好友的碎碎唸內容區塊*/
           └ #broadcastr .box-more ul  /*單一好友的碎碎念*/
           └ .broadcast-photo  /*好友頭像*/
           └ .broadcast-time  /*好友發表時間*/
           └ .broadcast-text  /*好友碎碎念內容*/
      └ #counter   /*參觀人氣區塊*/
       └ #counter .box-title   /*參觀人氣標題*/
       └ #counter .box-text   /*參觀人氣內容區塊*/
           └ #counter .box-text li  /*本日人氣|累積人氣*/
           └ #counter SPAN  /*本日人氣&累積人氣數字*/
      └ #calendar   /*月曆區塊*/
       └ #calendar .box-title   /*月曆標題*/
       └ #calendar .box-text   /*月曆內容區塊*/
           └ #calendar table  /*月曆表格*/
            └ #calendar th  /*年月星期 欄位*/
            └ #calendar td  /*日期 欄位*/
            └ #calendar td a  /*日期內有文章的連結*/
            └ #calendar td a:hover  /*日期內有文章滑鼠在連結上*/
            └ #calendar .mouth-nav  /*切換月份的那一行*/
            └ #calendar .cal-backward   /*上個月箭頭*/
            └ #calendar .current-month  /*現在月份*/
            └ #calendar .cal-forward  /*下個月箭頭*/
            └ #calendar .weekday  /*星期*/
      └ #recent-article   /*近期文章區塊*/
       └ #recent-article .box-title   /*近期文章標題*/
       └ #recent-article .box-text   /*近期文章內容區塊*/
           └ #recent-article ul  /*近期文章項目*/
           └ #recent-article ul li a /*單筆近期文章*/
           └ #recent-article ul li a:hover /*單筆近期滑鼠在連結上*/
           └ #recent-article img  /*近期文章內容圖示*/
      └ #hot-article   /*熱門文章區塊*/
       └ #hot-article .box-title   /*熱門文章標題*/
       └ #hot-article .box-text   /*熱門文章內容區塊*/
           └ #hot-article ul  /*熱門文章項目*/
           └ #hot-article ul li a /*熱門文章文章*/
           └ #hot-article ul li a:hover /*熱門文章滑鼠在連結上*/
      └ #category   /*文章分類區塊*/
       └ #category .box-title   /*文章分類標題*/
       └ #category .box-text   /*文章分類內容區塊*/
       └ #category .box-more   /*總開合按鈕*/
           └ #category .box-more img  /*總開合按鈕圖示*/
           └ #category ul li /*未分類文章*/
           └ #category .inner-box h6  /*單一分類標題*/
           └ #category .inner-box img  /*單一分類開合按鈕*/
           └ #category .inner-box ul li a  /*單一分類項目連結*/
           └ #category .inner-box ul li a:hover  /*單一分類項目滑鼠在連結上*/
      └ #archive   /*文章精選區塊*/
       └ #archive .box-title   /*文章精選標題*/
       └ #archive .box-text   /*文章精選內容區塊*/
           └ #archive .box-text .select  /*月份選單*/
           └ #archive .box-more  /*所有文章列表*/
           └ #archive .box-more a  /*所有文章列表連結*/
           └ #archive .box-more a:hover  /*所有文章列表滑鼠在連結上*/
      └ #latest-comment   /*最新迴響區塊*/
       └ #latest-comment .box-title   /*最新迴響標題*/
       └ #latest-comment .box-text   /*最新迴響內容區塊*/
           └ #latest-comment ul li a /*單篇最新迴響內容連結*/
           └ #latest-comment ul li a:hover /*單篇最新迴響內容滑鼠在連結上*/
           └ #latest-comment span  /*迴響日期*/
      └ #latest-trackback   /*文章精選區塊*/
       └ #latest-trackback .box-title   /*文章精選標題*/
       └ #latest-trackback .box-text   /*文章精選內容區塊*/
           └ #latest-trackback ul li a /*引用過去的文章標題連結*/
           └ #latest-trackback ul li a:hover /*引用過去的文章標題滑鼠在連結上*/
           └ #latest-trackback span  /*引用過去的部落格主標*/
      └ #subscription   /*最新訂閱區塊*/
       └ #subscription .box-title   /*最新訂閱標題*/
       └ #subscription .box-text   /*最新訂閱內容區塊*/
           └ #subscription ul li a  /*訂閱對方的新文章標題連結*/
           └ #subscription ul li a:hover  /*訂閱對方的新文章標題滑鼠在連結上*/
           └ #subscription span  /*訂閱對方的部落格主標*/
      └ #search   /*文章搜尋區塊*/
       └ #search .box-title   /*文章搜尋標題*/
       └ #search .box-text   /*文章搜尋內容區塊*/
           └ #search input#search-target  /*搜尋輸入文字欄位*/
           └ #search input#search-send  /*搜尋確定送出按鈕*/
      └ #visitor   /*誰來我家區塊*/
       └ #visitor .box-title   /*誰來我家標題*/
       └ #visitor .box-text   /*誰來我家內容區塊*/
           └ #visitor IMG  /*誰來我家圖像*/
           └ #visitor .box-text ul  /*誰來我家列表*/
           └ #visitor .box-text li a  /*誰來我家項目連結*/
           └ #visitor .box-text li a:hover  /*誰來我家項目滑鼠在連結上*/
           └ #visitor .box-more  /*所有瀏覽列表*/
      └ #crumb   /*我去誰家區塊*/
       └ #crumb .box-title   /*我去誰家標題*/
       └ #crumb .box-text   /*我去誰家內容區塊*/
           └ #crumb IMG  /*我去誰家圖像*/
           └ #crumb .box-text ul  /*我去誰家列表*/
           └ #crumb .box-text li a  /*我去誰家項目連結*/
           └ #crumb .box-text li a:hover  /*我去誰家項目滑鼠在連結上*/
           └ #crumb .box-more  /*所有瀏覽列表*/
      └ #mylink   /*我的連結區塊*/
       └ #mylink .box-title   /*我的連結標題*/
       └ #mylink .box-text   /*我的連結內容區塊*/
       └ #mylink .link-box   /*單一連結分類*/
           └ #mylink .inner-box h6  /*單一連結標題*/
           └ #mylink .inner-box ul li a /*單一連結項目連結*/
           └ #mylink .inner-box ul li a:hover /*單一連結項目滑鼠在連結上*/
      └ #favorite   /*我的蒐藏*/
       └ #favorite .box-title   /*我的蒐藏標題*/
       └ #favorite .box-text   /*我的蒐藏內容區塊*/
           └ #favorite .box-text select /*我的蒐藏選單*/
      └ #feed   /*新聞交換區塊*/
       └ #feed .box-title   /*新聞交換標題*/
       └ #feed .box-text   /*新聞交換內容區塊*/
           └ #feed .box-text ul li /*新聞交換項目*/
           └ #feed .box-text ul li img  /*新聞交換圖示*/
      └ #announce   /*站方公告區塊*/
       └ #announce .box-title   /*站方公告標題*/
       └ #announce .box-text   /*站方公告內容區塊*/
           └ #announce .box-text ul  /*站方公告列表*/
           └ #announce .box-text li a  /*站方公告項目連結*/
           └ #announce .box-text li a:hover  /*站方公告滑鼠在連結上*/
      └ #events   /*活動快報區塊*/
       └ #events .box-title   /*活動快報標題*/
       └ #events .box-text   /*活動快報內容區塊*/
      └ #powered   /*服務提供區塊*/
       └ #powered .box-title   /*服務提供標題*/
       └ #powered .box-text   /*服務提供內容區塊*/
           └ #mylink .inner-box ul li  /*ooo帳號登入中字眼*/
           └ #mylink .inner-box ul li a /*登入登出連結*/
           └ #mylink .inner-box ul li a:hover /*登入登出滑鼠在連結上*/
      └ #folder  /*所有自訂欄位區塊*/
       └ #folder .box-title   /*所有自訂欄位標題*/
       └ #folder .box-text   /*所有自訂欄位內容區塊*/
    └ #footer  /*頁尾*/
       └ #footer p  /*頁尾描述*/
       └ #footer #bottom  /*頁尾超連結*/
       └ #footer a.bottom-skiplink  /*回到頁首|回到主文*/
       └ #footer a.bottom-pixnet  /*PIXNET痞客邦|申請帳號|會員服務專區*/

Seven 發表在 痞客邦 PIXNET 留言(14) 人氣()


留言列表 (14)

發表留言
  • yingmei75
  • 真的很詳盡…區分的一目了然,感謝大大的用心!
    一定可以幫助更多初學者的!:D
    (也幫助像我這種懶的背標籤的人XDD)
  • 我的用意就是希望能幫助更多人呀^^謝謝您的讚美喔!

    Seven 於 2009/11/30 08:51 回覆

  • unrealwhisper
  • 嗯~~實在是太偉大了><
    今晚我要好好的研究^^
    謝謝*
  • ^^有問題歡迎提問~其實概念懂就不難的!!

    Seven 於 2010/02/06 19:19 回覆

  • Niota
  • 太好了,我正在傷腦經呢?太感謝了
  • 不會拉~希望能幫助到你喔^^

    Seven 於 2010/02/09 10:30 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 月橘
  • 好文章就該留言鼓勵
    謝謝你的整理,引用囉
  • 歡迎取用~歡迎指教喔^^

    Seven 於 2010/07/27 10:11 回覆

  • Finkel
  • 一目瞭然,十分清楚
    看來您研究的很透徹
    謝謝您的分享~
  • 不會的,希望可以幫助到更多的朋友^^

    Seven 於 2010/12/28 17:46 回覆

  • 創意產業中心
  • 請問~我可以在#navigation的地方再加入一個新的連結嗎???CSS是否無法自己加新的連結位置呢???
    不知道這樣您懂不懂我的意思~我是新手~第一次用pixnet~
  • 有些東西是官方內建的設定~我們只能修改原有設定的東西,並不能改到html的設定唷!有些人是以別的方式去改變成多的連結按鈕,像我這個也是其中一個方式!

    Seven 於 2010/12/28 17:50 回覆

  • 小鋼珠
  • 真是謝謝謝你了
  • 希望有幫助到你

    Seven 於 2011/03/01 15:15 回覆

  • 天秤女~佳佳
  • 很有用
    謝啦!!!
  • 不會的~希望有幫助到你

    Seven 於 2011/03/01 15:19 回覆

  • 搞曖昧
  • 你好~
    上面有個留言有提及該如何在navigation的部分加入新連結

    像是這樣 http://shurtf16.pixnet.net/blog
    還有下拉式選單

    是不是無法從navigation的部分修改呢??

    或者有什麼其他的方法可以做到這點? ..

    目前非常煩惱=口= .. 麻煩高手解惑了

    如果不方便回應的話
    我的信箱是 lasaioh@gmail.com

    THX A LOT!!
  • lainancy
  • 找到你這兒真棒!
    讓剛搬家的我解決了很多問題。
    謝謝!
【 X 關閉 】

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

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

立即填寫取消