css3好看的课程表

最近设计了一个很好看的课程表，使用了CSS3的一些特性，颜色搭配和排版都非常漂亮。

首先，这个课程表使用了伪类元素::before和::after来添加了一些装饰性的效果，比如把每一行的上下边框变成斜线，让整个表格的样式更加有层次感。代码如下：

tr:nth-child(even)::before,tr:nth-child(odd)::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #ccc 50%, #ccc 100%);
    transform: rotate(-2deg);
}
tr:nth-child(even)::after,tr:nth-child(odd)::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    width: 100%;
    height: 10px;
    background: linear-gradient(to top right, transparent 0%, transparent 50%, #ccc 50%, #ccc 100%);
    transform: rotate(2deg);
}

除此之外，我们还设置了一些课程表的基本样式，比如单元格的边框、字体颜色、居中对齐等等。我们使用了:nth-child伪类来对表格中的每一个单元格进行样式设置，代码如下：

td {
    font-size: 1.2rem;
    text-align: center;
    position: relative;
    padding-top: 50%;
    border: 1px solid #ccc;
}
td:nth-child(4n+1) {
    color: #f44336;
}
td:nth-child(4n+2) {
    color: #2196F3;
}
td:nth-child(4n+3) {
    color: #4CAF50;
}
td:nth-child(4n+4) {
    color: #FFEB3B;
}

最后，我们使用了CSS3中的transition属性来给每个单元格添加了一个过渡效果，当鼠标悬停在单元格上方时，边框颜色和背景颜色会缓缓地更改。代码如下：

td {
    transition: all 0.2s ease-in-out;
}
td:hover {
    background: #f9f9f9;
    border-color: #999;
}
    

通过使用CSS3的这些特性，我们成功地打造出了一个漂亮的课程表，不仅提高了用户体验，也增加了整个页面的美观度。希望以上的例子可以对广大网友有所启发和借鉴。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！