學習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.是直接印成資料,要找時,會快的多!!

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


創作者介紹

ここに幸あり

貓貓 發表在 痞客邦 PIXNET 留言(144) 人氣()


留言列表 (144)

發表留言
  • smilegirl373
  • 呵呵..A.Q小姐開始開班授課了呢!!
    我會跟著妳的步驟一步一步上課喔(嘻嘻)
    且慢慢摸索的^^
  • 只是很簡單的教學啦~
    ^^一起努力喲!!

    貓貓 於 2007/09/22 22:28 回覆

  • smboy0115
  • 這個東西太有幫助啦~~~
    我對CSS越來越清楚哩~!!
    哈哈哈
  • 呵~我的CSS基礎也是由這個來的!!
    所以你們先看懂這個就知道要怎麼改囉^^

    貓貓 於 2007/09/23 08:51 回覆

  • bluemomo
  • 驚人,落落長....
    我會很努力的看的,謝謝A.Q.
  • 是啊~落落長...我收集了整本的資料也是這麼多^^加油~

    貓貓 於 2007/09/23 08:52 回覆

  • chenju8989
  • 好厲害喔!我可以收藏這篇嗎?
    不過,最近實在懶的改版..
  • 可以啊~~^^慢慢來囉!

    貓貓 於 2007/09/28 10:39 回覆

  • xy9132001
  • 嘿嘿
    阿Q
    我來囉
    用了你的法寶

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

    畫圈圈一陣子
    今天該是出關的時候了
    哈哈....
  • 哈...也畫太久了吧!!

    貓貓 於 2007/09/30 21:59 回覆

  • havic
  • 好阿好...

    受益良多耶..
  • ^^

    貓貓 於 2007/10/04 08:46 回覆

  • cambrian
  • 舉手...

    雖然阿q教學了 不過我還是不會耶^^"
    我把部落格名稱改成顯示了
    不過想問阿q那個「跳到主文」可不可以不要讓他顯示呢?
    麻煩囉︿︿
  • 你是指最上面的登入那個嗎?
    把#login-bar{}
    裡面全刪掉,改成display: none; 就好了!

    貓貓 於 2008/08/22 09:50 回覆

  • cambrian
  • 阿..

    忘記說 我是套用冷冷冬調!
  • ^^我去看了...

    貓貓 於 2008/01/08 23:19 回覆

  • cambrian
  • ︿︿

    阿q好像也在線上耶!
    還有阿q我是想問網誌名稱下方的「跳到主文」那個連結~我有點想把他弄掉^^" 不是最上方登入那個~
  • ...可是我沒有看到跳到主文這個連結哎!而且在我本來的CSS就是隱藏的吶!!

    貓貓 於 2008/01/08 23:48 回覆

  • 悄悄話
  • smile0711
  • 好可愛呦^^

    打包囉xD

    只不過套用了之後

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

    有辦法用掉嗎ˊˇˋ?
  • smile0711
  • 結果最後研究出來了xD

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

    謝謝分享囉

    好可愛^^"
  • ^^

    貓貓 於 2008/02/15 09:15 回覆

  • harpsicello
  • 謝謝分享!^o^
    早知道先來找妳這篇
    就不用自己摸半天try死了><
  • 很多人都有分享啊!!

    貓貓 於 2008/02/15 09:16 回覆

  • jlfwt
  • 感謝^^

    這篇真的幫了我很大的忙!!!!
    萬分感謝^^
  • 不客氣!!

    貓貓 於 2008/02/28 20:14 回覆

  • socutei
  • 請問要怎麼將單篇文章人氣隱藏呀??
    找好久都找不到><
  • author span{display:none;}

    貓貓 於 2008/03/01 14:35 回覆

  • socutei
  • 謝謝^ ___ ^
    總算搞好了
  • 不客氣~
    有任何問題下次請e-mail發問!

    貓貓 於 2008/03/01 17:42 回覆

  • marujuana
  • 很謝謝你這一篇~ 師傅~~~(跪拜)
  • 乖乖喔!!

    貓貓 於 2008/03/05 10:40 回覆

  • visioncafe
  • 真是明燈一盞

    一直好想改版但苦無途徑.....看了以上我終於找到可以學習的地方....肛溫阿~(我有所成再請Q大評鑑一下,當然有問題也請Q大不吝賜教)
  • 看到肛溫,我笑了XD

    以後有任何問題,放心來問我吧~我會教你的!!

    貓貓 於 2008/04/11 08:37 回覆

  • a7364881
  • 還是看不太懂ㄝ
    ex)body/*整個介頁面*/
    整個介面 是要換成蛇ㄇ
  • =口=我不太了解你的問題吶!!
    你要不要寫詳細一點e-mail給我?

    貓貓 於 2008/04/28 18:33 回覆

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

    貓貓 於 2008/05/05 14:20 回覆

  • kerry204
  • 你好,我套用了你的模板,並修改了一小部分。我想請問一下為什麼版主留言回覆超過一行的時候,後面的字就不見了呢?該怎麼修改CSS才會讓所有的字顯示出來?謝謝!
  • ???你指哪裡的版主留言回覆???

    貓貓 於 2008/05/23 15:28 回覆

  • shdog
  • 這篇真是寶耶
    師傅..借我轉載一下嚕!
  • Ok

    貓貓 於 2008/05/27 15:17 回覆

  • bubblegreen39
  • sidebar伸縮問題

    請問你知道如何讓sidebar有伸縮的效果嗎?
    我爬到的文都沒說痞客邦的要怎麼用,
    (都是在說Blogger的比較多)
    還是說根本就行不通呢?
  • 這個我不清楚...抱歉!!

    貓貓 於 2008/05/31 11:21 回覆

  • vivian0422
  • 這個教學 真的太棒了~~
    謝謝Q的整理~~

    直接拿來引用喔~~
  • 不是我整理的,不過你可以引用!

    貓貓 於 2008/06/26 18:55 回覆

  • joyce00927
  • 阿Q~
    不好意思想請問妳一下
    要讓每篇文章人氣出現
    是刪掉css哪個語法哩??
  • 不想隱藏文章人氣請刪除最底層
    .author span{display:none;}
    想隱藏就反之請加上去!!

    貓貓 於 2008/07/09 13:15 回覆

  • joyce00927
  • 實在是太感謝阿Q了~
    ~.~
  • ^^加油...

    貓貓 於 2008/07/21 11:12 回覆

  • 燕子草
  • (吐血)
    還是不太懂= =
    救救我吧!!
  • 不懂什麼?具體一點的知道,再發問好嗎?
    先去研究套用的樣式CSS是怎麼一回事好嗎?
    不要這樣亂發問...沒頭沒尾的,
    我怎麼知道你問題在哪...

    貓貓 於 2008/08/22 09:49 回覆

  • lieao
  • 這個教學很棒很棒
    謝謝分享
  • 不客氣

    貓貓 於 2008/07/29 13:49 回覆

  • 9527
  • 小問題可以自己解決好酷噢XDD
  • 嗯....自己試著改改看吧!

    貓貓 於 2008/08/04 19:09 回覆

  • s7878s
  • 好清楚唷xp
    對ccs笨蛋來說是一大福音耶
    呵呵呵
    改天也來自己小改
    謝:)
  • 嗯~試著自己改很重要喔!

    貓貓 於 2008/08/07 20:11 回覆

  • 悄悄話
  • 顏滾滾媽
  • 妳好....我現在正在努力K妳寫的css基本教學
    不過還是有點物煞煞的
    妳文中有寫到
    "痞客釋出了CSS架構圖"
    我要去哪邊找架構圖呢????
    (呼 看到一個頭兩個大了)
  • 麻煩看看我其他的教學文!!

    貓貓 於 2008/08/12 19:52 回覆

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

    貓貓 於 2008/08/22 09:59 回覆

  • hungsir
  • 終於有一篇清楚的CSS架構,謝謝分享喔!!
  • 這個是舊版的了...
    過一陣子我整理新版的再分享吧!!

    貓貓 於 2008/08/24 11:53 回覆

  • jessica86150
  • 謝謝妳唷.......我拿去了
  • 這個已經是舊版的了,之後如果有整理好新版的,再過來拿喔!!

    貓貓 於 2008/09/10 15:28 回覆

  • auyellen
  • 請問問題唷!
    我在回覆留言滴地方
    怎麼有些回覆的格子是正常滴
    有一些個子滴回覆文僅在一起呢
    跟圖片很靠近
    不好意思喔麻煩擬了~~~
  • 我不太了解你說的問題在哪裡...
    可否請你以print screen sysRq這個按鍵,把有問題的地方拍照存成jpg檔寄給我嗎?
    lovejie2005gmail .com

    貓貓 於 2008/09/30 20:57 回覆

  • auyellen
  • 之前那個問題阿 ~ 我找了好多的語法
    還是沒有辦法變耶,所以我把圖縮小啦

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

    不好意思麻煩您了,謝謝您唷!
  • 你是指/*-------------- subscription --------------*/這個?

    貓貓 於 2008/10/05 20:32 回覆

  • aimeered
  • 正在研究css
    真好有你的架構圖可以研究

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

    貓貓 於 2008/10/09 12:39 回覆

  • aimeered
  • ~歐 我想我就是那個例外的
    因為我套用了痞克的模板 然後看你的教學做一些文字顏色大小的修改
    但是我在你說的地方改了顏色 卻沒有變
    可以請你幫幫我嗎?
  • 我不知道你要我教你什麼...

    貓貓 於 2008/10/13 10:58 回覆

  • catherina
  • 天啊
    有你的這篇密集
    我就懂了啦
    我之前自己試了很久
    都一直不成功
    然後試到頭都快爆炸了啦
    最後只成功了換圖片
    唉唉
    謝謝你啊 寫的超詳細的!!!
  • 別客氣...有需要再來問我!

    貓貓 於 2008/10/15 01:16 回覆

  • auyellen
  • 請問一下問題唷~~~
    我網製有些地方的圖片
    滑過去圖片不會動
    有的華過去,圖片會變大耶
    請問一下要更改哪邊滴語法呢
  • 這個不是css的問題...而是你在後台的基本設定和在插入時有設定到...
    所以你要從基本/進階設定裡去找原因喔!!

    貓貓 於 2008/10/20 08:30 回覆

  • hiccer
  • 感謝分享!!
    終於可以一步步回復我的版面了> <"
  • ^^有問題再來問我...

    貓貓 於 2008/10/21 17:50 回覆

  • 小美
  • 這篇CSS教學很讚
    最近想了解CSS如何做呢!!
  • 嗯~有問題再來問我吧!!

    貓貓 於 2008/10/21 17:51 回覆

  • amy2310733
  • 問題 .

    能請問大大嘛 ?

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

    還有

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

    貓貓 於 2008/10/23 14:13 回覆

  • 御妞妞
  • 妳好 .

    謝謝教學

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

    不好意思 打擾你叻 .
  • .author{}這裡!!

    貓貓 於 2008/10/24 16:48 回覆

  • aimeered
  • 謝謝你發這些教學文章
    對我來說真的很受用!
  • 不客氣~有問題歡迎發問!

    貓貓 於 2008/11/13 23:59 回覆

  • ClaireKevin
  • 哇...好棒耶..
    你的教學文章真是仔細
    我再也不用看的頭昏眼花。
    謝謝你唷...^^
  • 不客氣~有問題歡迎來發問!

    貓貓 於 2008/11/23 22:12 回覆

  • auyellen
  • 您好唷!
    請教您一各問題唷!
    我的連結裡頭
    如果讓 ~ 連結項目名子
    可以距離大一點呢
    不要都粘在一起~~
    謝謝你嚕~~
  • 1. 先改圖
    2. 修正css...
    如果你改好圖,再來問我怎麼修正...且不要忘記去告知樂樂一聲你有修改!!

    貓貓 於 2008/12/10 13:58 回覆

  • auyellen
  • 改圖阿~~
    要改什麼圖阿~~
    是要把 " 星星 " 給刪掉嗎
    謝謝唷!
  • 抱歉....我看錯了...
    如果你是要修改側欄裡的連結,在裡面加上line-height去調整即可!!

    貓貓 於 2008/12/10 16:09 回覆

  • ryoslife
  • 不好意思,請問如果我要把文章人氣值這部分刪除,該如何做呢?
  • .author span{display: none; }

    貓貓 於 2008/12/22 12:52 回覆

  •  俏媽咪
  • 棒...棒....棒

    您好棒喔˙一大推ABC的語法讓我有看沒有懂.謝謝你用心的解說教學..我先引用你的教學文章到我的網址了喔...等我有空也要自己試試看...有空也請到我部落格幫我看看有何處需要改進的...感恩喔!
  • 嗯...有任何問題再來發問!!

    貓貓 於 2008/12/23 11:53 回覆

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

    貓貓 於 2008/12/26 15:58 回覆

  • dadaweb
  • 這個分類我下午有看過,他是介紹基礎的樣式表,我想要問的是:再修改CSS樣式表,痞客邦是不是有提供基本的樣式表,然後我們就可以依照那個樣式表來修改?還是說把他給的樣式表清空,全部都自己打??謝謝
  • 痞客有提供很基本的樣式.你可以自己去慢慢改!!

    貓貓 於 2008/12/26 16:57 回覆

  • auyellen
  • 您好唷!今天摸嚕半天,還是沒有辦法把我的訂閱那邊
    部落格文章在左邊
    訂閱滴部落格在右邊呢~~
    請問要怎麼寫呢~~
    謝謝你唷!
  • 訂閱那邊喔...
    #subscription .box-text a{display: block; padding: 2px 0px 0px 0px; text-align: left; }
    #subscription .box-text li{text-align: right; }
    這樣試試...

    貓貓 於 2009/02/02 12:22 回覆

  • auyellen
  • 不好意思喔!我又遇到難題嚕><....
    請問一下唷!
    側邊的欄位阿
    欄寬可以調整嗎~~

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

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

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

    貓貓 於 2009/02/02 12:24 回覆

  • 悄悄話
  • auyellen
  • 請問一下唷!
    怎麼讓"誰來看我"這個,直接顯示圖片呢
    而不要划過去才會出現圖片
    謝謝唷!

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

    貓貓 於 2009/02/09 12:04 回覆

  • 叮叮噹噹
  • 可以全文引用嗎?

    剛搬家來痞客邦, 甚麼都不會~想要改版型,不知從何著手....可以全文引用嗎?
  • 可以...

    貓貓 於 2009/03/02 11:30 回覆

  • lalapeople
  • 你好,我是用樂多模板,我想把最下面的痞客標誌拿掉,請問要怎麼用?? 謝謝!!
  • 樂多模版的基本架構我不太熟吶...抱歉!!

    貓貓 於 2009/03/18 22:54 回覆

  • howlipu
  • 妳好,借這篇引用研究一下!
    日文苦目..感溫..
  • 日文苦目?!

    貓貓 於 2009/04/06 15:07 回覆

  • qqamigo8752201
  • 寫得很詳細~謝謝唷!!可是還是想請問一點~就是我在文章內的全站分類不見了@@我希望可以跑出來~但看了文內介紹的找到自己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後面的逗號一起刪除...

    貓貓 於 2009/04/06 15:39 回覆

  • qqamigo8752201
  • 您好~實在抱歉再次打擾!!~照介紹的方法試了~但效果似乎沒出來~我現在語法是"#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, ←這個也刪掉看看...

    抱歉喔,麻煩您再試一次!!

    貓貓 於 2009/04/06 17:16 回覆

  • notyourgod
  • 終於找到看的比較舒服的CCS教學了,
    摸索中- -""好難用呢
  • 嗯...有任何不懂,歡迎來發問...
    因為我生活忙碌,故屆時回覆慢了點,請包涵...

    貓貓 於 2009/04/12 13:26 回覆

  • qqamigo8752201
  • 哈囉~早安~!!!嗯~我成功囉!!真的真的非常的謝謝你的幫忙^^感恩啦!!
  • 嗯...很抱歉第一次回覆你回錯了,希望您多包涵...

    貓貓 於 2009/04/12 13:32 回覆

  • notyourgod
  • 你肯分享對我來說 真的是太好了
    我搞了一個月呢
    我山上小孩 土味重
    你們拿滑鼠的時候 我在抓松鼠 哈哈
    還是很感謝你的分享
    祝 順心
  • 嗯...有問題再來問我!!

    貓貓 於 2009/04/27 13:51 回覆

  • notyourgod
  • 我發現我留錯言了
  • paney
  • 很受用喔 謝謝
  • 多莉
  • woohoo謝謝教學:)
    以前就一直想學了
    可是都沒找到解釋詳細的文~
    感謝欸(跪)
  • 有問題歡迎再來發問...

    貓貓 於 2009/04/27 13:59 回覆

  • auyellen
  • 您好喔~~
    我想請問一下
    我已經更改了BADY裡頭的字型大小
    為什麼文章內滴大小孩是沒有變小呢
    不好意思喔~~麻煩您嚕
  • 你可能要看看.article-content{}裡有沒有設定喔!!

    貓貓 於 2009/04/27 14:02 回覆

  • auyellen
  • 謝謝你唷~~
    我還可以在請教您一個問題嗎
    我找不到"繼續閱讀"的語法在哪邊呢~~
    拜託您了..
  • .more

    貓貓 於 2009/04/27 15:45 回覆

  • auyellen
  • 您好喔!我剛剛看了一下
    我的css裡頭沒有.more耶
    不好意思喔,麻煩您嚕^^
  • 沒有就自己加上去!!
    .more{}
    .more a{}
    這樣,然後自己再去變化!!

    貓貓 於 2009/04/27 16:04 回覆

  • tpfymious82
  • 奇怪
    總有時候會看不懂
    過一陣子就會看懂噎

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

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

    .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; }
    這樣...

    貓貓 於 2009/05/13 13:02 回覆

  • 悄悄話
  • escapemisery
  • 貓大你好:

    我想請問我的網誌內,原本沒有.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;
    }
  • escapemisery
  • 抱歉唷~貓大~

    留言完後過了一個多小時,
    竟然讓我很幸運的找到了解決這個問題的答案,
    所以浪費您的版面,抱歉唷!!
  • 美
  • 可以請問一下在左側欄的文章列表,不想出現密碼圖示
    要在哪裡加入語法嗎? 因為我.title h2 img已經隱藏了。
    不過...在最新記事裡頭還是會看到密碼文圖示...不知道它的標籤是什麼
    想請教一下,謝謝你喔
  • 應該是#recent-article .box-text img

    貓貓 於 2009/07/26 10:23 回覆

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

    貓貓 於 2009/11/01 17:05 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • auyellen
  • 阿Q
    我找到啦啦啦啦^^
    還是要謝謝你啦~~
  • = =嗯...別那麼說啦,我又沒幫到什麼忙...

    貓貓 於 2010/01/04 10:20 回覆

  • blossomylife
  • 很棒的資訊喔!有了這個我可以輕鬆修改版面啦!
    歡迎來我的BLOG逛逛喔~
  • 黑色鴨子
  • 你好^^

    請問下
    我想把 [相簿,部落格,留言板,名片] 整串拿掉
    然後放自己想要的連結上去
    把那一串拿掉我知道怎麼改
    但我不會自己寫連結語法
    要怎麼寫呢?
    謝謝!
  • 那個要用到側欄位設計+css去設計到你要的位置...
    這樣說你會嗎?

    貓貓 於 2010/02/21 11:31 回覆

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

    我想放上FACEBOOK和噗浪的連結 要怎麼寫呢?


  • <a href="網址" target="_blank">名稱</a>

    貓貓 於 2010/02/21 21:53 回覆

  • 悄悄話
  • 悄悄話
  • ruru814
  • 不好意思想請教一下,我想把誰來我家的圖示大小調成像你一樣小小的,一排五個。
    但css裡沒有#visitor.box那些,我該把整段插在那裡調整呢?謝謝你!!
  • 天天。天晴
  • 阿Q你好,找了好久,終於找到這些語法標示的地方,真是太感謝了!!

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

    麻煩撥冗回答!感謝感謝!
  • Dear,

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

    貓貓 於 2010/07/12 21:20 回覆

  • 悄悄話
  • *葉子
  • 感激不盡

    玩了一下入門的無名
    現在要來玩痞客~
    以前都只會用別人的~
    哪天痞客玩成功
    格主的功勞最大!!
  • Teukpearl
  • 眼花@口@"
    想請問一下
    在做樣式的時候
    是把要使用的圖片網址貼在語法的後面嗎??OAO"
1 2
找更多相關文章與討論