我是公告

:: 置 　 頂 ::

1. 抵制抄襲盜用者... [置頂] 我的反抄襲反盜用
2. 樣式使用者請先看完這篇文在發言3q [置頂] 樣式拿取說明文(9/19 更新)
3. 歡迎來這翻箱倒櫃找自己喜愛的樣式唷~~ [集中] 樣式集中區(痞客模板)
4. 對樣式修改有問題嗎?來這裡看看→ [教學] 基本CSS樣式改寫 (3/5 更新)
5. 禁止廣告回文。有要打廣告請至 [ 留 言 板 ] 禁* " 商 業 廣 告 " = =...
6.這裡不提供無名任何樣式!無名的朋友們請勿再來要樣式...如有留言一律不回覆!謝謝!
7.文章第一篇是問卷，不管你是誰~有填寫問卷都非常謝謝您~>0< 要看新文章請從第二篇開始看唷~~~

:: 其 　 他 ::

＊用BloggerAds 替自已加薪 ＊BlogAD招募下線會員

:: 公 　 告 ::

1. 網誌樣式有出問題歡迎回報~ 謝謝你們 :)
2. 目前有2個樣式在後台~已通過審核TAT(這是感動的淚水) ...被巴
3. 如果在後台找不到我的樣式~到全部分類區找作者 yoyocat24 即可~謝謝大家的喜愛囉~^^
4. 目前樣式最佳瀏覽為 1024*768解析度 with Firefox2(3)
5. 新樣式測試中(目前還沒做完...囧")~有問題歡迎回報~3Q
6. 新樣式暫時先修改到這...最近要開始忙了(被巴*)

:: 備 　 忘 ::

1. 給阿布的賀圖
By 油油(yoyocat24)

恩...就!有人問~我今天剛好很閒作成教學= 3="
希望對大家有幫助囉~~齁齁齁

(( 我用痞客模板的標籤來做教學的喔~如果是其他模板請將標籤更換即可~ ))

Step1  將你的banner做成圖片

  在這裡我用我的banner來當範例



Step2  開啟你的CSS檔 並將你的banner背景圖檔設置好

找到 #banner 標籤 ((沒有的話請自己加進去

將製作好的banner圖片放置 #banner

語法:

#banner {
position: relative;
float: left; 
width: 990px; /*你的banner寬度*/
height:300px; /*你的banner高度*/
background: url(''你的圖片網址') no-repeat;
}

Step3  設定網誌標題連結

先將網誌標題設定絕對位置 ((top 和 left <<自己設定 看你要位移多少

#banner h1 {
position: absolute; /*絕對位置*/
top: 0px; /*從上面向下位移*/
left: 10px; /*從左邊向右位移*/
}

之後將連結設定大小並將字體設定成零((也就是不要讓字出現

#banner h1 a {
display:block;
width: 315px; /*設定成你的連結寬度*/
height: 90px; /*設定成你的連結高度*/
font-size: 0px;
background: none;
text-indent: -5000px; /*將網誌標題利用負值縮排隱藏起來 值越小越好*/
}

這樣水水的圖片連結就出現囉~~((實際情況請參考我的網誌...可以去點點看啦~~XD"
((如果教學有錯誤麻煩告訴我一下喔~謝謝 :)




(延伸教學)未完待續....



Bookmark: HemiDemi MyShare Baidu Google Bookmarks Yahoo! My Web Del.icio.us Digg technorati furl Bookmark to:YouPush Bookmark to:你推我報

Posted by yoyocat24 at 痞客邦 PIXNET Comments(8) Trackback(0) Hits(999)

Recommend to Front page Forward by E-mail Forward to Guestbook

▲top

open trackbacks list Trackbacks (0)

Comments (8)

Post Comment
  • #1 浩浩 on 2007/09/05 13:42

  • 酷耶XD
    雖然我看不懂XD
  • 沒關係妳要學我可以慢慢教~~XD

    yoyocat24replied on 2007/09/05 23:12

  • #2 weihan180 pixnet user on 2007/09/05 22:40

  • 很實用耶!!~抄筆記...
  • 真的嗎~齁齁~~謝謝啦~XD
    --
    希望大家看的懂((大笑

    yoyocat24replied on 2007/09/05 23:12

  • #3 poise0426 pixnet user on 2007/09/06 22:52

  • 很謝謝你提供這個教學^ˇ^

    我研究了老半天都研究不出來說…
  • 囧" ((我寫的這麼...讓人不能理解嗎~~我要去哭了~~噗嗤
    好啦好啦不要嚇你~跟你說不客氣XD
    ---
    你有CSS的基礎了嗎!?

    yoyocat24replied on 2007/09/06 23:16

  • #4 poise0426 pixnet user on 2007/09/07 18:39

  • 你誤會我的意思了^^"
    我是說你還沒發這章教學時，我研究這個研究了很久…真的感謝你寫這篇教學:D
    我CSS有一點點基礎了~不過還不是很利害
    有問題在請教你喔:)
  • 齁齁~~原來如此阿~~XD
    加油吧~~相信你也可以變成CSS達人~((燦笑~~

    yoyocat24replied on 2007/09/07 18:45

  • #5 patty30925 pixnet user on 2008/08/07 12:49

  • 謝謝油油～我成功了^__^
    --
    新版面很好看！(排版也很不錯～)
  • 恭喜壓~~~
    開希~~~終於有人看的懂了~~~嗚嗚嗚嗚...
    感動啦~~~~
    ----
    3Q~~我排了好久唷~~
    只是好像還是有點怪怪低...
    我繼續排啦~哈~

    yoyocat24replied on 2008/08/07 16:18

  • #6 tkdtkdt pixnet user on 2008/12/12 20:43

  • 求助!!!!!

    你好!!!
    我想學ccs!
    可是我連ccs的基礎都不懂!
    所以也看不懂你的教學!
    希望能得到你的協助!
    感恩了~~
  • 哈嚕~~
    我現在沒有什麼時間可以教耶...
    因為那個要教起來可能要教很久
    然後如果你想要學的話
    建議你先把html的語法弄懂
    再來學CSS 這樣會比較快
    然後推薦你一個網站 OEC SPACE
    ((去yahoo搜尋就可以搜尋到了

    裡面有一些基礎的CSS教學
    先把那個看懂在學其它的吧 :D

    yoyocat24replied on 2008/12/12 23:31

  • #7 maizizi pixnet user on 2009/05/13 19:51

  • 請問要怎麼在"[教學] 網誌標題連結變成圖片 "的標題後加入圖呢？
  • 你可以對連結設定背景
    利用padding-right設定保留區塊來設定背景圖片就好了

    yoyocat24replied on 2009/05/15 23:36

  • #8 maizizi pixnet user on 2009/05/16 01:39

  • 嗯！如果用那語法是不是每個標題前都會改？
    我想要是這樣的感覺
    http://support.pixnet.tw/index.php?topic=61960.msg154015#msg154015
  • 是的...css是針對class、id名稱還有元素去設定樣式的...
    除非有另外設定名稱...否則他都會顯示一樣的樣式喔~~~
    其實我還滿希望痞客邦能夠針對每篇文章設定一個專屬的id名稱~
    這樣就可以單獨設定樣式了:D
    ------
    至於你那個連結會出現語法可能是因為他是在標題連結內的關係...
    ((自動轉換編碼...
    這大概是痞客邦的設定...
    避免跟html混淆造成無法顯示或讀取...
    所以你的標題會才出現語法...=ˇ="
    至於要怎麼用掉的話可能要跟痞客邦反應吧...

    yoyocat24replied on 2009/05/16 11:53

Comment Permissions: Allow commenting

Leave Comment

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