gavin/note2any
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

update at 2025-10-09 21:19:57

Browse Source
This commit is contained in:
douboer
2025-10-09 21:19:57 +08:00
parent 002feedbe1
commit 1309caddc3
15 changed files with 1126 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
t2.html Normal file
View File

@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Grid 5列布局示例</title>
<style>
:root{
--gap: 12px;
--radius: 12px;
--bg: gray;
--panel: #111827;
--muted: #1f2937;
--text: #e5e7eb;
--sub: #9ca3af;
--accent: #3b82f6;
}
*{box-sizing: border-box}
body{
margin:0;
min-height:100vh;
background: var(--bg);
color: var(--text);
font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
display: flex;
flex-direction: column;
}
.app{
flex: 1;
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.board{
flex: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"label1_list1 label1_list1 label1_list1 btnA btnB"
"label2_list2 label2_list2 label3_list3 label3_list3 label4"
"content content content content content"
"component component component btnC btnD";
gap: var(--gap);
background: var(--panel);
border-radius: 12px;
padding: 16px;
min-height: 0;
}
.card{
background: var(--muted);
border-radius: var(--radius);
padding: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 40px;
}
.label{
color: var(--sub);
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.select{
flex: 1 1 auto;
background: #0b1220;
border: 1px solid #0f1a30;
border-radius: 8px;
padding: 6px 8px;
color: var(--text);
width: 100%;
}
.btn{
background: var(--accent);
color: white;
border: 0;
border-radius: 8px;
padding: 10px 20px;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
}
.btn:hover{
background: #2563eb; /* 深蓝色 hover */
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.btn:active{
transform: translateY(1px);
}
/* 让按钮所在卡片居中对齐 */
.btnA, .btnB, .btnC, .btnD{
justify-content: center !important;
}
.content{
grid-area: content;
background: #0b1020;
border: 1px dashed #223253;
border-radius: 12px;
padding: 18px;
min-height: 0;
}
.label1_list1{ grid-area: label1_list1; }
.label2_list2{ grid-area: label2_list2; }
.label3_list3{ grid-area: label3_list3; }
.btnA { grid-area: btnA; }
.btnB { grid-area: btnB; }
.label4{ grid-area: label4; }
.component{ grid-area: component; }
.btnC { grid-area: btnC; }
.btnD { grid-area: btnD; }
</style>
</head>
<body>
<div class="app">
<h1>Grid 5列布局 Demo</h1>
<section class="board">
<div class="card label1_list1">
<span class="label">发布平台</span>
<select class="select">
<option>公众号</option>
<option>小红书</option>
</select>
</div>
<div class="card btnA"><button class="btn">刷新</button></div>
<div class="card btnB"><button class="btn">发布</button></div>
<div class="card label2_list2">
<span class="label">模版</span>
<select class="select">
<option>模版 1</option>
<option>模版 2</option>
</select>
</div>
<div class="card label3_list3">
<span class="label">预览宽度</span>
<select class="select">
<option>1080px</option>
<option>720px</option>
<option>540px</option>
<option>360px</option>
</select>
</div>
<div class="card label4">调节文字大小组件</div>
<div class="content">小红书预览区域</div>
<div class="card component">页面选择组件</div>
<div class="card btnC"><button class="btn">按钮</button></div>
<div class="card btnD"><button class="btn">按钮</button></div>
</section>
</div>
</body>
</html>