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痞客邦|申請帳號|會員服務專區*/