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());注意事项
- 动态日期需确保JavaScript已加载
- 跨浏览器兼容性需测试
toLocaleString的月份格式 - 移动端需调整字体大小和间距
- 考虑使用CSS变量便于主题切换：
:root {
--date-primary: #4a6fa5;
--date-text: white;
}
.date-widget {
background: var(--date-primary);
color: var(--date-text);
}以上方法可根据实际需求组合使用，通过调整CSS实现不同视觉效果。
