玩弄∥文章分類+用圖替換 (升級版) @ 蘋果咬一口

歡迎蒞臨蘋果咬一口，請大家務必看這裡呦！

Sep 12 Wed 2007 17:36
玩弄∥文章分類+用圖替換 (升級版)

想跟蘋果的「文章分類」之大、小分類相同效果嗎?
滑鼠移過去時ICON圖有變化
其實邏輯很簡單，純粹利用a:hover製造效果罷囉

圖示:

[圖1]　表面上看的時候(還沒點進去)
[圖2]　當滑鼠移過去的時候(即產生變化)
[圖3]　當任意點一項大分類後、再移到小分類(小分類產生變化)

蘋果覺得這樣的變化是較讓大眾接受吧?!
一般都是大分類&小分類的ICON相同，少了變化性
所以寫這篇教學跟大家分享分享

●此處複製語法

(1)歡迎各位引用此文，但請注意網路禮儀哦
(2)此「語法教學」無名小站適用

(3)如果喜歡，離開前給個回應囉，謝謝。
(4)開放右鍵，是給方便而不是讓有心人士隨便
(5)若語法有問題，請到留言板，禁止在C-BOX發問

Posted by AppleAppleDouble at 痞客邦 PIXNET Comments(91) Trackback(0) Hits(2114)

Shorten Url

Recommend to Front page

Global Category:Design
Personal Category:①玩弄CSS - 網誌
Previous post in this category: 玩弄∥「XXX的地盤」用圖替換
Next post in this category: 玩弄∥文章分類-子母分類對齊 (進階版)

Posts on this date

2008: 時計∥LOTTE冰淇淋雪兔時計
2008: 時計∥太郎サザン紀念時計

▲top

Trackbacks (0)

Comments (91)

Post Comment

#1 qaz7796342 on 2007/09/12 21:01
謝謝噢 ^0^

#2 Colorful1982 on 2007/09/12 21:33
【回覆】qaz7796342

不會！

#3 forevera127 on 2007/09/12 21:58
很棒很棒!!

#4 Colorful1982 on 2007/09/13 01:25
【回覆】forevera127

呵！不客氣喔！

#5 blue73623 on 2007/09/13 02:39
喔耶帶給他走!!XDDDD

#6 Colorful1982 on 2007/09/13 02:49
【回覆】blue73623

＝）　好的！知道嚕。

關於兔說的～～～～被卡一半？唔？我沒有欸：（

那ㄟ安納？

我也是1024*768

看來要修改一下囉。

#7 loveMe109 on 2007/09/13 17:44
卸卸 !!!!

#8 loveMe109 on 2007/09/13 18:36
我想問一下齁

就是呀

我用了可是我的姆目錄沒有變耶 ?!

我想要向兔子一樣的

那要怎嚜用呢 ??

#9 Colorful1982 on 2007/09/13 18:39
【回覆】loveMe109

兔子也是用我的語法呀！所以～～～

應該是你用錯囉

#10 loveMe109 on 2007/09/13 18:47
可是我完全的複製上去了

還是不行 ??

第一個圖釋放母目錄的圖

第二個是放子目錄的媽 ??

#11 Colorful1982 on 2007/09/13 18:48
【回覆】loveMe109

你的ＣＳＳ應該就有這些語法了吧？

重複貼當然會顯示不出效果囉

#12 loveMe109 on 2007/09/13 18:49
我已經把之前的刪了耶　??

嗚　><

到底怎麼辦才好　~~~

#13 Colorful1982 on 2007/09/13 18:55
【回覆】loveMe109

（上）是外觀看起來的時候

（下）是滑鼠移過去的時候

#boxCategory .boxCategory1 .side a {background:url(圖) no-repeat

left ;padding-left:17px}

#boxCategory .boxCategory1 .side a:hover {background:url(圖) no-

repeat left ;padding-left:17px}

#14 loveMe109 on 2007/09/13 19:02
還是一樣耶 ><

我在問問看兔子好了

說不定是她的網誌樣式之前有用過

可是我不知道

[因為我的樣式是兔子搭 ^^]

卸卸你噢 ....

我還滿蠻煩的 ˊ^ˋ

#15 Colorful1982 on 2007/09/13 19:10
【回覆】loveMe109

你ＣＳＳ內怎麼有ＪＡＶＡ語法？！

我抓錯了嗎？

＝　＝

#16 loveMe109 on 2007/09/13 19:13
好像是有吧 ?!

噗 ,,

妳真厲害

看的到我的css = =

是那個干擾了她媽 ??

#17 Colorful1982 on 2007/09/13 19:40
【回覆】loveMe109

ＪＡＶＡ不可以貼ＣＳＳ裡面咩！暈～～ＱＱ

刪掉它吧。

#18 s880258 on 2007/09/13 21:18
哈

謝謝妳唷

不過圖是出現在

個人首頁前嗎?

#19 pinkmei1201 on 2007/09/13 21:26
哈哈~蘋果^^我來了

這個很棒唷~

我前幾天還在煩惱那個十字框框要怎麼更改都找不到語法ˊˋ

剛好看到妳有提供語法超開心^^

推推~~

順便問候你們家滴小貝貝最近好嗎~

呵呵~

#20 Colorful1982 on 2007/09/13 21:34
【回覆】s880258

嗄？蝦咪？個人首頁？不暸改你意思。

【回覆】pinkmei1201

呵呵！不客氣唷！

他呀～～～～很好呀！：）

#21 blue73623 on 2007/09/14 03:03
原來問題寶寶(love...9)也有跑來這裡阿XD

那它問題就解決嚕^^

----

蘋果也喜歡兔子看你也是會用文章會文字圖案的

推薦這個飯桶兔兔

在我撞上方連結(繪文字)

有一些喔^^

#22 nupai111 on 2007/09/14 12:01
超美的謝摟

#23 Colorful1982 on 2007/09/14 12:41
【回覆】nupai111

：）

【回覆】兔子

已回覆你板上。

#24 loveMe109 on 2007/09/14 17:55
哇哈哈　,,

我真的是麻煩的小鬼　^^

真是多多指教　ˊˇˋ

麻煩鬼*琦

#25 ct8214 on 2007/09/15 08:58
好厲害喔!

謝謝分享:)

#26 a32192000 on 2007/09/15 13:43
謝謝你囉!!

帶走了

#27 tind398 on 2007/09/15 15:46
謝謝你

我學會哩︿︿

#28 Colorful1982 on 2007/09/16 16:26
【回覆】以上３位

不客氣餒！

#29 strawberrypj on 2007/09/18 01:36
謝謝囉 !!

^_^

#30 qqbear9 on 2007/09/18 02:34
我我我 .. 帶走了!

謝謝你^^

#31 綠茶 on 2007/09/18 11:36
謝謝你 ~~~

#32 disney159 on 2007/09/18 12:56
超棒的!!!!!

好喜歡耶~

哈哈 THANKS

：)

#33 Colorful1982 on 2007/09/19 07:19
【回覆】以上4位

通通～～不客氣喔！呵呵：Ｄ

#34 on 2007/09/23 00:34
拿走囉

#35 Colorful1982 on 2007/09/23 00:37
【回覆】沒留帳號的

希望下次可以帳號登入！

謝謝。

#36 jay718358 on 2007/09/28 09:37
嘻嘻　這個好棒呢～

最近剛在摸索css

努力在這兒挖寶！

謝謝　：）

#37 Colorful1982 on 2007/09/28 12:31
【回覆】jay718358

呵呵！不客氣：）

#38 a2721639 on 2007/10/05 23:49
拿走摟..謝謝你攸!!

#39 rou152875712 on 2007/10/06 00:34
拿摟~謝啦

#40 natas1021 on 2007/10/07 02:30
特別！

又增加了網誌的花樣~~

呵呵呵~

謝謝！

Private Comment

#42 crazy0988 on 2007/10/10 14:02
感謝...

#43 Colorful1982 on 2007/10/10 14:11
【回覆】以上五位

不客氣喔！有問題歡迎發問：Ｄ

#44 阿綠ˇ on 2007/10/11 19:07
拿樂ˇ

謝謝噢ˇ

#45 hebe4132 on 2007/10/12 19:35
領走囉 ! 真的很讚呢 ! 謝謝:)

#46 a0923477352 on 2007/10/24 19:17
我拿走摟!

謝謝!

︿︿＊

#47 cathleen0720 on 2007/10/26 13:31
帶走~~原來那麼簡單~謝謝蘋果的語法唷

#48 rainie10085 on 2007/10/27 11:47
謝謝唷^^

很棒

#49 a0938779316 on 2007/11/02 17:14
謝謝你我拿走了

#50 mimiwawa on 2007/11/23 00:57
謝謝~超好用!~

帶走了喔!~~

#51 kangta101070 on 2007/11/26 03:40
謝謝蘋果大大的教學喔，謝謝捏。

#52 small1987pig on 2008/01/12 15:20
我怎麼還是用不成功...?

我想應該是我笨手笨腳的吧..@@"

APPLE...help me...撲

究竟要從哪改呢?

#53 on 2008/01/28 16:39
帶走了

謝謝唷

Private Comment

#55 fya965 on 2008/01/30 20:12
請問一下

要怎麼有小分類呀!?

#56 Colorful1982 on 2008/01/30 20:16
【回覆】fya965

進入文章分類管理

(上半部):裡面小分類

(下半部):外面大分類

#57 miki801010 on 2008/02/03 14:06
很棒欸 !!!

#58 mickey7011 on 2008/02/03 20:30
卸卸~拿走摟!

我正好在找呢

Private Comment

#60 笨貓 on 2008/02/07 20:34
好用耶..拿走嚕!!

謝謝壓!!

#61 alice773322 on 2008/02/12 11:44
使用起來還不錯喔!很感謝您滴分享喔!^^

#62 xu4y7 on 2008/02/27 01:24
超好用>"<

謝謝哦!!!

#63 JUDOling on 2008/03/06 15:08
好棒唷~!

我帶回家嚕^^

#64 老鄧 on 2008/04/22 20:10
謝啦 ~
帶走

Private Comment

#66 樂 " on 2008/05/03 15:29
謝謝分享=ˋ=

#67 布丁 on 2008/05/15 17:24
謝嚕
謝謝妳
我也有再你的部落逛一逛
我也把語法拿走嚕
-----布丁

#68 love12180819 on 2008/05/18 02:15
簡單明瞭終於會了

謝謝分享捏^^
Hi love12180819:
不客氣唷:)
有幫上忙就好了
AppleAppleDoublereplied on 2008/05/18 10:35

#69 喵ㄦ on 2008/05/21 18:07
謝嚕-ˇ-

#70 dogbone on 2008/06/12 14:31
拿走囉!謝謝~

#71 dogbone on 2008/06/22 16:10
請問一下~未分類文章前面的圖會跟大分類的一樣耶!有沒有什麼辦法可以用掉呢？謝謝!!^^
Hi dogbone:
此語法僅限無名小站
請問你的部落格網址為?
AppleAppleDoublereplied on 2008/06/22 20:25

#72 dogbone on 2008/06/22 20:40
我的部落格是無名的!謝謝~

#73 貓 on 2008/06/28 10:38
拿走摟謝謝分享 ^^ !

#74 布丁 on 2008/07/10 23:11
呼呼ˇˇ

謝謝版主提供，帶走囉^^

Private Comment

#76 魚魚 on 2008/09/01 19:54
很棒耶~

可是我有一些ˋ意見

我絕得你打這些

◎不要在「CSS技術教學版面」分享垃圾東西，真是污染了這裡！

雖然是對的

可是真的會有點傷到人

畢竟有些人只是純屬想幫大家

損到版主

請見諒歐

謝謝!~

至於我小玩意

我會把它改放到別的地方的

謝謝你的提醒
Hi 魚魚:
我將此篇設公開了
因為我希望妳可以看見我的答覆:)

其實我這句"警語"已經很客氣了
畢竟說實在的，CSS技術教學這幾個字就很顯明不是"分享雜七雜八"之地
為何你(妳)們還要一直不停的不停的PO重複文章

當然也謝謝你(妳)的理性看待並願意改過
如果板上"那些人"也可以這樣，我想我也不會打那種警語了
AppleAppleDoublereplied on 2008/09/01 21:12

#77 喬 on 2008/09/07 18:47
謝謝你的教學!
我用了之後很好看!
謝謝
˙ˇ˙

#78 憨楓 on 2008/09/20 00:12
感謝您的分享與指導噢!!
我包走了3Q
Hi 憨楓:
謝謝妳的到訪，希望下回可留下Blog網址再迴響喔^_^謝謝妳
AppleAppleDoublereplied on 2008/09/20 00:14

#79 語亦 on 2008/09/20 01:16
歐歐@@
很實用呢^^

謝謝你無私的分享^v^

#80 momentya on 2008/09/21 21:04
小的拿走了語法喔! !
謝謝尼的分享! !
Hi momentya:
謝謝你的到訪^^也希望下回可以留下Blog網址喔......非常感謝=P
AppleAppleDoublereplied on 2008/09/22 00:36

#81 我是一個過客 on 2008/10/02 17:14
謝謝您
Hi 過客:
不客氣喔，但是希望下回可以留下Blog網址再留言^^3Q
AppleAppleDoublereplied on 2008/10/04 12:35

#82 妞 on 2008/10/07 11:55
拿走囉!!謝謝

#83 DA on 2008/10/22 05:09
：〉
謝謝唷
Hi DA:
下回請留下Blog網址再留言喔^^多謝你的到訪
AppleAppleDoublereplied on 2008/10/22 13:25

#84 翠 on 2008/10/29 22:17
從拉拉家連到你這裡。
你的網站也好豐富ㄛ~
帶走不少好東西^_^
謝謝你大公無私的分享喔!!

加油加油~~
Hi 翠:
拉拉家?@@
AppleAppleDoublereplied on 2008/10/31 14:09

Private Comment

#86 spyalisa on 2008/11/19 15:11
請問為什麼有了小圖後

文章分類最前面的田字還是在呢>"<?

跟圖片大小似乎無關

我試過大一點的圖也是一樣的情形

另外

2個語法我都有貼上

不過移到小分類時只有未分類文章才會出現不同的小圖

其他的都不會呢

是哪裡出了問題嗎ˊˋ?

#87 小笨蛋 on 2009/03/05 23:31
請問喔!你給的這個語法是直接貼上就可以了嗎?還是語法裡面要修改什麼?

#88 yhn096007 on 2009/08/20 14:48
謝謝蘋果的分享 =]
拿了走ˇˇ 辛苦了 >//w//<
Hi 無名(yhn096007)羊:
別客氣囉，歡迎常常來蘋果咬一口晃晃 ^^y
AppleAppleDoublereplied on 2009/08/20 19:47

#89 Rabbit on 2009/08/25 23:10
謝謝
Hi Rabbit:
不客氣 ^^ 歡迎常常來蘋果咬一口
AppleAppleDoublereplied on 2009/08/26 02:46

#90 banana on 2009/10/14 15:28
謝謝妳~
謝謝蘋果的分享~~
帶走囉~~

banana 留

#91 LIN on 2009/10/14 17:45
很有趣，卸卸分享 !

Comment Permissions: Allow commenting

Leave Comment
*Name/Nickname
E-mail
Personal Website
Comment Title
*Comment
* Private Comment	Public Comment Private Comment

特級蘋果引進

部落蘋價數值

Hits Today: 83
Total Hits: 863651

歡迎來吃蘋果

聽蘋果說說話

2009-12-07 10:19
幸福遇見：)

所有歷史碎碎念

尋找特定蘋果

蘋果精準報時

蘋果廣告扛棒

加蘋果到funP

蘋果的哈拉室

蘋果愛聽音樂

蘋果交換連結

蘋果部落回應

蘋種分級處理

．全民瘋部落格．(14)

．全民反智缺兔．(1)

．痞客版面分享．(2)

．語法打造痞客．(2)

．語法打造無名．(7)

．無名語法經驗．(7)

．資源隨手可得．(8)

．部落格大事件．(4)

．好東西推推推．(1)

．雜七雜八東西．(3)

．帥兔蹦蹦跳跳．(3)

．生活映像雜集．(9)

．寫寫創創歌詞．(3)

．水滴兒成長誌．(1)

外銷本站蘋果

巨星｜Michael Jackson from 草莓族下一代
宣傳-BAMBOO FUN NT. $3,000 出售 from ❤ Fennel ❤
● 好友碎碎唸CSS from ジェニファー
.... from zx2009zx
(尚未設定標題) from 小佩滴音樂共和國

蘋果洗耳恭聽

這蘋果也很夯

蘋果牌攝影機

蘋果向麥可致敬

蘋果有這麼多

All Posts

蘋果咬一口