照片一張張串起 回憶的珍珠項鍊
 文字一行行拓印 歲月的陽光足跡

  Windows Live Spaces要倒閉了,牛奶趕緊避難到痞客來。

  初來乍到,挑選個喜歡的版型,當我把過去辛勤耕耘的181篇文章轉移過來,馬上就遇到了「天底下每個部落客都會犯的錯誤」:字型過小。

  該怎麼辦呢?答案:修改CSS啦!


  我改了六個地方:

  1. 主標題字型:
    • 原本的主標題小到根本看不到,我把字型調整到超級大。
    • 標題欄是在「header區」。
    • 主標題的樣式是「#banner h1 a」,我把它改成:
      • font:bold 60px arial;
      • line-height:60px;
  2. 副標題字型:
    • 副標題的樣式是「#banner h2 a」,我把它改成:
      • font-size:30px;
      • font-weight:bold;
      • line-height:30px;
  3. 文章標題字型:
    • 內容欄是在「content區」。
    • 文章標題的樣式是「.title a」,我把它改成:
      • font:bold 24px Century gothic;
  4. 文章內容字型:
    • 文章內容的樣式是「.article-content」,我把它改成:
      • font-size:20px;
      • line-height:40px;
  5. 內容欄寬度:
    • 字變大了,內容欄也要跟著變大才行,否則放不了幾個字就超格了。
    • 這需要修改兩個地方:除了內容欄之外,還要配合修改主欄寬度。
    • 內容欄的樣式是「#content」,我把它改成:
      • width: 710px;
    • 主欄是在「main區」。
    • 主欄的樣式是「#main」,我把它改成:
      • width:1140px;
  6. 恢復段落縮排:
    • 不能縮排文章看起來會很彆扭。
    • 這需要恢復ol、ul、dd的樣式設定。請加入這三行:
      • .article-content ol, .article-content ul, .article-content dd { margin-left: 40px; }
      • .article-content ul { list-style:disc;}
      • .article-content ol { list-style:decimal;}

  就這樣,給大家參考。希望大家都玩得愉快!


更多「網路實用小撇步」:

  如何解決Facebook臉書字體過小問題?

  如何解決IE9 (Internet Explorer 9)字體模糊問題?如何關閉clear type字型?

  Windows7網路的芳鄰自動登入,如何解決Win7關機後不會記住網芳密碼的問題?

  室友獨佔頻寬要怎麼處理?如何頻寬搶贏別人?

  硬碟壞掉是什麼聲音呢?

  文章自動產生器

文章標籤
創作者介紹
創作者 牛奶 的頭像
牛奶

牛奶生活日記

牛奶 發表在 痞客邦 留言(2) 人氣()


留言列表 (2)

發表留言
  • 貝拉
  • 謝謝你的分享..
    可是我去我的CSS找..好像跟你的都不符合耶..
    電腦外行的我..也是因為搬家..字好小...好討厭..
    可以幫我嗎?謝謝..