将网页以页面仅html,不用JS，教你只用纯HTML做出几个实用网页效果

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

1.折叠手风琴

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

效果：

HTML

Languages Used

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

How it Works

Using the sibling and checked selectors, we can determine the styling of sibling

elements based on the checked state of the checkbox input element.

CSS* {

font-size: 1rem;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

}

details {

border: 1px solid #aaa;

border-radius: 4px;

padding: .5em .5em 0;

}

summary {

font-weight: bold;

margin: -.5em -.5em 0;

padding: .5em;

}

details[open] {

padding: .5em;

}

details[open] summary {

border-bottom: 1px solid