Something You may have to know!

  語法可到麻麻家索取。

為各種理由,文中很多東西都藏起來了,就...隨緣吧。 :P
圖片不禁取用,但請勿直接用原始連結貼圖!因個人空間有外連流量限制,這樣會影響敝人的使用權利!很多文的圖片會變成叉燒包!請自己找空間放圖再張貼!謝謝!
(Please DO NOT use pic's link directly! It will break my pics, cause there's flow limited in my space. Please post pics from your own space. Thanks!)

有很多非圖檔連結因存放空間「SkyDrive」某次改版而突然失效,實無力修正所有連結!若造成下載的困難還請海涵!

只有用 IE 瀏覽器才能看到宏爺鼠標...。因為 FireFox 和 Chrome 不支援 ANI 動態鼠標!
私人空間有時流量會超載,造成圖片和檔案失聯。判別是否超載:看鼠標是不是宏爺頭。不是即已超載 (因鼠標放同空間)!

請訪客注意:
為BLOG良好環境和您自身電腦安全!請勿嘗試拜訪廣告中的不明網址!

不明情趣廣告連結,請勿點擊,以免木馬或惡意程式入侵!


哈哈哈哈哈哈哈~ ~ ~ ~ ~ ~ ~ ~! 
太高興了!這個黑黑黑的面版就是我要的啦!(瘋狂狀) 
 
面版原作者是「pixnetvisual」,我只是把背景圖換掉了,
原版面請到列表找「pixnetvisual」的「fresh life」。
我覺得「pixnetvisual」好像是...和PIXNET系統還是管理有關,
在面版下留的個人網址也是PIXNET的首頁。
「pixnetvisual」寫了很多預設版面和教學版面,以及一些外表很簡單陽春的面版。
(外表簡單不表示內容很簡單...),提供很多素樣基本型給使用者。
尤其教學版面應該對很多想學的人很有用吧!CSS語法中中每個欄位都加註。
當然,我個人試寫過CSS的心得仍不建議完全不懂的人去試,還是專注自己所長較好。
  
CSS我是沒什麼法度,不過圖我就有很多方法了。
在發現這個面版是由圖片而不是語法來決定背景後,嘿嘿嘿嘿~ ~ ~ ~ ~!
我真是在心中奸笑不能自己啊!
嘿嘿嘿嘿嘿嘿~ ~ ~ ~ ~!
 
不是很難弄的狀況,這次就直接去掉飽和把它變成變黑白階的圖。
再調一下確保背景都是純黑的(#000000)!
為保證連結性,把 header-container-footer 三個放一起編輯。
再切開就OK啦!
啊~ ! 「La Parler」的宏爺真的很妖媚呀~ !
可惜這家店 OVER 了... ... 。 不然還可以期待更多妖媚的宏爺...唉...。
 
我把原圖中宏爺摟在手上的押切小姐PS掉了...,
沒有很用心PS所以痕跡還蠻明顯的,不好意思。 :P
鏤空是我最高興的地方,也算是比較有修改CSS之處吧!
 
只要背景不設定顏色就已經是鏤空了,主要是讓捲軸變透明。
找到「#recent-article」、「#category」、「#latest-comment」,
在那一堆「scrollbar」前加一句「filter: Chroma(Color=色碼)」就OK!
 
filter: Chroma(Color=色碼);  /*想要變成透明的顏色*/ 
scrollbar-face-color: 色碼;  /*卷軸顏色*/ 
scrollbar-track-color: 色碼;  /*軸軌顏色*/ 
scrollbar-3dlight-color: 色碼;  /*捲軸凸面顏色*/ 
scrollbar-darkshadow-color: 色碼;  /*卷軸陰影顏色*/ 
scrollbar-arrow-color: 色碼;  /*箭頭顏色*/ 
scrollbar-shadow-color: 色碼;  /*捲軸按鈕凸面顏色*/ 
scrollbar-highlight-color: 色碼;  /*卷軸按鈕陰影顏色*/ 
 
除了箭頭顏色,其它所有顏色都設成和「filter」一樣,
所以都被濾掉了,變成沒顏色的透明。YA ~ !
 
字體什麼就懶得改了,眼睛會脫窗,反正黑白是萬能色,什麼顏色都能配。
也許有人會覺得字都在臉上了!不過,我主要要的是那迷濛的雙眼。嘻嘻~ !
 
 
 
 
◎最後附上作業中原圖和成品圖:
A. 還沒有加上浮水框,也還沒裁切 (這其實是三張圖合起來編輯的)。
 
 
 
B. 我套起來是這樣,用的背景圖是PNG格式(有圖層),
 我不知為何我一開始就把做好的圖存成有圖層的PNG,而非一般常見的JPG...?
 不知在IE7以外的瀏覽器顯示的會不會不同? 
 
 
 

呼~ !今天真是HAPPY! 終於瘋完了... 。趕快去睡覺。
 
 
 
◎問題討論圖::P 
1. 在IE6看到可能是這樣子吧。我用無圖層的PNG或JPG作版首圖也會得到此結果。 
 我沒有IE6,所以我自己是推測用JPG的狀況可能和用IE6是差不多的。 
 
 
  
2. 我試過拿掉捲軸透明語法,用JPG圖時欄位背景就會透明,但捲軸就會看到了。 
 
 
 
3. 最後又把捲軸透明語法擺回去了,因注意到有白塊的圖,在宏爺頭上也會出現一個白點。
 用colorSpy來測,和白塊都是#ffffff,所以推測應是哪個有設#fff(純白)之處的緣故。
 最後試把下面這段中刪去某句,然後捲軸語法就能和透背效果共存了(在IE7上)
 但我不知道刪掉這句會有什麼其它後遺症......:P。
 做一些修改都是用推理的...,而不是對語法的了解......orz。
select {
    width: 170px;
    color:#777;
    border: 1px solid #fff; (←刪除了這一行) 
    background:#d5e1bd;
    }
 不過,網友用IE6測試的結果,似乎還是沒用耶...@@,大概只有在IE7上才有效果...冏。
 所以後來我又把這行加回去了。反正是我亂改的,我根本不懂...T__T。
    
 後來查IE6的麻煩還蠻多的,有時顯示上很挑,
 像是現在看起來都支援的PNG透明圖,在IE6上不支援,想要支援的語法超級長...@@。
 好像是要騙IE6這樣又那樣...,沒力氣仔細看。SORRY!太多了。
 我也學不來(搞不懂要怎麼寫)。不好意思啦!只好等懂CSS的人來弄了。
 不知在討論區能否遇到好人...。
 
4.最後我把捲軸直接拿掉了。其實在網誌設定把顯示的文章數和回響數設少也可以。
 因為只有行列長度超過160px才會出現捲軸。然後,看起來是共存了。^_^
 
 
 
 因為我其實對CSS語法是七竅通了六竅 → 一竅不通!!所以這是我目前的極限了。SORRY!除了上PIXNET的服務論壇請益於高手(不知會否有高手賜教,只能等了),我自己也做了一堆無用的測試,在論壇的問題帖寫好長一闕!問題是暫時「緩解」了,我也懶得再弄了。
 

華.小百合★ 發表在 痞客邦 PIXNET 留言(11) 人氣()


留言列表 (11)

發表留言
  • bluetower
  • 認真到不可思議的華:

    我用的瀏覽器是firefox,看起來完全是OK的,而且很美!告訴你一聲哦....
  • Dear bluetower:
    Thanks!謝謝您的回報。
    我第一次對版面做這麼大的改動,很高興您覺得好看。^^

    華.小百合★ 於 2008/06/13 19:18 回覆

  • 悄悄話
  • fayfay
  • 華每次都把版首弄得很美
    妳真的是很認真又有實驗精神的人
    職業病??(笑)
  • Dear fayfay:
    這是我對套用版面做過最大的更動吧!(其實也就是改圖而已)
    真高興fayfay也覺得好看呢!
    實驗精神嗎?@@? 可能是天生龜毛而不是職業病吧?(呆笑)

    華.小百合★ 於 2008/06/13 19:22 回覆

  • tbjack
  • 呀華大~~~這個好這個好^v^,很工整清爽呢。想請問您:您所秀的第二張圖上的link bok是透明的,但實際到小的這卻是反白無法呈現透明狀,能有方法做調整嗎?感謝您喔\^.^/
    black_jack
  • Dear blackjack:
    謝謝您告訴我喔!
    之前試用JPG不行(除了月曆其它都有白塊),所以也有在擔心會不會別人看時不一定會透明。
    請問一下您的瀏覽器是哪一種哪個版本?我好去PIXNET的服務論壇問。
     
    另外,我試著加入了背景透明的語法,但我不知有沒有用,(因為我看來都是透明的)
    可以請您再告訴我結果嗎?謝謝!

    華.小百合★ 於 2008/06/13 19:26 回覆

  • minna
  • Dear華,
    很喜歡你這個新版面啊! 真的很美呢→灰+黑+可口的玉米(哈)
    那個背境的玉木水汪汪凝望大家的眼神→暈倒
    那隱隱約約的效果很讚喔! 給你鼓掌! \(^O^)/
  • Dear minna:
    謝謝minna!^^
    對啊!宏爺在「La Parler」的神態真的很媚,
    和在MOMME2的妖又有點不一樣呢!
    可惜我沒有更大張的,不然一定會拿來做壁紙吧?
    (然後做出來又不敢用......XD)
    真可惜「La Parler」沒了,停四個月,會再開張嗎?
    但宏爺變得好乾好瘦喔...,就算有再開...,會找宏爺代言嗎?@@

    華.小百合★ 於 2008/06/13 20:53 回覆

  • tbjack
  • 華大:6.0.2900.2180.xpsp.050301-1521
    這是我電腦的瀏覽器?呀哈哈,真是超級電腦白痴啊~~~還得問人才知從哪找到瀏覽器版本啊〈汗汗汗〉真是麻煩您了\^.^/感恩感恩
    black_jack
  • Dear blackjack:
    那麼請問現在您看到的情況,已經可以透視欄位的背景了嗎?
    還有哪一欄有問題請再告訴我喔!^__^

    華.小百合★ 於 2008/06/13 20:56 回覆

  • tbjack
  • 您已做了調整嗎?還是一樣ㄟ,嗚嗚,不知問題出在哪啊~~~~其他地方都ok,就是link box是白的... =.=
    black_jack
  • Dear blackjack:
    我試著拿掉捲軸透明語法,您看看結果是不是像看上面貼的圖。謝謝!

    華.小百合★ 於 2008/06/14 04:55 回覆

  • 蓁果子
  • 因為我用的瀏覽器不是IE7,所以我也不知道為何我看到的link box還是白的,不過用firefox看到的是正常的喔!
    (小聲說)我覺得比我昨天進來看到的版面還好看~讚喔~

    呵呵..
    痞客幫的帳號是去年(應該是8月還9月吧)就有的
    為了加入好友XD
    因為平常用無名的小幫手用慣了
    所以對於要用CSS更改版面的部落格
    要花些時間研究的
    時間上的關係會考慮要不要用
    因為以前試著玩過無名的CSS
    一玩就玩好久
    不過我可能不是龜毛,而是執著病
    不知道要弄到知道為止,
    但是這樣一來也稍稍弄懂一些
    雖然還是一竅不通XD
    不過痞客幫也有很多無名沒有的功能
    我覺得還不錯
    之前我有逛過一個部落格
    有教大家怎麼用各大部落格的CSS
    不過最近去看好像關站了很可惜
    也謝謝你提供一些關於設定背景顏色的小資訊~
    無名雖有小幫手,但有些設計者不提供在小幫手更改的就必須在CSS更改了
    不好意思~囉唆了一堆...
    PS..CSS看久了,眼睛「真的」會脫窗XD
  • Dear 蓁果子:
    謝謝蓁果子!
     
    我已經盡我目前所能了。現在我能選的方法,恐怕就是「放棄捲軸透明」或「放棄IE6」...XD!還要等看看來客的回報。
     
    我並不想去弄CSS的...,本只想改些圖,然後再貪心點弄個透明軸。因為原來留的版首可發揮空間實在太扁了...@@,才想借助透明發揮變化。
     
    老實說我運氣很好,一開始就選擇將圖片存為PNG,我都不知道為什麼。因此馬上就得到完美的成果。因為若我一開始就用JPG的話,也一定是白塊。
     
    CSS語法的確會讓人很眼花...@@,就算知道什麼是什麼,但實際用時也可能發生像我這次這樣難以理解和預期的情況吧!不是不得已我還是只想會換圖就好了... :P

    華.小百合★ 於 2008/06/14 05:17 回覆

  • tbjack
  • 嗚嗚華大:白塊又跑回來了耶,好奇怪喔,唉,很感謝您追根究底,不過讓您很忙碌真不好意思啊。啊,真抱歉竟沒注意到留言的位置,給您添麻煩了,蘇咪嘛謝捏@.@
    black_jack
  • Dear blackjack:
    有沒有考慮過要升級IE7呢...。
    雖然我自己也並沒有覺得IE7比較好用..。
    不過真的很難測試,因為我沒有IE6。
    暫時不管了,先放著,反正我本來就不懂CSS。這樣猜下去實在太沒有效率了!
    問題區也沒什麼人會回答的樣子,也不知道要問誰,真傷腦筋。
    不好意思,我沒有兩全的方法,能力有限。SORRY!

    華.小百合★ 於 2008/06/14 21:27 回覆

  • tbjack
  • 呃...華大:我想大概我電腦秀逗啦~~,現在時間是22:56,距離上次留言是2小時又40分鐘,我再一次上來所看到的卻又呈現透明狀,白塊不見了?〈驚〉XDDD,或是您又做了修改呢?總之,真是大大大大大感謝啊,不過就算再有出現的話,小的也不想理它了,怎好勞您一再費神呢?以上報告\^^/
    black_jack
  • Dear blackjack:
    http://www.microsoft.com/taiwan/windows/ie/downloads/default.mspx
    覺得您可以試看看,因為我覺得...不能完美呈現好可惜...。
    我很希望別人能看到最好的狀況呢。
    可惜我自己的能力不足,實在很抱歉。也許也是我太貪心了...。

    華.小百合★ 於 2008/06/15 04:03 回覆

  • tbjack
  • 喔~~~親愛的華大:忍不住要香您一個〈啾〉呀真害羞~~~您施展了什麼魔法呀?現在不但一片光明...呃...是透明XDD,而且捲軸也不見了,完全的大好啊,哇哈哈!您的貪心造福了眾飯們,您可以再貪心點〈不要命了你,敢如此要求!?〉XDDDD,除了謝謝還能說什麼?為您赴湯蹈火在所不辭?好狗腿XDDD,請受小的一拜啦XDD
    black_jack
  • Dear blackjack:
    簡單的說,我直接把捲軸整個給拔了。也就是「沒捲軸了」。
    這樣就不用設捲軸透明語法,也不用煩惱怎樣才能兼顧。
    缺點是條列不能太多,因為太多也不會捲,底下的看不見!哈哈!
    只有最右那欄我有保留捲軸。^__^

    華.小百合★ 於 2008/06/16 16:00 回覆