痞客CSS架構表 @ NEKO ＳmiＬE ：）

右鍵開放分享，但請尊重原著，切勿做商業行為(用途)使用或盜圖或盜文，或抄襲刻章販售，謝謝！ / 貓貓的貼紙

貓貓新書-幸福印記:超可愛創意手工章活動公佈欄
　　→ 3/24 私藏不藏私-幸福印記‧私心話暨簽書蓋書會
　　→ 4/7 小小咖啡-幸福印記‧手作課程暨簽書蓋書會
　　→ 4/14 小南風minami zephyr-幸福印記‧手作課程暨簽書蓋書會
　　→ 幸福印記專屬限量明信片開始索取囉!

合作.邀約.開課等...請來信lovejie2005@gmail.com / 加入neko*就愛[純粹幸福]的粉絲團

Sep 22 Sat 2007 18:36
痞客CSS架構表

學習CSS我是以速成法的方式,指的是現學現賣~
想到什麼,我就拿著收集的資料,直接試...所以可能方法沒那麼正統!
大家多多見諒~
學CSS的第一步,先了解CSS是什麼?
簡單來說,CSS是串聯樣式表,
透過CSS我們可以更精確的控制頁面.文字.背景等...

我想大家一定都知道目前痞客釋出了CSS架構圖,
可以藉由了解CSS架構圖和表,
再使用CSS的樣式表下去做變化!!

因為有很厲害的網友已經整理好的了,所以A. Q. 直接轉載,大家可以看一下!!
轉載自★┐涵‧苞‧待‧放┌☆

整個頁面

body/*整個介頁面*/
#body-div/*整個頁面*/
a/*超連結*/
a:hover/*滑鼠移動到超連結上時*/

後台管理

#authority/*後台管理列*/
#newpost/*發表新文章*/
#backstage/*進入後台*/
#container/*所有內容區塊*/
#container2/*所有內容區塊2*/
#container3/*所有內容區塊3*/

橫幅

#header/*橫幅*/
#login-bar/*招呼語&登入登出*/
#banner/*橫幅主要內容*/
#banner h1/*部落格標題*/
#banner .skiplink/*跳到主文*/
#banner h2/*部落格描述*/
#blog-category/*部落格全站分類*/

其他服務頁面導覽

#navigation/*其他服務頁面導覽*/
#navigation a/*其他服務連結區塊內的所有連結*/
#navigation li/*其他服務連結區塊內的所有項目*/
#link-album/*相簿連結*/
#link-blog/*部落格連結*/
#link-guestbook/*留言版連結*/
#link-profile/*名片連結*/

主要內容區

#content/*主要內容區*/
↑指文章區塊的全區

公告區

#spotlight/*公告版位*/
#spotlight h5/*公告版位標題*/
#spotlight-text/*公告版位內容*/

文章區

#article-area/*文章+列表+回應區塊*/
#article-box/*文章+列表區塊*/
.article-area-title/*文章+列表區塊之標題*/
#display/*瀏覽模式*/
#display span/*瀏覽方式這四個字*/{}
#display a/*標題列表/簡短摘要*/{}
.article-head/*文章標題+發表時間*/
.publish/*發表時間*/
.month/*月*/
.date/*日*/
.dat/*週*/
.year/*年*/
.time/*時*/
.title h2 a/*文章標題*/
.title h2 img/*文章標題前的密碼圖示/隱藏圖示/好友保護圖示*/{}
.article-body/*文章內容區*/
.bookmark/*加入書籤*/
.article-content/*文章內文*/
.more/*繼續閱讀*/
.fans-club/*小圈圈討論*/
.author/*發表作者和時間*/
.farward/*轉寄文章*/
.article-footer/*文章附加資訊*/
.refer/*文章分類*/
.history/*歷史上的今天*/
h6/*歷史上的今天的標題*/
ul/*文章分類*/
.back-to-top/*回到頁首*/
.main-list/*標題模式的文章列表*/
table/*表格*/
tr/*行*/
.list-num/*標號標題*/
.list-date/*發表時間標題*/
.list-title/*文章標題標題*/
.list-visit/*人氣標題*/

文章回應及引用區

.list-comment/*回應標題*/
#user-post/*回應+引用區塊*/
#trackback-box.user-post-box/*引用區塊*/
#trackback-title.user-post-title/*引用區塊標題*/
.img/*開合圖示*/
.span/*標題文字*/
#trackback-url/*引用網址*/
#trackback-input/*網址鈕*/

.input/*複製鈕*/
#trackback-text.user-post-text/*所有引用區塊*/
.single-post/*單一引用*/
.post-info/*引用者資訊*/
.post-text/*單一引用內容*/
#comment-box.user-posy-box/*回響區塊*/
#comment-title.user-post-title/*回響區塊標題*/
.img/*開合圖示*/
.span/*標題文字*/
.post-comment/*留下回響*/
a/*留下回響超連結*/

#comment-text.user-post-text/*所有回響區塊*/

#user-post/*引用及回應列表全部的大範圍*/
#trackback-box/*僅引用區塊*/
#trackback-text/*引用內容區塊*/
#trackback-title/*引用列表標題*/
#trackback-box .single-post/*單一引用*/

.post-comment/*留下迴響*/
#comment-box/*僅回應列表*/
#comment-title/*回應列表標題*/
#comment-text/*回應內容區塊*/
#comment-box .single-post/*單一回應*/
.reply-message/*回覆回響*/
.user-ip/*回響者IP*/
.post-photo/*回響者頭像*/
.a img/*回響者頭像*/
.post-text/*單一回響內容*/
.lireply-text/*回覆回響內容*/
a/*留下回響超連結*/
.page/*頁數*/
.post-info/*回響者資訊*/
.b/*樓層數*/
.img.hidden-message/*公開/隱藏回響*/
.user-name/*回響者名稱*/
.img.pixnet-user/*PIXNET會員圖示*/
.home-page/*回響者網址*/
.span.post-time/*留下回響時間*/

.user-post-title/*引用列表標題+回應列表標題*/;
.user-post-text/*引用內容區塊+回應內容區塊*/
.single-post/*單一引用+單一回應*/
.post-info/*引用者資訊+回應者資訊*/
.post-text/*單一引用內容+單一回應內容*/
.post-text p/*單一引用標題+單一回應標題*/

.reply-text/*版主回覆內容*/
.reply-text p/*版主回覆資訊*/
.secret/*悄悄話*/
.show-message/a.hide-message/*公開/隱藏*/
.delete-message/*刪除回響*/

側欄工具列

#links/*側欄工具列*/
#links-row-1/*3欄是第1欄*/
#links-row-2/*3欄式第2欄*/

誰來我家

#visitor.box/*誰來我家*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.li a img/*訪客頭像*/
.box-more
.a/*所有訪客列表*/

碎碎唸

#murmur.box/*碎碎念*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.murmur-time/*碎碎念發表時間*/
.murmur-text/*碎碎念內容*/
.box-more/*所有歷史碎碎念*/
.box-more a/*所有歷史碎碎念*/
#my-photo/*版主頭像*/
#my-status/*碎碎唸文字內容*/

好友的碎碎唸聯播

#broadcast.box/*好友的碎碎念聯播*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
ul/*好友的碎碎念*/
.broadcast-photo/*好友頭像*/
.broadcast-time/*好友發表時間*/
.broadcast-text/*好友碎碎念內容*/

搜尋

#search/*搜尋*/
#search .box-title/*搜尋標頭*/
#search .box-text/*搜尋內容區塊*/
#search-target/*搜尋輸入文字欄位*/
#search-send/*搜尋確定鈕*/

麻吉交流

#headshot.box/*麻吉交流*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#headshot-img/*個人頭像*/
#friend-apply/*申請好友*/
#send-message/*傳送私訊*/

參觀人氣

#counter.box/*參觀人氣*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#countr .box-text span/*人氣數字*/

更換樣式

#change-theme/*更換樣式*/
#change-theme .box-title/*更換樣式標頭*/
#change-theme .box-text/*更換樣式內容區塊*/
#change-theme select/*更換樣式選單*/

新聞交換

#feed.box/*新聞交換*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#feed img/*新聞交換icon*/

月曆

#calendar.box/*月曆*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
table/*月曆表格*/
.mouth-nav/*切換月份的那一行*/
.cal-backward/*上個月*/
.current-mourh/*現在月份*/
.cal-forward/*下個月*/
.weekday/*星期*/
#calendar .calMonthNav/*選擇月份的那一欄*/
#calendar .calMonthHeader/*星期幾的那一欄*/
#calendar td/*日期儲存格*/
#calendar td a/*月當天有寫文章的儲存格*/

近期文章

#recent-article.box/*近期文章*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#recent-article .box-text .a/*文章標題*/

熱門文章

#hot-article.box/*熱門文章*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#hot-article .box-text .a/*文章標題*/

文章分類

#category/*文章分類*/
#category .box-title/*側欄區塊標題*/
#category .box-text/*側欄區塊內容*/
#category .box-text.box-more/*總開何按鈕*/
#category .box-text.img/*按鈕*/
#category .box-text.div/*單一分類目錄*/
#category .box-text.img/*分類目錄開合按鈕*/
#category .box-text.ul/*目錄內容*/
#category .box-text.a/*目錄名稱*/
#category .box-text h6/*文章分類的分類目錄*/

文章彙整

#archive.box/*文章彙整*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.select/*月份選單*/
.a/*所有文章列表超連結*/
#archive .box-text li a/*所有文章列表*/

最新回響

#latest-comment.box/*最新回響*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#latest-comment .box-text span/*最新迴響-迴響日期*/
#latest-comment .box-text li a/*-最新迴響-迴響摘要*/

最新引用

#latest-trackback.box/*最新引用*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#latest-trackback .box-text li a/*引用過去的文章標題*/
#latest-trackback .box-text li span/*引用過去的部落格主標*/

最新訂閱

#subscription.box/*最新訂閱*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#subscription .box-text li a/*最新訂閱-訂閱對方的新文章標題*/
#subscription .box-text li span/*最新訂閱-訂閱對方的部落格主標*/

我的蒐藏

#favorite/*我的蒐藏*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.select/*我的蒐藏選單*/

我的連結

#mylink.box/*我的連結*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.link-box/*單一連結分類*/
.h6/*連結分類標題*/
#my-link .box-text .link-box li.a/*單一個我的連結*/

自訂欄位

.folder/*所有自訂欄位*/
.folder .box-title/*所有自訂欄位標頭*/
.folder .box-text/*所有自訂欄位內容區塊*/

服務提供

#powered.box/*服務提供*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.a/*登入登出連結*/

頁尾

#footer/*頁尾*/
.p/*頁尾描述*/
#bottom/*頁尾超連結*/
.bottom-skiplink/*回到頁首\回到主文*/
.bottom-pixnet/*PIXNET痞客邦\申請帳號\會員服務專區*/

文章列表

.main-list/*列表*/
.main-list table/*列表表格*/
.main-list h3/*列表標題*/
.main-list th/*列表表頭表格*/
.main-list td/*列表一般表格*/
.main-list a/*列表文章名稱*/
#article-list/*所有文章列表*/
#category-list/*單一分類文章列表*/
#murmur-list/*所有歷史狀態列表*/

先了解這些標籤指的是哪些區塊很重要,只要知道他們指哪裡的,
我們就可以加上樣式表的內容去設計囉!!

建議朋友可以開個Notepad貼在裡面,需要時拿出來看看~才不會手忙腳亂!
像A. Q.是直接印成資料,要找時,會快的多!!

下一次跟大家說樣式表有哪些喔~知道架構後,再加上樣式就可以開始設計了!
大家加油喔~有不懂的再問我喔!
另外,寫的很差別打我啊^

Posted by 貓貓 at 痞客邦 PIXNET 留言(109) 引用(9) 人氣()

Forward by E-mail Forward to Guestbook

全站分類：No Category
Personal Category:★ css 教える
Previous post in this category: 學習寫CSS語法
Next post in this category: 捲軸顏色
上一篇：學習寫CSS語法
下一篇：捲軸顏色

▲top

Trackbacks (9)

#1 by •｡ .*ღ.:｡.樂天丫如 A 哩哩叩叩..｡ .ღ*.｡• ::PIXNET BLOG:: 於 26 June, 2008 19:01
痞客CSS架構表
本文引用自 lovejie2005 - 教學│痞客CSS架構表&nbsp;CSS架構表真的粉有幫助喔~~~轉載L\'amour - Q girl&nbsp;&nbsp;的教學!!附上HTML色碼表...

#2 by [[..紫雁❤王國 ::PIXNET BLOG:: 於 16 August, 2008 17:00
分享×痞客模板架構表
這個痞客模板架構表 ..一開始是在 Pixnet CSS設計交流區看到的..那是我第一天註冊作會員之後看到的..那時候在想..什麼嘛..這個有用嗎?!人家看不懂啦..(關掉)第二次是在找CSS教學的時候看到的....

#3 by 大美の隨想隨記於 10 September, 2008 9:19
CSS架構圖
<a href="http://lovejie2005.pixnet.net/blog/post/9095842"> <img src="http://p0.p.pixnet.ne

#4 by 好梨圃於 3 April, 2009 2:19
CSS苦手
網路上搜到不錯的教學..貓漾女孩 </sp

#5 by 阿小星的窩於 11 November, 2009 23:46
【電腦】CCS語法架構
關於ccs語法架構，這裡"<a href="http://lovejie2005.pixnet.net/blog/post/9095842">ovejie20

#6 by 艾媽@小格於 13 December, 2009 8:10
(尚未設定標題)

#7 by 我的狗寶貝Yogi & 黑糖於 6 January, 2010 22:35
《CSS》PIXNET CSS 架構表

#8 by ~*闇嶽奏章*~ 於 14 February, 2011 11:33
【分享】痞客邦CCS架構表
本文引用自<a href="http://lovejie2005.pixnet.net/blog/post/9095842">lovejie2005 - 痞客CSS架構表</a>

#9 by Breathing 於 29 April, 2011 8:15
【貓貓老師】痞客CSS架構表
本文引用自<a href="http://lovejie2005.pixnet.net/blog/post/9095842">lovejie2005 - 痞客CSS架構表</a>

留言列表 (109)

Post Comment

#1 smilegirl373 on 2007/09/22 21:39
呵呵..A.Q小姐開始開班授課了呢!!
我會跟著妳的步驟一步一步上課喔(嘻嘻)
且慢慢摸索的^^
只是很簡單的教學啦~
^^一起努力喲!!
貓貓 replied in 2007/09/22 22:28

#2 smboy0115 on 2007/09/23 00:54
這個東西太有幫助啦～～～
我對CSS越來越清楚哩～！！
哈哈哈
呵~我的CSS基礎也是由這個來的!!
所以你們先看懂這個就知道要怎麼改囉^^
貓貓 replied in 2007/09/23 08:51

#3 bluemomo on 2007/09/23 06:46
驚人，落落長....
我會很努力的看的，謝謝A.Q.
是啊~落落長...我收集了整本的資料也是這麼多^^加油~
貓貓 replied in 2007/09/23 08:52

#4 chenju8989 on 2007/09/28 10:38
好厲害喔!我可以收藏這篇嗎?
不過，最近實在懶的改版..
可以啊~~^^慢慢來囉!
貓貓 replied in 2007/09/28 10:39

#5 xy9132001 on 2007/09/30 21:58
嘿嘿
阿Q
我來囉
用了你的法寶

換了張小圖片
算是邁向我蓮花版的一大步?
哈哈

畫圈圈一陣子
今天該是出關的時候了
哈哈....
哈...也畫太久了吧!!
貓貓 replied in 2007/09/30 21:59

#6 havic on 2007/10/04 04:18
好阿好...
受益良多耶..
^^
貓貓 replied in 2007/10/04 08:46

#7 cambrian on 2008/01/08 23:17
舉手...
雖然阿q教學了不過我還是不會耶^^"
我把部落格名稱改成顯示了
不過想問阿q那個「跳到主文」可不可以不要讓他顯示呢？
麻煩囉︿︿
你是指最上面的登入那個嗎?
把#login-bar{}
裡面全刪掉,改成display: none; 就好了!
貓貓 replied in 2008/08/22 09:50

#8 cambrian on 2008/01/08 23:18
阿..
忘記說我是套用冷冷冬調！
^^我去看了...
貓貓 replied in 2008/01/08 23:19

#9 cambrian on 2008/01/08 23:39
︿︿
阿q好像也在線上耶！
還有阿q我是想問網誌名稱下方的「跳到主文」那個連結～我有點想把他弄掉^^" 不是最上方登入那個～
...可是我沒有看到跳到主文這個連結哎!而且在我本來的CSS就是隱藏的吶!!
貓貓 replied in 2008/01/08 23:48

Private Comment

#11 smile0711 on 2008/01/12 17:06
好可愛呦^^

打包囉xD

只不過套用了之後

為什麼迴響模式上面還是會有舊的模板的"留下迴響"?

有辦法用掉嗎ˊˇˋ?

#12 smile0711 on 2008/01/12 17:09
結果最後研究出來了xD

原來是我沒把舊的刪掉= =

謝謝分享囉

好可愛^^"
^^
貓貓 replied in 2008/02/15 09:15

#13 harpsicello on 2008/02/15 07:42
謝謝分享！^o^
早知道先來找妳這篇
就不用自己摸半天try死了><
很多人都有分享啊!!
貓貓 replied in 2008/02/15 09:16

#14 jlfwt on 2008/02/26 23:34
感謝^^
這篇真的幫了我很大的忙!!!!
萬分感謝^^
不客氣!!
貓貓 replied in 2008/02/28 20:14

#15 socutei on 2008/03/01 14:29
請問要怎麼將單篇文章人氣隱藏呀??
找好久都找不到><
author span{display:none;}
貓貓 replied in 2008/03/01 14:35

#16 socutei on 2008/03/01 14:56
謝謝^ ___ ^
總算搞好了
不客氣~
有任何問題下次請e-mail發問!
貓貓 replied in 2008/03/01 17:42

#17 marujuana on 2008/03/05 05:16
很謝謝你這一篇~ 師傅~~~(跪拜)
乖乖喔!!
貓貓 replied in 2008/03/05 10:40

#18 visioncafe on 2008/04/11 02:39
真是明燈一盞
一直好想改版但苦無途徑.....看了以上我終於找到可以學習的地方....肛溫阿~(我有所成再請Q大評鑑一下，當然有問題也請Ｑ大不吝賜教)
看到肛溫,我笑了XD

以後有任何問題,放心來問我吧~我會教你的!!
貓貓 replied in 2008/04/11 08:37

#19 a7364881 on 2008/04/27 10:54
還是看不太懂ㄝ
ex)body/*整個介頁面*/
整個介面是要換成蛇ㄇ
=口=我不太了解你的問題吶!!
你要不要寫詳細一點e-mail給我?
貓貓 replied in 2008/04/28 18:33

#20 lunababy on 2008/05/03 20:11
你好,我有用你設計的版面
有修改了連結的圖片^^特此告知一下哩~
( 我不會用CSS,還是靠你這篇文章才找到我要換圖片的地方,受益良多~^^)
OKOK有問題歡迎再到留言版發問喔!
貓貓 replied in 2008/05/05 14:20

#21 kerry204 on 2008/05/23 04:32
你好，我套用了你的模板，並修改了一小部分。我想請問一下為什麼版主留言回覆超過一行的時候，後面的字就不見了呢？該怎麼修改CSS才會讓所有的字顯示出來？謝謝！
???你指哪裡的版主留言回覆???
貓貓 replied in 2008/05/23 15:28

#22 shdog on 2008/05/27 04:30
這篇真是寶耶
師傅..借我轉載一下嚕!
Ok
貓貓 replied in 2008/05/27 15:17

#23 bubblegreen39 on 2008/05/30 01:44
sidebar伸縮問題
請問你知道如何讓sidebar有伸縮的效果嗎？
我爬到的文都沒說痞客邦的要怎麼用，
(都是在說Blogger的比較多)
還是說根本就行不通呢？
這個我不清楚...抱歉!!
貓貓 replied in 2008/05/31 11:21

#24 vivian0422 on 2008/06/26 18:54
這個教學真的太棒了~~
謝謝Q的整理~~

直接拿來引用喔~~
不是我整理的,不過你可以引用!
貓貓 replied in 2008/06/26 18:55

#25 joyce00927 on 2008/07/09 12:30
阿Q~
不好意思想請問妳一下
要讓每篇文章人氣出現
是刪掉css哪個語法哩??
不想隱藏文章人氣請刪除最底層
.author span{display:none;}
想隱藏就反之請加上去!!
貓貓 replied in 2008/07/09 13:15

#26 joyce00927 on 2008/07/09 13:22
實在是太感謝阿Q了~
~.~
^^加油...
貓貓 replied in 2008/07/21 11:12

#27 燕子草 on 2008/07/19 16:59
(吐血)
還是不太懂= =
救救我吧!!
不懂什麼?具體一點的知道,再發問好嗎?
先去研究套用的樣式CSS是怎麼一回事好嗎?
不要這樣亂發問...沒頭沒尾的,
我怎麼知道你問題在哪...
貓貓 replied in 2008/08/22 09:49

#28 lieao on 2008/07/26 23:32
這個教學很棒很棒
謝謝分享
不客氣
貓貓 replied in 2008/07/29 13:49

#29 9527 on 2008/08/04 17:10
小問題可以自己解決好酷噢XDD
嗯....自己試著改改看吧!
貓貓 replied in 2008/08/04 19:09

#30 s7878s on 2008/08/07 15:27
好清楚唷xp
對ccs笨蛋來說是一大福音耶
呵呵呵
改天也來自己小改
謝:)
嗯~試著自己改很重要喔!
貓貓 replied in 2008/08/07 20:11

Private Comment

#32 顏滾滾媽 on 2008/08/11 23:21
妳好....我現在正在努力K妳寫的css基本教學
不過還是有點物煞煞的
妳文中有寫到
"痞客釋出了CSS架構圖"
我要去哪邊找架構圖呢????
(呼看到一個頭兩個大了)
麻煩看看我其他的教學文!!
貓貓 replied in 2008/08/12 19:52

#33 yoru on 2008/08/18 14:24
發表在 PIXNET 痞客邦迴響(0) 引用(0) 人氣(0)
個人分類:
你好,請問上面兩行文章底的顏色改了以後,應該會一樣
可是不知道為什麼個人分類的顏色不一樣
不知道要怎樣改回來,請幫幫我,謝謝
目前痞客仍然不穩定,
等穩定後,
再請您再來發問!!
貓貓 replied in 2008/08/22 09:59

#34 hungsir on 2008/08/24 08:23
終於有一篇清楚的CSS架構，謝謝分享喔！！
這個是舊版的了...
過一陣子我整理新版的再分享吧!!
貓貓 replied in 2008/08/24 11:53

#35 jessica86150 on 2008/09/10 09:21
謝謝妳唷.......我拿去了
這個已經是舊版的了,之後如果有整理好新版的,再過來拿喔!!
貓貓 replied in 2008/09/10 15:28

#36 auyellen on 2008/09/30 20:45
請問問題唷！
我在回覆留言滴地方
怎麼有些回覆的格子是正常滴
有一些個子滴回覆文僅在一起呢
跟圖片很靠近
不好意思喔麻煩擬了~~~
我不太了解你說的問題在哪裡...
可否請你以print screen sysRq這個按鍵,把有問題的地方拍照存成jpg檔寄給我嗎?
lovejie2005@gmail.com
貓貓 replied in 2008/09/30 20:57

#37 auyellen on 2008/10/03 22:44
之前那個問題阿 ~ 我找了好多的語法
還是沒有辦法變耶，所以我把圖縮小啦

還有一個問題唷
請問【部落格大聯播】這個語法
是在哪邊更改阿...找不到呢

不好意思麻煩您了，謝謝您唷！
你是指/*-------------- subscription --------------*/這個?
貓貓 replied in 2008/10/05 20:32

#38 aimeered on 2008/10/09 08:17
正在研究css
真好有你的架構圖可以研究

不好意思的請問一下
文章下板主回覆的地方文字顏色是從哪裡修改呢?
.reply-text{}裡加上color
還有許多例外,沒有加在上頭的css,建議你可以套用別人的css來研究,也會得到許多不知道的喔!!
貓貓 replied in 2008/10/09 12:39

#39 aimeered on 2008/10/11 06:24
~歐我想我就是那個例外的
因為我套用了痞克的模板然後看你的教學做一些文字顏色大小的修改
但是我在你說的地方改了顏色卻沒有變
可以請你幫幫我嗎?
我不知道你要我教你什麼...
貓貓 replied in 2008/10/13 10:58

#40 catherina on 2008/10/14 15:12
天啊
有你的這篇密集
我就懂了啦
我之前自己試了很久
都一直不成功
然後試到頭都快爆炸了啦
最後只成功了換圖片
唉唉
謝謝你啊寫的超詳細的!!!
別客氣...有需要再來問我!
貓貓 replied in 2008/10/15 01:16

#41 auyellen on 2008/10/18 12:01
請問一下問題唷~~~
我網製有些地方的圖片
滑過去圖片不會動
有的華過去，圖片會變大耶
請問一下要更改哪邊滴語法呢
這個不是css的問題...而是你在後台的基本設定和在插入時有設定到...
所以你要從基本/進階設定裡去找原因喔!!
貓貓 replied in 2008/10/20 08:30

#42 hiccer on 2008/10/21 16:26
感謝分享!!
終於可以一步步回復我的版面了> <"
^^有問題再來問我...
貓貓 replied in 2008/10/21 17:50

#43 小美 on 2008/10/21 16:28
這篇CSS教學很讚
最近想了解CSS如何做呢!!
嗯~有問題再來問我吧!!
貓貓 replied in 2008/10/21 17:51

#44 amy2310733 on 2008/10/23 13:41
問題 .
能請問大大嘛 ?

全站分類跟個人分類
怎麼隱藏呢 ?

還有

這句話
" 本篇迴響權限: 開放所有人迴響 "
怎麼隱藏呢 ><?
拜託了大大 .
1. #comment-form p{display: none; }"本篇迴響權限: 開放所有人迴響"隱藏
2. .refer li{display: none; }全站分類跟個人分類
貓貓 replied in 2008/10/23 14:13

#45 御妞妞 on 2008/10/24 16:30
妳好 .
謝謝教學

不好意思
我露了一條忘記問 "
請問 "XXXX 發表在 PIXNET 痞客邦迴響(0) 引用(0) 人氣(0)"
這段的標籤是 ??

不好意思打擾你叻 .
.author{}這裡!!
貓貓 replied in 2008/10/24 16:48

#46 aimeered on 2008/11/13 19:53
謝謝你發這些教學文章
對我來說真的很受用!
不客氣~有問題歡迎發問!
貓貓 replied in 2008/11/13 23:59

#47 ClaireKevin on 2008/11/20 12:25
哇...好棒耶..
你的教學文章真是仔細
我再也不用看的頭昏眼花。
謝謝你唷...^^
不客氣~有問題歡迎來發問!
貓貓 replied in 2008/11/23 22:12

#48 auyellen on 2008/12/09 14:37
您好唷！
請教您一各問題唷！
我的連結裡頭
如果讓 ~ 連結項目名子
可以距離大一點呢
不要都粘在一起~~
謝謝你嚕~~
1. 先改圖
2. 修正css...
如果你改好圖,再來問我怎麼修正...且不要忘記去告知樂樂一聲你有修改!!
貓貓 replied in 2008/12/10 13:58

#49 auyellen on 2008/12/10 14:18
改圖阿~~
要改什麼圖阿~~
是要把 " 星星 " 給刪掉嗎
謝謝唷！
抱歉....我看錯了...
如果你是要修改側欄裡的連結,在裡面加上line-height去調整即可!!
貓貓 replied in 2008/12/10 16:09

#50 ryoslife on 2008/12/22 11:51
不好意思，請問如果我要把文章人氣值這部分刪除，該如何做呢?
.author span{display: none; }
貓貓 replied in 2008/12/22 12:52

#51 俏媽咪 on 2008/12/23 11:24
棒...棒....棒
您好棒喔˙一大推ABC的語法讓我有看沒有懂.謝謝你用心的解說教學..我先引用你的教學文章到我的網址了喔...等我有空也要自己試試看...有空也請到我部落格幫我看看有何處需要改進的...感恩喔!
嗯...有任何問題再來發問!!
貓貓 replied in 2008/12/23 11:53

#52 dadaweb on 2008/12/26 15:03
你好，我剛用痞客邦的部落格，想請問，如果我要改他的版型，他是不是有提供一個基本的css樣式表，然後我就可以來改他？是不是套用他教學型的樣版去改呢？謝謝
嗯...http://lovejie2005.pixnet.net/blog/category/617670 這個分類裡有很多的教學,你研究一下,再來問我吧!!
貓貓 replied in 2008/12/26 15:58

#53 dadaweb on 2008/12/26 16:39
這個分類我下午有看過，他是介紹基礎的樣式表，我想要問的是：再修改CSS樣式表，痞客邦是不是有提供基本的樣式表，然後我們就可以依照那個樣式表來修改？還是說把他給的樣式表清空，全部都自己打？？謝謝
痞客有提供很基本的樣式.你可以自己去慢慢改!!
貓貓 replied in 2008/12/26 16:57

#54 auyellen on 2009/01/27 21:53
您好唷！今天摸嚕半天，還是沒有辦法把我的訂閱那邊
部落格文章在左邊
訂閱滴部落格在右邊呢~~
請問要怎麼寫呢~~
謝謝你唷！
訂閱那邊喔...
#subscription .box-text a{display: block; padding: 2px 0px 0px 0px; text-align: left; }
#subscription .box-text li{text-align: right; }
這樣試試...
貓貓 replied in 2009/02/02 12:22

#55 auyellen on 2009/01/28 00:37
不好意思喔！我又遇到難題嚕><....
請問一下唷！
側邊的欄位阿
欄寬可以調整嗎~~

日曆那邊的問題
怎麼有些日期位置都有跑掉呢~~

如果要在當天有寫文章的那天
怎麼讓那天，有顏色的底圖呢~~

拜託您嚕！謝謝您嚕！
可以...
日曆位置跑掉?
#calendar td a{}加上background: url() no-repeat center;
另外...因為我不知道你用哪個樣式,麻煩你把問題拍照下來給我看!!
貓貓 replied in 2009/02/02 12:24

Private Comment

#57 auyellen on 2009/02/05 11:29
請問一下唷！
怎麼讓"誰來看我"這個，直接顯示圖片呢
而不要划過去才會出現圖片
謝謝唷！

還有另外一個回響的問題
我有套用您的迴響樣式
但是我後來發現，流言內容的字體有點太小嚕
不過我改了很多次，字體還是粉小
可以跟我說在那邊更改大小呢
謝謝你唷！
#visitor .box-text li a img, #crumb .box-text li a img{}這裡面如果有半透明設定值的地方,刪掉就好了...
如果要改迴響字體是要在/*-------------- #comment-table --------------*/ ←這個裡面~
貓貓 replied in 2009/02/09 12:04

#58 叮叮噹噹 on 2009/03/02 04:57
可以全文引用嗎?
剛搬家來痞客邦, 甚麼都不會~想要改版型,不知從何著手....可以全文引用嗎?
可以...
貓貓 replied in 2009/03/02 11:30

#59 lalapeople on 2009/03/14 20:05
你好，我是用樂多模板，我想把最下面的痞客標誌拿掉，請問要怎麼用？？謝謝！！
樂多模版的基本架構我不太熟吶...抱歉!!
貓貓 replied in 2009/03/18 22:54

#60 howlipu on 2009/04/03 02:18
妳好，借這篇引用研究一下!
日文苦目..感溫..
日文苦目?!
貓貓 replied in 2009/04/06 15:07

#61 qqamigo8752201 on 2009/04/06 15:22
寫得很詳細~謝謝唷!!可是還是想請問一點~就是我在文章內的全站分類不見了@@我希望可以跑出來~但看了文內介紹的找到自己CSS內的文章分類~卻不知道如何改成可以跑出來@@希望能指點一下~我會很感恩的....3Q
有一長串#comment-form p,#comment-form table tr.comment-form-title,#comment-form table th font,#spotlight h5,.day,.time,.refer li:first-child,.back-to-top,#blog-main .refer,#blog-main .history,#comment-text .secret,.floor,#murmur-list .list-num,#banner .skiplink,#blog-category,#category .box-more img,#category .box-text.box-more,#visitor .box-more a,#crumb .box-more a,#latest-comment .box-text img,#hot-article .box-text img,#recent-article .box-text img {display:none;}
你找出#blog-main .refer, ←這個,連同#blog-main .refer後面的逗號一起刪除...

貓貓 replied in 2009/04/06 15:39

#62 qqamigo8752201 on 2009/04/06 17:03
您好~實在抱歉再次打擾!!~照介紹的方法試了~但效果似乎沒出來~我現在語法是"#comment-form p,#comment-form table tr.comment-form-title,#comment-form table th font,#spotlight h5,.day,.time,.refer li:first-child,.back-to-top,#blog-main .history,#comment-text .secret,.floor,#murmur-list .list-num,#banner .skiplink,#blog-category,#category .box-more img,#category .box-text.box-more,#visitor .box-more a,#crumb .box-more a,#latest-comment .box-text img,#hot-article .box-text img,#recent-article .box-text img {
display:none;
}"但文章的尾巴處還是看不見"全站分類"請問我的問題出在哪邊呢??謝謝~!!!
試試.refer li:first-child, ←這個也刪掉看看...

抱歉喔,麻煩您再試一次!!
貓貓 replied in 2009/04/06 17:16

#63 notyourgod on 2009/04/06 18:22
終於找到看的比較舒服的CCS教學了,
摸索中- -""好難用呢
嗯...有任何不懂,歡迎來發問...
因為我生活忙碌,故屆時回覆慢了點,請包涵...
貓貓 replied in 2009/04/12 13:26

#64 qqamigo8752201 on 2009/04/07 08:00
哈囉~早安~!!!嗯~我成功囉!!真的真的非常的謝謝你的幫忙^^感恩啦!!
嗯...很抱歉第一次回覆你回錯了,希望您多包涵...
貓貓 replied in 2009/04/12 13:32

#65 notyourgod on 2009/04/16 00:36
你肯分享對我來說真的是太好了
我搞了一個月呢
我山上小孩土味重
你們拿滑鼠的時候我在抓松鼠哈哈
還是很感謝你的分享
祝順心
嗯...有問題再來問我!!
貓貓 replied in 2009/04/27 13:51

#66 notyourgod on 2009/04/16 00:38
我發現我留錯言了
囧

#67 paney on 2009/04/21 12:24
很受用喔謝謝

#68 多莉 on 2009/04/22 19:24
woohoo謝謝教學:)
以前就一直想學了
可是都沒找到解釋詳細的文~
感謝欸(跪)
有問題歡迎再來發問...
貓貓 replied in 2009/04/27 13:59

#69 auyellen on 2009/04/25 00:02
您好喔~~
我想請問一下
我已經更改了BADY裡頭的字型大小
為什麼文章內滴大小孩是沒有變小呢
不好意思喔~~麻煩您嚕
你可能要看看.article-content{}裡有沒有設定喔!!
貓貓 replied in 2009/04/27 14:02

#70 auyellen on 2009/04/27 15:43
謝謝你唷~~
我還可以在請教您一個問題嗎
我找不到"繼續閱讀"的語法在哪邊呢~~
拜託您了..
.more
貓貓 replied in 2009/04/27 15:45

#71 auyellen on 2009/04/27 15:52
您好喔！我剛剛看了一下
我的css裡頭沒有.more耶
不好意思喔，麻煩您嚕^^
沒有就自己加上去!!
.more{}
.more a{}
這樣,然後自己再去變化!!
貓貓 replied in 2009/04/27 16:04

#72 tpfymious82 on 2009/05/05 18:53
奇怪
總有時候會看不懂
過一陣子就會看懂噎

人生還有好多要領悟的阿
一時會愚鈍 !

還有謝謝你這篇阿 :)
受益良多
終於要開始我自己的改造了 :))

#73 tpfymious82 on 2009/05/06 18:36
請問一下

.box-text/*側欄區塊內容*/

我是要改字的大小

但我的痞客 box 語法裡只有

.box {
padding: 10px;
margin-bottom: 15px;
background: #none;
}
.box-title {
text-align: left;
padding: 4px;
font-size: 8pt;
color: #000;
border-bottom: 1px dashed #C0C0C0;
margin-bottom: 10px;
}
.box-text a {
display: block;
}
.box-text a:hover {
display: block;
color: #C0C0C0;
}
.box-text li {
margin: 5px 0px;
}

這段字型大小要怎麼改 ?

感謝你的回答 :)

( 摸索 )
自己加上去囉!!
.box-text{font-size: 10px; }
這樣...
貓貓 replied in 2009/05/13 13:02

Private Comment

#75 escapemisery on 2009/06/13 01:31
貓大你好:

我想請問我的網誌內，原本沒有.more{}
我自行加上去後可以控制字體位置和顏色了，如下:
.more{ text-align:right;}
.more a:visited{color:#;}

但如果我要隱藏他原本的顯示方式，改用圖片表示，改怎麼改?
我用如下的方式只能把它的背景加上圖片，但這樣會變成有字又有圖，
有沒有辦法讓他原本字體的部分隱藏或以圖取代呢? 請指導指導，謝謝。

.more a{
background-image:url(圖片網址);
height:20px;
background-repeat: no-repeat;
background-position: 80% 50%;
background-position:undefined;
}

#76 escapemisery on 2009/06/13 02:48
抱歉唷~貓大~
留言完後過了一個多小時，
竟然讓我很幸運的找到了解決這個問題的答案，
所以浪費您的版面，抱歉唷!!

#77 美 on 2009/07/26 01:41
可以請問一下在左側欄的文章列表，不想出現密碼圖示
要在哪裡加入語法嗎? 因為我.title h2 img已經隱藏了。
不過...在最新記事裡頭還是會看到密碼文圖示...不知道它的標籤是什麼
想請教一下，謝謝你喔
應該是#recent-article .box-text img
貓貓 replied in 2009/07/26 10:23

Private Comment

Private Comment

#80 zhwl8675 on 2009/10/30 00:44
你好，我想詢問有關"加入書籤"的問題。我想將"書籤"的位置移到文章的底部，我自己的CSS目前是這樣的狀況 [bookmark { margin: 10px auto; } ]請問我該怎麼修改這部分的語法呢??
請到後台的部落格管理的基本/進階設定去設定,不是改css喔!!
貓貓 replied in 2009/11/01 17:05

Private Comment

Private Comment

Private Comment

Private Comment

Private Comment

Private Comment

Private Comment

Private Comment

#89 auyellen on 2009/12/31 14:44
阿Q
我找到啦啦啦啦^^
還是要謝謝你啦~~
= =嗯...別那麼說啦,我又沒幫到什麼忙...
貓貓 replied in 2010/01/04 10:20

#90 blossomylife on 2010/01/06 23:02
很棒的資訊喔！有了這個我可以輕鬆修改版面啦！
歡迎來我的BLOG逛逛喔～

#91 黑色鴨子 on 2010/02/19 13:35
你好^^
請問下
我想把 [相簿,部落格,留言板,名片] 整串拿掉
然後放自己想要的連結上去
把那一串拿掉我知道怎麼改
但我不會自己寫連結語法
要怎麼寫呢？
謝謝！
那個要用到側欄位設計+css去設計到你要的位置...
這樣說你會嗎?
貓貓 replied in 2010/02/21 11:31

#92 黑色鴨子 on 2010/02/21 21:43
嗯我知道修改方法
我想問的是語法怎麼寫 @@"
我現在知道怎麼把 [相簿,部落格,留言板,名片] 拿掉

我想放上FACEBOOK和噗浪的連結要怎麼寫呢?
<a href="網址" target="_blank">名稱</a>
貓貓 replied in 2010/02/21 21:53

Private Comment

Private Comment

#95 ruru814 on 2010/06/15 18:14
不好意思想請教一下，我想把誰來我家的圖示大小調成像你一樣小小的，一排五個。
但css裡沒有#visitor.box那些，我該把整段插在那裡調整呢？謝謝你！！

#96 天天。天晴 on 2010/07/10 17:09
阿Q你好，找了好久，終於找到這些語法標示的地方，真是太感謝了！！

可以請教一下，側邊欄位的Title要如何讓他顯示我們在後台管理所設定的文字呢？
因為套用的樣式，都是用圖形來顯示，問題是新的欄位就沒法子正常顯示！

麻煩撥冗回答！感謝感謝！
Dear,

那要去找後台css編輯區的設定喔...
因為我沒看你的樣式,所以我也不知道...
你就去找後台的側欄.title-box裡面的語法看看喔!!
貓貓 replied in 2010/07/12 21:20