CSS(Cascading Style Sheets)是一種用于為網頁添加樣式和布局的語言。其中,我們可以用CSS快捷地制作一個及時表格。
/* 定義表格和表頭的樣式 */ table { border-collapse: collapse; width: 100%; } th, td { text-align: center; border: 1px solid #ddd; padding: 8px; } /* 定義每行不同的背景顏色 */ tr:nth-child(even){background-color: #f2f2f2} /* 定義表頭的背景顏色和文字顏色 */ th { background-color: #4CAF50; color: white; } /* 定義表格中鼠標懸停時的樣式 */ tr:hover {background-color: #ddd;} /* 定義點擊表格中某一行時的位置樣式 */ .selected { background-color: #4CAF50; color: white; }
通過以上CSS代碼,我們實現了以下樣式:
日期 | 事件 | 地點 |
---|---|---|
1號 | 學習 CSS | 家里 |
2號 | 開會 | 公司 |
3號 | 寫代碼 | 星巴克 |
4號 | 旅行 | 海南 |
以上就是制作及時表格的CSS,只需要在HTML中加入每一行的內容即可。