Entries Tagged 'CSS' ↓

網頁表格設計

March 3rd, 2006 — CSS, 組織活動

上一篇講到OSDC的網站設計問題。喔，附帶一提，沒報名的要動作快，剛剛看到還剩不到六十個名額。

講別人設計不好，自己當然不能光說不練。所以我弄了個議程表的範例，它們看起來像這樣：1, 2。有興趣的話，你可以用這種網址試試看自己寫的樣式表：

http://hlb.yichi.org/design/css/table/osdc/schedule.php?css=YOUR_CSS_FILE_URL

我的樣式表裡面，並沒有什麼特殊技巧，也沒有半張圖片（我有在想，三個議程表格，背景應該各放「鐵拳無敵孫中山」、「穿林北腿蔣中正」、「共殘狂人毛澤東」的……）下面大概提到幾個地方，跟大家作個分享。

內容置中的部份，就是 margin: auto 配合IE的 text-align: center。如果你不知道為什麼，可以參考這篇翻譯裡「追求卓越」的部份：


/* center DIV */
body {
text-align: center; /* IE */
}

#content {
margin: 0 auto;
text-align: left; /* IE */
width: 760px;
}

表格邊框的部份，就是裡面欄位畫左、上邊框，表格本身畫右、下邊框：


/* TABLE */
table {
border-bottom: 1px solid #999; 
border-right: 1px solid #999; /* Safari render <caption> width incorrectly */
}

th,
td {
border-left: 1px solid #999;
border-top: 1px solid #999;
}

因為同時有三個議程並行，所以就用float: left; width: 32%;，中間的表格加點邊界(margin)比較好看。因為三個表格都是浮動元件，所以後面要加上<hr class="split" />：


/* TABLE: 3 col */
.col3 { }

    .col3 table {
    float: left;
    width: 32%;
    }

    .col3 table.second {
    margin: 0 4px;
    }

.split {
clear: both;
visibility: hidden;
}

最後呢，雖然手寫字體有不容易辨識的問題，不過在這邊用起來倒是挺不錯的：


h2, caption {
font-family: 'Lucida Handwriting', cursive;
font-weight: normal;
}

如果你改出什麼有趣的作品，一定要告訴我喔！ XD

9 Comments

Next Entries →