自用的一个网站公告通知代码html+css+js 带关闭按钮

分享一个自用的网站公告通知代码html+css+js 带关闭按钮，放在网站头部，效果还不错。

<!--公告开始-->
  <style>
  .top-tips {
        background-color: #646473;
        line-height: 20px;
        color: #eee;
        padding: 10px 20px;
        text-align: center;
        font-size: 14px;
        position: relative;
    }

  .swiperTips {
        background-color: #fcf4e4;
        color: #d98704;
        overflow: hidden;
    }

  .swiperTips.tip {
        float: left;
        width: 100%;
    }

.top-tips .closex {
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 18px;
    color: #ddd;
    font-size: 24px;
    cursor: pointer;
}
  </style>
  <div class="top-tips swiperTips">
    <div class="tips">
      <span class="tip">我们非常抱歉地通知您，本网站将于 2024 年 8 月 20 日- 2024 年 8 月 30 日进行闭站维护，预计闭站时间为 10天左右。此次闭站是由于公司业务发展，我们需要对网站进行必要的升级和优化，以提供更优质的服务。</span>
    </div>
    <span class="closex">×</span>
  </div>

  <script>
    // 获取关闭按钮和提示框元素
    var closeBtn = document.querySelector('.closex');
    var tipsDiv = document.querySelector('.top-tips');

    // 为关闭按钮添加点击事件处理函数
    closeBtn.addEventListener('click', function () {
      tipsDiv.style.display = 'none';
    });
  </script>
<!--公告结束-->