Design_2.png

終於完成新的部落格樣式,這次選用我最喜歡的暖色系,設計排版算很保守,沒有太過於花俏的東西,加強一些陰影效果讓整體更有立體感,經過上次的製作,這次順利了許多,每次開始我總會覺得css萬能,所以在 photoshop 排版時沒有顧慮太多,結果當然會遇上不順利的地方,例如:區塊圖層可以用 z-index 來改變順序,卻偏偏IE6以下的版本不支援,結果文章上層的 murmur 碎碎念,在IE6下就會跑到下層被覆蓋,當然有解決的方法,先讓新樣式啟用再來修正。

這次我發現出現問題的地方兩度使用 overflow: hidden 得到解決,明明區塊位置都是正確,背景填入位置也都沒有錯誤,但背景就是不在我設定的位置上,還有文章列表的欄位居然在IE6跑版,無法固定在上方,這些都是靠 overflow: hidden ,hidden 屬性是讓標籤元素不顯示超過尺寸的內容,也可以刪除捲軸。

整體看起來css應該沒有太複雜的困難度,但求要各瀏覽器都要保持版面,包括 Firefox Opera Safari IE6-IE8 等等都要 OK...每次問題都出在 IE6 ,還好未來 IE6 使用者應該會越來越少,這次我也發現在新的 IE8 Beta 2 上幾乎沒有出現問題,我想對於 web 標準的確有提升。
創作者介紹
創作者 Candy 的頭像
Candy

Yes or No

Candy 發表在 痞客邦 留言(17) 人氣()


留言列表 (17)

發表留言
  • muki
  • 糖新的版面真的有一種耳目一新的感覺XD
    不過整體排版沒太大的變化讓我失望了一下 呵~

    可是你做的版面真的有一定的質感,依舊大推:好!!!
  • 排版變化太大我自己會不太習慣
    還是覺得這種排版閱讀比較順^^"

    Candy 於 2009/03/11 21:53 回覆

  • santin
  • 真不錯

    新版面看起來也好精緻耶!
    還有一點點科技的感覺
    雖然變化不大
    但滿好閱讀的^^
  • 讓設計大師稱讚,臉紅了^^"

    Candy 於 2009/03/12 18:07 回覆

  • dearguo
  • 真好看。糖糖還是好厲害~
  • 其實很多地方還是沒有很滿意,
    只是盡量讓版面乾淨一點^^

    Candy 於 2009/03/12 18:05 回覆

  • muki
  • 糖有沒有興趣把之前的樣式拿去投在pinxet的樣式伸展台活動阿?
    http://www.pixnet.net/event/templaterunway/award.php
  • 那個樣式側邊欄位太小
    而且側邊2的欄位是隱藏的,基本上不符合任何人使用

    Candy 於 2009/03/12 18:03 回覆

  • pixelart
  • 糖的版面好專業@@
    太利害了~~我比較喜歡這次的fu
    我還在慢慢研究~~~
    感謝糖分享的伊些心得囉
    說不定會遇到XD
  • 在做的過程,會發現自己對css的了解有待加強
    努力中~謝啦~^^~

    Candy 於 2009/03/15 20:02 回覆

  • jun0817
  • 雖然沒看過舊的版面,可是現在的版面乾淨!
    很棒!
    一直以來我對美工跟CSS都是苦手阿!
    (都是交給專業了來…)
  • 謝謝你~^^~

    Candy 於 2009/03/15 20:03 回覆

  • 雪山春曉
  • 再告訴妳一個 IE6 很差勁的地方:
    用 IE6 來看這個版面,"READ MORE..." 沒有連結所以打不開。硬要用 IE6 看的話,只好按 "迴響" 然後把捲軸往上拉,才能看到全文了。
  • 我都沒發現這點 = ="
    我在看看是不是css寫法有問題!!
    -----------------------
    找到了,原來連結要加上高度^^"

    Candy 於 2009/03/20 07:59 回覆

  • eason
  • 獨裁的中國

    很機車~中國把痞客擋掉了
    害得我每次進來都要開proxy...
    所以速度都很慢 >_<
  • eason 是在中國那邊嗎?

    Candy 於 2009/03/16 21:01 回覆

  • 阿比比
  • 好乾淨的版面啊!
    整個就是舒服^///^
  • 妳的blog讓我想到以前
    那種小巧可愛的個人網站~^^

    Candy 於 2009/03/24 19:04 回覆

  • 短髮比
  • 哈!真的嗎?
    其實部落格是靠個人直覺去設計的
    根本沒所謂的實用性
    自己好看就好了XD
    如果要跟妳比還差的遠哩!!!!(大笑)
  • 的確,
    自己的部落格當然要自己喜歡啦!
    設計這東西我還要再多學習呢 = ="

    Candy 於 2009/03/25 22:03 回覆

  • lovedubu
  • 小弟覺得這版面好清爽~~~
    讓人看了很輕鬆~~
  • 謝謝ㄋㄟ~^^~
    可能是沒有放廣告,看起來乾淨些...

    Candy 於 2009/03/25 22:06 回覆

  • 悄悄話
  • 悄悄話
  • lzwceo589
  • 乾淨俐落~
    樸素的美!
  • 謝謝~^^~

    Candy 於 2009/03/27 19:53 回覆

  • myn0122
  • 羨慕您會自己弄版面><

    摸索ing 不過沒有審美觀的我 會弄出什麼咧><
  • 我也不是常常有靈感,
    一個版面都要花很多時間ㄋㄟ!
    不管會弄出什麼樣子也要嘗試,
    自己做的都是最好的^^

    Candy 於 2009/03/27 20:59 回覆

  • Necocandy22
  • 版面和網站(OEC)都做的很亮很有質感=D
    畫面右邊的箭頭讓人有科技的感覺
    整個很棒!!
  • 謝謝,希望在這方面能夠多磨鍊

    Candy 於 2009/06/17 19:40 回覆

  • gn00538343
  • 請問一下總共會用到哪些軟體呀??
    我也想自己弄版面~不過完全不知該如何下手= =
    本身是學設計的~不過網頁CCS的部份就不太行了~
  • 我只用 EmEditor 文字編輯軟體,
    我覺得主要還是要熟悉屬性,
    常練習都可以增加運用能力,
    我教學網站整理的很詳細,你有空可以去研究看看喔!^^
    http://www.hsiu28.net/style/

    Candy 於 2009/11/29 09:15 回覆