模板:收缩大标题/styles.css - 版本历史

2026年10月6日 (二) 05:40 Ancimen

2026-10-06T05:40:05Z

←上一版本		2026年10月6日 (二) 13:40的版本
第20行：		第20行：
	position: relative;		position: relative;
	padding: 1.2em 3.5em 1.2em 1.5em;		padding: 1.2em 3.5em 1.2em 1.5em;
	~~background: #57000d;~~
	color: #fff;		color: #fff;
	cursor: pointer;		cursor: pointer;
	transition: ~~background~~ 0.3s ease;		transition: filter 0.3s ease;
	}		}
	.fold__bar:hover {		.fold__bar:hover {
	~~background~~: ~~#6b0011~~;		filter: brightness(1.15);
	}		}

2026年10月6日 (二) 05:36 Ancimen

2026-10-06T05:36:51Z

@@ 第1行： / 第1行： @@
 /* ============================================
     收缩大标题
-    底部栏点击展开上方内容面板
+    标题栏固定，面板向下展开
     ============================================ */
@@ 第8行： / 第8行： @@
      position: relative;
      margin: 1em 0;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
-/* ---- 内容面板：默认折叠 ---- */
+/* ---- 标题栏（可点击） ---- */
 .fold__bar {
      display: block;
@@ 第112行： / 第92行： @@
 .fold.is-open .fold__icon {
      transform: translateY(-50%) rotate(45deg);
+}

2026年10月6日 (二) 05:30 Ancimen

2026-10-06T05:30:02Z

@@ 第1行： / 第1行： @@
 /* ============================================
     收缩大标题
-    JS 绑定点击切换 .is-open 类
+    底部栏点击展开上方内容面板
     ============================================ */
@@ 第14行： / 第14行： @@
+}
-/* ---- 头部（可点击） ---- */
+/* ---- 内容面板：默认折叠 ---- */
-.fold__main {
+.fold__panel {
      display: block;
      position: relative;
@@ 第24行： / 第45行： @@
      transition: background 0.3s ease;
+}
-.fold__main:hover {
+.fold__bar:hover {
      background: #6b0011;
+}
@@ 第72行： / 第93行： @@
+}
-/* ---- 折叠按钮 ---- */
+/* ---- 展开符号 ---- */
-.fold__button {
+.fold__icon {
      display: block;
      position: absolute;
@@ 第81行： / 第102行： @@
      width: 1.5em;
      height: 1.5em;
      z-index: 2;
+}
-.fold__button::before,
+.fold.is-open .fold__icon {
-.fold__button::after {
+     transform: translateY(-50%) rotate(45deg);
+}

2026年10月6日 (二) 05:23 Ancimen

2026-10-06T05:23:23Z

←上一版本		2026年10月6日 (二) 13:23的版本
第1行：		第1行：
	/* ============================================		/* ============================================
	收缩大标题		收缩大标题
	~~checkbox hack 实现零~~ JS 折叠		JS 绑定点击切换 .is-open 类
	============================================ */		============================================ */

第14行：		第14行：
	}		}

	/* ---- ~~隐藏的 checkbox ---- */~~		/* ---- 头部（可点击） ---- */
	~~.fold__toggle {~~
	~~display: none;~~
	}

	~~/* ---- 头部~~ ---- */
	.fold__main {		.fold__main {
	display: block;		display: block;
第107行：		第102行：
	transform: translate(-50%, -50%);		transform: translate(-50%, -50%);
	}		}
	.~~fold__toggle:checked ~~~ .~~fold__main~~ .fold__button::after {		.fold.is-open .fold__button::after {
	transform: translate(-50%, -50%) rotate(90deg);		transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;		opacity: 0;
第118行：		第113行：
	transition: grid-template-rows 0.4s ease;		transition: grid-template-rows 0.4s ease;
	}		}
	.~~fold__toggle:checked ~~~ .fold__content {		.fold.is-open .fold__content {
	grid-template-rows: 1fr;		grid-template-rows: 1fr;
	}		}
第129行：		第124行：
	transition: padding 0.4s ease;		transition: padding 0.4s ease;
	}		}
	.~~fold__toggle:checked ~~~ .~~fold__content~~ .fold__content-inner {		.fold.is-open .fold__content-inner {
	padding: 1em 1.5em;		padding: 1em 1.5em;
	}		}

2026年10月6日 (二) 05:20 Ancimen

2026-10-06T05:20:09Z

←上一版本		2026年10月6日 (二) 13:20的版本
第1行：		第1行：
	/* ============================================		/* ============================================
	收缩大标题		收缩大标题
	~~使用 <details> / <summary>~~ 实现零 JS 折叠		checkbox hack 实现零 JS 折叠
	~~所有内部元素用 span + display 控制~~
	============================================ */		============================================ */

第13行：		第12行：
	background: #fff;		background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			/* ---- 隐藏的 checkbox ---- */
			.fold__toggle {
			display: none;
	}		}

第23行：		第27行：
	color: #fff;		color: #fff;
	cursor: pointer;		cursor: pointer;
	~~list-style: none;~~
	transition: background 0.3s ease;		transition: background 0.3s ease;
	}
	~~.fold__main::marker {~~
	~~content: "";~~
	}		}
	.fold__main:hover {		.fold__main:hover {
第107行：		第107行：
	transform: translate(-50%, -50%);		transform: translate(-50%, -50%);
	}		}
	.~~fold[open]~~ .fold__button::after {		.fold__toggle:checked ~ .fold__main .fold__button::after {
	transform: translate(-50%, -50%) rotate(90deg);		transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;		opacity: 0;
第118行：		第118行：
	transition: grid-template-rows 0.4s ease;		transition: grid-template-rows 0.4s ease;
	}		}
	.~~fold[open]~~ .fold__content {		.fold__toggle:checked ~ .fold__content {
	grid-template-rows: 1fr;		grid-template-rows: 1fr;
	}		}
第129行：		第129行：
	transition: padding 0.4s ease;		transition: padding 0.4s ease;
	}		}
	.~~fold[open]~~ .fold__content-inner {		.fold__toggle:checked ~ .fold__content .fold__content-inner {
	padding: 1em 1.5em;		padding: 1em 1.5em;
	}		}

2026年10月6日 (二) 05:16 Ancimen

2026-10-06T05:16:50Z

←上一版本		2026年10月6日 (二) 13:16的版本
第2行：		第2行：
	收缩大标题		收缩大标题
	使用 <details> / <summary> 实现零 JS 折叠		使用 <details> / <summary> 实现零 JS 折叠
			所有内部元素用 span + display 控制
	============================================ */		============================================ */

	.fold {		.fold {
			display: block;
	position: relative;		position: relative;
	margin: 1em 0;		margin: 1em 0;
第33行：		第35行：
	/* ---- 背景水印 ---- */		/* ---- 背景水印 ---- */
	.fold__watermark {		.fold__watermark {
			display: block;
	position: absolute;		position: absolute;
	left: 0;		left: 0;
第56行：		第59行：
	}		}
	.fold__title-cn {		.fold__title-cn {
			display: block;
	font-size: 2.5em;		font-size: 2.5em;
	font-weight: 900;		font-weight: 900;
第61行：		第65行：
	}		}
	.fold__title-en {		.fold__title-en {
			display: block;
	font-size: 1em;		font-size: 1em;
	font-weight: bold;		font-weight: bold;
第66行：		第71行：
	}		}
	.fold__title-deco {		.fold__title-deco {
			display: block;
	font-size: 0.8em;		font-size: 0.8em;
	font-weight: bold;		font-weight: bold;
第73行：		第79行：
	/* ---- 折叠按钮 ---- */		/* ---- 折叠按钮 ---- */
	.fold__button {		.fold__button {
			display: block;
	position: absolute;		position: absolute;
	right: 1.2em;		right: 1.2em;
第115行：		第122行：
	}		}
	.fold__content-inner {		.fold__content-inner {
			display: block;
	overflow: hidden;		overflow: hidden;
	padding: 0 1.5em;		padding: 0 1.5em;

Ancimen：创建页面，内容为“/* ============================================ 收缩大标题使用
/
实现零 JS 折叠 ============================================ / .fold { position: relative; margin: 1em 0; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } / ---- 头部 ---- */ .fold__main { display: block; position: relative; padding: 1.2em 3.5em 1.2em 1.5em; bac…”

2026-10-06T05:14:50Z

创建页面，内容为“============================================ 收缩大标题使用 <details> / <summary> 实现零 JS 折叠 ============================================： .fold { position: relative; margin: 1em 0; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } ---- 头部 ----： .fold__main { display: block; position: relative; padding: 1.2em 3.5em 1.2em 1.5em; bac…”

新页面

/* ============================================
收缩大标题
使用 <details> / <summary> 实现零 JS 折叠
============================================ */

.fold {
position: relative;
margin: 1em 0;
border-radius: 6px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ---- 头部 ---- */
.fold__main {
display: block;
position: relative;
padding: 1.2em 3.5em 1.2em 1.5em;
background: #57000d;
color: #fff;
cursor: pointer;
list-style: none;
transition: background 0.3s ease;
}
.fold__main::marker {
content: "";
}
.fold__main:hover {
background: #6b0011;
}

/* ---- 背景水印 ---- */
.fold__watermark {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 5em;
font-weight: 900;
line-height: 1;
opacity: 0.15;
pointer-events: none;
z-index: 0;
}

/* ---- 标题组 ---- */
.fold__titles {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
line-height: 1.2;
position: relative;
z-index: 1;
}
.fold__title-cn {
font-size: 2.5em;
font-weight: 900;
letter-spacing: 0.02em;
}
.fold__title-en {
font-size: 1em;
font-weight: bold;
letter-spacing: 0.35em;
}
.fold__title-deco {
font-size: 0.8em;
font-weight: bold;
letter-spacing: 0.25em;
}

/* ---- 折叠按钮 ---- */
.fold__button {
position: absolute;
right: 1.2em;
top: 50%;
transform: translateY(-50%);
width: 1.5em;
height: 1.5em;
z-index: 2;
}
.fold__button::before,
.fold__button::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
background: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.fold__button::before {
width: 1em;
height: 2px;
transform: translate(-50%, -50%);
}
.fold__button::after {
width: 2px;
height: 1em;
transform: translate(-50%, -50%);
}
.fold[open] .fold__button::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}

/* ---- 内容区 ---- */
.fold__content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease;
}
.fold[open] .fold__content {
grid-template-rows: 1fr;
}
.fold__content-inner {
overflow: hidden;
padding: 0 1.5em;
color: #333;
line-height: 1.6;
transition: padding 0.4s ease;
}
.fold[open] .fold__content-inner {
padding: 1em 1.5em;
}