HTML&CSS：公告条幅样式

玄之 · 发表于前天 20:57

原始代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告条幅</title>
    <style>
        /* 基本样式设置 */
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
        
        /* 公告条幅样式 */
        .announcement-banner {
            background-color: #d94e1f;
            color: white;
            padding: 10px 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            position: relative;
            animation: slideIn 0.5s ease-out;
        }
        
        /* 公告内容样式 */
        .announcement-content {
            font-size: 16px;
            display: inline-block;
            max-width: 90%;
            overflow: hidden;
            white-space: nowrap;
        }
        
        /* 关闭按钮样式 */
        .close-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            padding: 5px;
        }
        
        /* 进入动画 */
        @keyframes slideIn {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .announcement-banner {
                padding: 8px 15px;
            }
            
            .announcement-content {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <!-- 公告条幅 -->
    <div class="announcement-banner">
        <div class="announcement-content">
            【紧急通知】因系统升级维护，网站将于今日22:00-次日6:00暂时关闭，请提前做好准备！
        </div>
        <button class="close-btn" onclick="closeBanner()">×</button>
    </div>

    <script>
        // 关闭条幅的函数
        function closeBanner() {
            document.querySelector('.announcement-banner').style.display = 'none';
        }
    </script>
</body>
</html>

代码1

<style>
    /* 公告条幅样式 */
    .announcement-banner {
        background-color: #d94e1f;
        color: white;
        padding: 10px 20px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        animation: slideIn 0.5s ease-out;
        border-radius: 8px; /* 圆角8px */
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
    }
    
    /* 公告内容样式 */
    .announcement-content {
        font-size: 16px;
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 关闭按钮样式 */
    .close-btn {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: white;
        font-size: 16px;
        cursor: pointer;
        padding: 5px;
    }
    
    /* 进入动画 */
    @keyframes slideIn {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .announcement-banner {
            padding: 8px 15px;
        }
        
        .announcement-content {
            font-size: 14px;
        }
    }
</style>

<!-- 公告条幅 -->
<div class="announcement-banner">
    <div class="announcement-content">
        【紧急通知】因系统升级维护，网站将于今日22:00-次日6:00暂时关闭，请提前做好准备！
    </div>
    <button class="close-btn" onclick="closeBanner()">×</button>
</div>

<script>
    // 关闭条幅的函数
    function closeBanner() {
        document.querySelector('.announcement-banner').style.display = 'none';
    }
    
    // 颜色数组（一周7天不同颜色）
    const colors = [
        '#FF5733', // 周日 - 橘红色
        '#D94E1F', // 周一 - 深橘色
        '#33A8FF', // 周二 - 蓝色
        '#33FF57', // 周三 - 绿色
        '#F533FF', // 周四 - 紫色
        '#FFD700', // 周五 - 金色
        '#33FFCC'  // 周六 - 青色
    ];
    
    // 根据当前星期几设置条幅颜色
    function setBannerColor() {
        const dayOfWeek = new Date().getDay(); // 0是周日，1-6是周一到周六
        document.querySelector('.announcement-banner').style.backgroundColor = colors[dayOfWeek];
    }
    
    // 页面加载时设置颜色
    window.addEventListener('DOMContentLoaded', setBannerColor);
</script>

代码2

<style>
        /* 公告条幅样式 */
        .announcement-banner {
            background-color: #d94e1f; /* 默认颜色，将通过JS覆盖 */
            color: white;
            padding: 10px 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            position: relative;
            animation: slideIn 0.5s ease-out;
            border-radius: 8px; /* 添加圆角 */
            display: flex; /* 使用弹性布局实现垂直居中 */
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 内容和按钮左右分布 */
            max-width: 800px; /* 建议添加最大宽度 */
            margin: 0 auto; /* 水平居中 */
        }
        
        /* 公告内容样式 */
        .announcement-content {
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; /* 长文本省略 */
        }
        
        /* 关闭按钮样式 */
        .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            padding: 5px 10px;
            /* 移除绝对定位，利用弹性布局定位 */
        }
        
        /* 进入动画 */
        @keyframes slideIn {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .announcement-banner {
                padding: 8px 15px;
                border-radius: 6px;
            }
            
            .announcement-content {
                font-size: 14px;
            }
        }
    </style>

    <!-- 公告条幅 -->
    <div class="announcement-banner">
        <div class="announcement-content">
            【紧急通知】因系统升级维护，网站将于今日22:00-次日6:00暂时关闭，请提前做好准备！
        </div>
        <button class="close-btn" onclick="closeBanner()">×</button>
    </div>

    <script>
        // 七天循环颜色（周一到周日，可自定义颜色）
        const dailyColors = [
            '#2196F3',   // 周一 - 蓝色
            '#4CAF50',   // 周二 - 绿色
            '#FF9800',   // 周三 - 橙色
            '#E91E63',   // 周四 - 红色
            '#673AB7',   // 周五 - 紫色
            '#F44336',   // 周六 - 深红色
            '#FFC107'    // 周日 - 黄色
        ];

        // 获取当前星期（0=周日，1=周一到6=周六，调整为周一到周日顺序）
        const today = new Date();
        const dayOfWeek = today.getDay() === 0 ? 6 : today.getDay() - 1; // 转换为0-6（周一到周日）

        // 设置当天颜色
        const banner = document.querySelector('.announcement-banner');
        banner.style.backgroundColor = dailyColors[dayOfWeek];

        // 关闭条幅的函数
        function closeBanner() {
            banner.style.display = 'none';
        }
    </script>