【团队待办事项列表练习】

Nempohilist.

已于 2023-03-15 10:54:43 修改

阅读量49

点赞数

分类专栏：前端文章标签： html5 css html css3

于 2023-03-15 07:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_64993156/article/details/129499704

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

选中某些元素的某种状态（鼠标）

1）link:超链接未访问时的状态

2）visited:超链接访问过后的状态

3）hover:鼠标悬停的状态

4）active:激活状态，鼠标按下状态

爱恨法则：love hate

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团队待办事宜</title>
    <link rel="stylesheet" href="./team-list.css">
    <!-- <link rel="stylesheet" href="./team-list.js"> -->
</head>
<body>
    <table class="table">
        <caption>
            <h4>团队代办事项列表</h4>
        </caption>
        <thead>
            <tr>
                <th class="col">任务
                    <div class="submenu">
                        <ul>
                            <li>每日任务</li>
                            <li>每周任务</li>
                            <li>小组任务</li>
                            <li>团队任务</li>
                        </ul>
                    </div>
                </th>
                <th class="col">优先级</th>
                <th class="col">状态</th>
                <th class="col">开始日期</th>
                <th class="col">截止日期</th>
                <th class="col">完成百分比</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">小程序上线</th>
                <td>高</td>
                <td>进行中</td>
                <td></td>
                <td></td>
                <td>
                    <div class="container">
                        <div class="progress">
                            <div id="progress-bar"></div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">注册公司</th>
                <td>高</td>
                <td>未开始</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">完成招新面试</th>
                <td>普通</td>
                <td>完成</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">对接校社联</th>
                <td>高</td>
                <td>完成</td>
                <td>2022年3月26日</td>
                <td>2022年4月26日</td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6"></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

table{
    width: 100%;
    border-collapse: collapse;
    position: relative;
}

table caption{
    font-size: 5em;
    font-weight: bold;
}

th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;

}

table thead tr{
    background-color: #008c8c;
    color: #ccc;
}

table tbody tr:nth-child(odd){
    background-color: #eee;
}

table tbody tr:hover{
    background-color: #f57c74;
}

table tbody tr td:first-child{
    color: #90c1e2;
}

.submenu{
    display: none;
    position: absolute;
    background-color: #ccc;
    text-align: center;
    color: #fff;
    width: 362px;
    transform: translateY(20px);
    height: 123px;
    
    
}

th:hover .submenu{
    display: block;
}


.container{
    right: 0px;
    position: absolute;
    top: 60%;
    /* transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%); */
    
}

.progress{
    background-color: #e5e9eb;
    height: 1.5em;
    position: relative;
    width: 15em;
}




#progress-bar {

    animation-duration: 8s;
    
    animation-name: width;
    
    background-image: linear-gradient(to right, #3c6443, #5ac8fa, #007aff, #34aadc, #5856d6, #eccad0);
    
    background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); background-size: 15em 1.5em;
    
    height: 100%;
    
    position: relative;
    
    }
    
    @keyframes width {
    
    0%,
    
    100% {
    
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    
    }
    
    0% {
    
    width: 0;
    
    }
    
    100% {

    width: 100%;
    
    }
    
    }

    
    .container .notice {
    
    animation: change 5s linear 0s infinite; font-size: 15px;
    
    margin: 10px;
    
    }
    
    @keyframes change {
    
    0% {
    
    color: #a3e7ae;
    
    }
    
    25% {
    
    color: #5ac8fa;
    
    }
    
    50% {
    
    color: #007aff;
    
    }
    
    75% {
    
    color: #5856d6;
    
    }
    
    100% {
    
    color: #f1d5da;
    
    }
    
    }

Nempohilist.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【团队待办事项列表练习】

2）visited:超链接访问过后的状态。4）active:激活状态，鼠标按下状态。1）link:超链接未访问时的状态。选中某些元素的某种状态（鼠标）3）hover:鼠标悬停的状态。爱恨法则：love hate。
复制链接

扫一扫

专栏目录