css的container查询实现响应式自适应日历效果代码
代码语言:html
所属分类:响应式
代码描述:css的container查询实现响应式自适应日历效果代码
代码标签: css container 查询 响应式 自适应 日历
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .calendar-wrap { container: Calendar / inline-size; } .calendar { --dayHeaderHeight: 75px; --hourHeight: 50px; display: flex; .hours { > ol > li:first-of-type { margin-block-start: var(--dayHeaderHeight); } > ol > li { block-size: var(--hourHeight); } white-space: nowrap; border-inline-end: 1px solid var(--gray); .day-time { padding-block: 0.25rem; padding-inline-end: 0.5rem; border-block-start: 1px solid var(--gray); } } .days { width: 100%; } .day-number { font-weight: 300; font-size: 2rem; } .day-name { text-transform: uppercase; font-weight: 500; } .events { display: flex; width: 100%; .day-of-events { flex: 1; padding-inline: 0.75rem; display: grid; grid-template-rows: var(--dayHeaderHeight) repeat(9, var(--hourHeight)); grid-template-columns: 1fr; border-inline-end: 1px solid var(--gray); & dt { grid-row: 1; } } .event { --gray: #555; grid-row: var(--row) / span var(--span, 1); border: 1px solid var(--gray); border-radius: 3px; padding: 0.5rem; } & time { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0