!important + css动画 + css过渡效果 + 关于z-index + hr标签实际高大于设置高 + css绘制三角形 + bootstrap日历组件 + 复选框全选

原创

于 2019-03-31 20:02:59 发布 · 827 阅读

1 ·

CC 4.0 BY-SA版权

html+css部分

1、可以用 !important 提高一个样式属性的优先级；
2、在css中设置动画（以眨眼为例）：
①在css中通过@keyframes设置移动方式：

@keyframes dong-eyes {
    0%{}
    50%{
        height: 2px;
        top: 35px;
        transform: rotate(0deg);
    }
    100%{}
}

②在设置眼睛的css部分通过animation让其动起来

#eye, #eye2{
    width: 11px;
    height: 13px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 27px;
    transform: rotate(8deg);
    animation: dong-eyes 1s infinite;
}

3、设置表格边框显示效果如下（即不显示左右下边框）：
在这里插入图片描述

/*设置表格最左边没有边框*/
table,
table th:first-child,
table td:first-child{
    border-left: none !important; /*提高该样式的优先级*/
}
/*设置表格最右边没有边框*/
table,
table th:last-child,
table td:last-child{
    border-right: none !important;
}
/*设置表格最下边没有边框*/
table,
td{
    border-bottom