在设计用户友好且内容丰富的网站时，经常询问的问题（FAQ）部分在提供常见查询的答案中起着至关重要的作用。使用HTML的<details>标签和一些CSS，您可以创建交互式和可折叠的常见问题解答部分，从而增强用户体验。在本指南中，我们将带您完成构建干净和功能的常见问题解答部分的过程。
html <details>标签：基础
HTML <details>元素用于创建一个可以打开和关闭的披露小部件。每个<details>元素通常包含一个<summary>元素，该元素是该部分的可见标题。
这是常见问题项目的基本结构：
<details>
<summary>Question goes here?</summary>
<p>Answer goes here.</p>
</details>
构建常见问题部分
让我们创建一个简单的常见问题解答，并有一些问题和答案。这是一个例子：
<div class="faq-section">
<details>
<summary>How do I create an account?</summary>
<p>Creating an account is easy. Click on the "Sign Up" button, fill in the required information, and you're all set!</p>
</details>
<details>
<summary>Can I reset my password?</summary>
<p>Yes, you can reset your password by clicking on the "Forgot Password" link on the login page. Follow the instructions sent to your email.</p>
</details>
<!-- Add more FAQ items here -->
</div>
与CSS的样式
要使您的常见问题解答具有视觉吸引力且用户友好，您可以应用一些CSS样式。这是如何设计FAQ部分的一个示例：
html {
font-family: system-ui;
}
/* Style the summary element */
details summary {
cursor: pointer;
font-weight: bold;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 10px 0;
list-style: none;
position: relative;
}
/* Style the content inside the details element */
details summary::after {
content: '+';
font-weight: 700;
display: inline-block;
position: absolute;
right: 10px;
margin-top: -7.5px;
font-size: 1.5rem;
}
details[open] summary::after {
rotate: 45deg;
right: 7.5px;
}
/* Show the content when the details is open */
在此CSS代码中：
- 我们样式的
<summary>元素可以给它一个按钮般的外观。 - 我们在摘要之前使用
list-style删除默认箭头6 - 我们制作了一个加号（+），使其与默认值不同
- 并在打开细节时使其旋转。
结论
使用HTML <details>标签和一些CSS样式，您可以轻松地为您的网站创建交互式和视觉上吸引人的常见问题解答部分。用户可以单击问题以揭示答案，使内容井井有条和可访问。随意自定义样式并添加更多问题和答案以满足您的特定需求。