不用JS，教你只用纯HTML做出几个实用网页效果

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://blog.bitsrc.io/pure-html-widgets-for-your-web-application-c9015563af7a

在我们以往看到的页面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我将介绍如何使用纯HTML打造属于自己的实用效果。

1. 折叠手风琴

使用标签可以创建没有JavaScript代码的可折叠手风琴。

效果：

 

HTML

<details> <summary>Languages Used</summary> <p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p> </details> <details> <summary>How it Works</summary> <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p> </details>