Grid布局主页

commit 0f92a2467acf38a44ef5b421a5b1da85d7e3a3e6 Author: Coldin04 Date: Fri Jan 23 11:36:38 2026 +0800 feat: 完成 Grid 布局框架搭建 (v0.1) diff --git a/grid-study/index.html b/grid-study/index.html new file mode 100644 index 0000000..2d68efe --- /dev/null +++ b/grid-study/index.html @@ -0,0 +1,32 @@ + + + + + + Grid布局主页 + + + +

+ Coldin04 WorkSpace +

+ +

+ + +

+ +

个人卡片区域

RSS News区域

任务区域

一言

Photos 区域

+ + diff --git a/grid-study/src/avatar_240.webp b/grid-study/src/avatar_240.webp new file mode 100644 index 0000000..620cdef Binary files /dev/null and b/grid-study/src/avatar_240.webp differ diff --git a/grid-study/src/avatar_48.png b/grid-study/src/avatar_48.png new file mode 100644 index 0000000..8fa5bb7 Binary files /dev/null and b/grid-study/src/avatar_48.png differ diff --git a/grid-study/src/favicon.ico b/grid-study/src/favicon.ico new file mode 100644 index 0000000..304c503 Binary files /dev/null and b/grid-study/src/favicon.ico differ diff --git a/grid-study/src/wallpaper/big_sure.jpg b/grid-study/src/wallpaper/big_sure.jpg new file mode 100644 index 0000000..6d29104 Binary files /dev/null and b/grid-study/src/wallpaper/big_sure.jpg differ diff --git a/grid-study/src/wallpaper/desert.jpg b/grid-study/src/wallpaper/desert.jpg new file mode 100644 index 0000000..d6f796f Binary files /dev/null and b/grid-study/src/wallpaper/desert.jpg differ diff --git a/grid-study/styles.css b/grid-study/styles.css new file mode 100644 index 0000000..cc70ebc --- /dev/null +++ b/grid-study/styles.css @@ -0,0 +1,166 @@ +html, body { height: 100%; } +body { + /* 使用 Bing 图片作为背景 */ + background-image: url('src/wallpaper/big_sure.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + + /* 保持高度设置 */ + min-height: 100vh; + margin: 0; +} + +/* 顶栏样式 */ +.top-bar { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + padding: 8px 16px; + margin:10px 16px; + + /* 黏性定位 */ + position: sticky; + top: 5px; + z-index: 100; + background-color: rgba(255, 255, 255, 0.8); + /* 毛玻璃效果 */ + backdrop-filter: blur(10px); + + /* 顶栏圆角效果 */ + border-radius: 12px; +} + +.top-bar__brand { + font-weight: 550; + font-size: 20px; + display: flex; + align-items: center; + gap: 16px; + +} + +.top-bar__logo { + width: 32px; + height: 32px; + place-items: center; + border-radius: 50%; + object-fit: cover; +} + +.top-bar__actions { + display: flex; + gap: 8px; +} + +.top-bar__button { + padding: 8px 16px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; + background-color: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(5px); + cursor: pointer; + font-size: 14px; + transition: var(--transition); +} + +.top-bar__button:hover { + background-color: rgba(255, 255, 255, 0.8); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.top-bar__button:active { + transform: translateY(0); +} + + +/* 主区域样式 */ +.main-content { + gap: 24px; + max-width: 1200px; /* 最大宽度限制 */ + margin: 40px auto; + padding: 0 20px 40px 20px; +} +.dashboard-grid{ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(200px, auto); /* 自动行高 */ + grid-auto-flow: dense; /* 紧凑排列 */ + gap: 24px; +} +.card{ + background-color: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 20px; + color: #333; + + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 16px; + transition: var(--transition); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + + +.card__profile{ + grid-column: span 1; + grid-row: span 2; +} + +.card__rss{ + grid-column: span 2; + grid-row: span 2; +} + +.card__hitokoto{ + grid-column: span 1; + grid-row: span 1; +} + +.card__photo{ + grid-column: span 1; + grid-row: span 1; +} + +.card__task{ + grid-column: span 2; + grid-row: span 2; +} + +/* 响应式设计 */ +@media (max-width: 900px) { + .dashboard-grid { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 600px) { + .dashboard-grid { + grid-template-columns: 1fr; + gap: 16px; + } + .card { + grid-column: span 1 !important; + grid-row: auto !important; + order: 10; + } + .card__profile{ + grid-column: span 1; + order: 1; + } + .card__rss,.card__task{ + grid-column: span 1; + } + .card__hitokoto{ + order: 2; + } +}