最近試了不少風格樣式,發現九成以上都做了下面的事

  • dl,dt,dd,ul,ol,li{ margin:0; padding:0; }
  • ol,ul { list-style:none; }

對此,讓我的不少文章都變得不條列了,因此,最後我挑了一個還滿有質感的配色,vanmusic - 范逸臣_無樂不作,然後修改它!由於目前新版不能進留言板,所以我不曉得對方是否有開放讓人修改的版權,所以只能當做暫時的練習,若有版權問題請留言告之,我會再換掉囉,謝謝。以下是我私下變動的記錄。

  1. 首先,拿掉上面提到的兩個 CSS 敘述,並改成對指定的地方才加上那些敘述
    • .box-text ol, .box-text ul { list-style:none; }
    • .box-text dl, .box-text dt,.box-text dd,.box-text ul,.box-text ol,.box-text li{ margin:0; padding:0; }
  2. 接著,若在 Blog 上方的相簿、部落格、留言板、名片連結顯示有問題,可以再加上下面的
    • #navigation { list-style:none; margin:0; padding:0; }
  3. 然後,由於愛好簡單,因此我只好把背景拿掉了 @@
    • #header 註解掉背景跟 height
    • 調整 #banner h2 裡的顏色
    • 將 #navigation 之相關的都註解起來並修改
      • #navigation {
         position: relative;
         top: 10px;
         left: 600px;
         width:200px;
        }
        #navigation a {
         color:white;
        }
        #navigation a:hover {
         color:#777;
        }
  4. 接著,由於我老了,眼睛看不清楚,所以我調整了字型跟板面寬度
    • #content { width: 95% ;}
    • #article-area { width: 95% ;}
    • .title { font-size: 22px; }
    • .article-content { font-size: 16px; line-height: 20px; }
  5. 最後,則是調整右邊的那些 links
    • #links { width: 99%; } 並拿掉 float: right;
    • .box  { width:50%; float: left; }
  6. 完成。

我想,以後我就不用擔心找不到合適的風格了 XD


    全站熱搜

    changyy 發表在 痞客邦 留言(1) 人氣()