HTML和CSS做一个无脚本的手风琴页面（保姆级）

一、前言

使用HTML和CSS做一个无脚本的手风琴页面。让知识以自己喜欢的方式进入脑子，适用于很多场景，比如以下：
【注：图片源自百度】
在这里插入图片描述

手风琴页面

二、HTML框架

使用外部样式表，将CSS文件用link标签引入

整体框架如下图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My_First</title><!-- 将css引入 --><link rel="stylesheet" href="./style.css"></head>
<body><section class="container"><div class="category_container"><div class="content"><img src="./painter.jpg" alt="painter" class="professio_image"><img src="./painter2.jpg" alt="painter2" class="profile_image"><div class="profile_detail"><span>Painter Qi Yu</span><p>"Lemuria's greatest painter"</p></div><div class="wrapper"><div class="profile_quote"><p>"Put the love I feel on paper, trace my bodyguard lady, you are my Muse goddess."</p></div></div></div><div class="content"><img src="./photographer.jpg" alt="photographer" class="professio_image"><img src="./photographer2.jpg" alt="photographer2" class="profile_image"><div class="profile_detail"><span>Photographer Qi Yu</span><p>The bodyguard lady's own photographer</p></div><div class="wrapper"><div class="profile_quote"><p>"You promise me: I will never let Qi Yu wait for me again."</p></div></div></div><div class="content"><img src="./sculptor.jpg" alt="sculptor" class="professio_image"><img src="./scluptor2.jpg" alt="scluptor2" class="profile_image"><div class="profile_detail"><span>Sculptor Qi Yu</span><p>For you to trace, shine</p></div><div class="wrapper"><div class="profile_quote"><p>"You are the bride of the only sea god in Lemuria, and I will paint your face."</p></div></div></div></div></section>
</body>
</html>

三、CSS装饰

1.全局设置

在谷歌字体库中导入合适的字体

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

谷歌字体库

使用通配符选择器，将所有元素的内边距和外边距重置为0；

指定body部分使用导入的Inter字体；

使用CSS变量定义两个颜色变量，浅色和深色

/*通配符选择器，查找页面所有标签设置相同样式*/
* {padding: 0;margin: 0;box-sizing: border-box;
}/*指定body部分使用导入的Inter字体，备用字体sans-serif*/
body {font-family: "Inter", sans-serif;
}/*使用CSS变量定义两个颜色变量，浅色和深色*/
:root {--light: #ffe6e6;--dark: #0c0c0c;
}

【补充：选择器】

标签选择器：使用标签名作为选择器，选中同名标签设置相同的样式
类选择器：查找标签，差异化设置标签的显示效果，一个类选择器可以定义多个标签，一个标签允许加多个class属性
id选择器：查找标签，差异化设置标签的显示效果，一般与JS配合使用，很少使用CSS样式
通配符选择器：查找页面所有标签，设置相同样式，注意不需要调用，浏览器自动查找页面所有标签，设置相同的格式。

使用场景：在制作网页的初期，清楚标签默认样式，便于后续个性化设置。

2.盒子设置

/* 定义container类选择器 */
.container {/* 一个径向渐变背景*/--bg-color: radial-gradient(circle at 50% 0%,rgba(50, 50, 50, 1) 0%,rgba(12, 12, 12, 1) 100%);/* 限制子元素溢出部分*/overflow: clip;position: relative;/*一个弹性盒子模型布局，子元素会居中对齐*/display: flex;justify-content: center;align-items: center;padding: 2rem 5rem;width: 100%;/* 容器的高度是设备屏幕视口的100%高度*/height: 100dvh;background-image: var(--bg-color);
}/*  定义category_container类选择器*/
.category_container {--gap: 0.5rem;display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;/*  定义了子元素之间的间距*/gap: calc(var(--gap) * 2);width: 100%;height: 100%;
}/* 定义content类选择器*/
.content {/* 定义初始状态为非活动的变量*/--active: 0;cursor: pointer;overflow: clip;position: relative;z-index: 10;display: flex;/*  子元素垂直排列 */flex-direction: column;justify-content: flex-end;gap: 1.5rem;padding: 2.5rem;/* 宽度为容器的三分之一，设置动画效果，宽度在鼠标悬停时会变化*/width: calc((100% / 3) - var(--gap));height: 100%;border-radius: 1rem;transition: width 0.5s ease-in-out;
}/* 当鼠标悬停在.content元素上，--active变为1，content元素的宽度扩大到容器的70% */
.content:hover {--active: 1;width: calc(70% - var(--gap));
}/* content伪类选择器，用之前定义的深色覆盖整个.content区域，并设置为半透明 */
.content::before {content: "";position: absolute;z-index: -10;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--dark);opacity: 0.6;
}

3.图片设置

/* 设置背景图片，覆盖整个容器，图片根据容器尺寸裁剪，居中显示 */
.content img {position: absolute;z-index: -20;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;-o-object-position: center;object-position: center;
}/* profile_image的透明度随着--active状态变化，鼠标悬停时图片逐渐变成透明度为0*/
.content .profile_image {opacity: calc(1 - var(--active));transition: opacity 0.3s ease-in-out;
}

4.段内设置

/* 包含span、p标签，设置个人信息，垂直排列，子元素之间的间距，并有动画效果*/
.profile_detail {display: flex;flex-direction: column;gap: 0.5rem;width: 12rem;transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}.profile_detail span {font-size: 1.5rem;font-weight: 600;color: var(--light);text-wrap: nowrap;
}.profile_detail p {font-size: 0.75rem;font-weight: 500;color: var(--light);
}/* 个人引用处的文本块，鼠标悬停时会向上移动并显示 */
.profile_quote {width: 22rem;transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
}.profile_quote p {font-size: 1.5rem;font-weight: 600;color: var(--light);transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.1s;
}/* 通过grid布局，默认grid-template-rows为0，隐藏内容，当鼠标悬停时，展开并显示内容 */
.wrapper {display: grid;grid-template-rows: 0fr;overflow: hidden;transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s, -ms-grid-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}.profile_quote {min-height: 0;transform: translateY(50%);opacity: 0;transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}.content:hover .wrapper {grid-template-rows: 1fr;
}.content:hover .profile_quote {transform: none;opacity: 1;
}/* 作为弹窗显示，背景透明，文字颜色为白色，没有边框*/
dialog {position: absolute;z-index: 1;background: none;color: white;border: 0;font-size: 0.8rem;padding: 0.5em;
}dialog a {color: whitesmoke;
}