css怎么制作日期

使用CSS制作日期显示

通过CSS可以创建自定义样式的日期显示，通常结合HTML和少量JavaScript实现动态日期更新。以下是几种常见方法：

纯CSS静态日期

适用于不需要动态更新的场景，直接通过HTML和CSS样式化：

<div class="date-container">
  <span class="day">15</span>
  <span class="month">July</span>
  <span class="year">2023</span>
</div>

.date-container {
  font-family: 'Arial', sans-serif;
  display: inline-flex;
  align-items: baseline;
  background: #f0f0f0;
  padding: 0.5rem;
  border-radius: 4px;
}

.day {
  font-size: 2rem;
  font-weight: bold;
  margin-right: 0.2rem;
}

.month {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.year {
  font-size: 1rem;
  opacity: 0.8;
}

结合JavaScript的动态日期

通过JavaScript获取当前日期，再用CSS样式化：

<div id="current-date" class="dynamic-date"></div>

const dateElement = document.getElementById('current-date');
const today = new Date();
dateElement.innerHTML = `
  <span class="day">${today.getDate()}</span>
  <span class="month">${today.toLocaleString('default', { month: 'short' })}</span>
  <span class="year">${today.getFullYear()}</span>
`;

.dynamic-date {
  font-family: 'Segoe UI', system-ui;
  display: inline-flex;
  gap: 0.3rem;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  padding: 0.8rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.dynamic-date .day {
  font-size: 2.5rem;
  line-height: 1;
}

.dynamic-date .month {
  align-self: flex-end;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dynamic-date .year {
  align-self: flex-end;
  font-size: 0.9rem;
  opacity: 0.9;
}

使用CSS伪元素创建日历图标

通过伪元素模拟日历翻页效果：

<div class="calendar-icon"></div>

.calendar-icon {
  position: relative;
  width: 60px;
  height: 70px;
  background: #ff6b6b;
  border-radius: 5px;
}

.calendar-icon::before {
  content: attr(data-date);
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  color: white;
}

.calendar-icon::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 5px;
  right: 5px;
  height: 15px;
  background: #ff8e8e;
  border-radius: 3px 3px 0 0;
}

通过JavaScript动态更新data-date属性：

document.querySelector('.calendar-icon').setAttribute('data-date', new Date().getDate());

注意事项

1. 动态日期需确保JavaScript已加载
2. 跨浏览器兼容性需测试toLocaleString的月份格式
3. 移动端需调整字体大小和间距
4. 考虑使用CSS变量便于主题切换：

:root {
  --date-primary: #4a6fa5;
  --date-text: white;
}
.date-widget {
  background: var(--date-primary);
  color: var(--date-text);
}

以上方法可根据实际需求组合使用，通过调整CSS实现不同视觉效果。