*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年12月12日 星期五

有規律呈現文字:使用表格+CSS

表格搭配CSS,文字呈現有規律。
對於要處理大量文字,或是大量資料的版型需求而言,這是很好的解決方法。


這是標題
這是內文這是內文。
這是內文這是內文。
這是內文這是內文。
這是標題
這是內文這是內文。
這是內文這是內文。
這是內文這是內文。




CSS 語法,請放在<body>之後:

<style>


table.tab20141212 {
border-spacing: 2px 0.8em;
word-break: break-all;
border: 0px;
}

/*
這是奇數列的CSS
*/

table.tab20141212 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
border: 0px;
}

/*
這是偶數列的CSS
*/

table.tab20141212 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
}
</style>



教 學影音:



互動css語法補充:

在<style>xxx</style>裡面加入下面二條css,則會互動地產生「有規律」的背景顏色:

table.tab20141212 >tbody >tr:nth-child(odd) >td:hover {
background-color: #DEDEBE;
}

table.tab20141212 >tbody >tr:nth-child(even) >td:hover {
background-color: #CAFFFF;



沒有留言:

張貼留言