HTML&CSS：公告条幅样式
原始代码
<!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;
}
// 页面加载时设置颜色
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;
// 关闭条幅的函数
function closeBanner() {
banner.style.display = 'none';
}
</script>
页:
[1]