超級課程表是一種重要的學習工具,它能夠幫助我們更好地安排學習生活,提高學習效率。為了讓超級課程表更加美觀、易用,我們可以利用CSS來進行美化。
/* 課程表的樣式 */ table{ border-collapse: collapse; width: 100%; margin: 10px 0; } tr{ height: 40px; } td{ border: 1px solid #ccc; text-align: center; font-size: 14px; font-weight: bold; } .now{ background-color: #f60; color: #fff; } .weekend{ background-color: #ccc; color: #fff; } /* 樣式調整 */ table{ border-spacing: 0; } td{ padding: 5px; } /* 增加美觀的樣式 */ table{ background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); } tr{ border-bottom: 1px solid #ccc; } td{ border-right: 1px solid #ccc; } .today{ background-color: #f7ebc6; border-left: 3px solid #f60; }
上述CSS代碼中,我們針對課程表的表格、行、單元格做了基本樣式定義,同時增加了一些美化樣式,例如添加了圓角、陰影等元素,讓課程表更加美觀。同時,我們還針對一些特定情況做了樣式調整,例如為當前日期單元格添加了特殊樣式,從而使其更加醒目。
通過以上的樣式定義,我們便可以利用CSS來對超級課程表進行美化,并且還可以根據實際需求進行修改,從而得到符合個人需求的超級課程表。
上一篇css選擇器下劃線設置
下一篇刪除當前數據css