国家公务员考试倒计时页面介绍

酷码编程接单空间

于 2024-10-08 21:38:37 发布

阅读量145

点赞数 2

文章标签： html css 前端国考倒计时

本文链接：https://blog.csdn.net/qq_33877849/article/details/142769950

版权

在这里插入图片描述

代码复刻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国家公务员考试倒计时</title>
    <style>
      body{
        display: flex;
        justify-content: center;
        text-align: center;
      }

      .event{
        margin: 10px;
        background-color: rgba(234, 164, 23, 0.733);
          
        width: 400px;
        
      }
      
      h2{
        margin: 0;
      } 
      p{
        margin: 0; 
      }
      a{
        color: red;
        font-weight: bolder;
        font-size: 21px;
      }
    </style>
</head>
<body>
    <div class="timeline">
        <div class="event">
            <h2>公告及岗位表发布</h2>
            <p>还剩 <a>8</a> 天</p>
            <p>2024-10-14</p>
        </div>
        <div class="event">
            <h2>国考网上报名开始</h2>
            <p>还剩 8 天</p>
            <p>2024-10-15 至 2024-10-24</p>
        </div>
        <div class="event">
            <h2>国考资格审查</h2>
            <p>还剩 8 天</p>
            <p>2024-10-15 至 2024-10-26</p>
        </div>
        <div class="event">
            <h2>国考查询报名</h2>
            <p>还剩 19 天</p>
            <p>2024-10-26</p>
        </div>
        <div class="event">
            <h2>国考报名确认</h2>
            <p>还剩 25 天</p>
            <p>2024-11-01 至 2024-11-06</p>
        </div>
        <div class="event">
            <h2>国考准考证打印</h2>
            <p>还剩 42 天</p>
            <p>2024-11-18 至 2024-11-24</p>
        </div>
        <div class="event">
            <h2>国考专业科目考试</h2>
            <p>还剩 47 天</p>
            <p>2024-11-23</p>
        </div>
    </div>
</body>
</html>