1 <html lang="en">
2
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>垂直手风琴</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 }
13
14 .listbox {
15 width: 500px;
16 height: 400px;
17 margin: 50px auto;
18 }
19
20 .list {
21 position: relative;
22 }
23
24 .list a {
25 display: block;
26 height: 35px;
27 background: linear-gradient(#eeeeee, #8f8f8f);
28 text-decoration: none;
29 padding-left: 12px;
30 border-radius: 5px;
31 text-decoration: none;
32 color: #424242;
33 line-height: 35px;
34 }
35
36 .list p {
37 /* 超出区域出现滚动条 */
38 overflow: auto;
39 height: 0px;
40 padding-left: 10px;
41 margin: 5px auto;
42 transition: 0.7s linear;
43 }
44
45 .list span {
46 width: 0;
47 height: 0;
48 /* border-left: 5px solid transparent 代表透明 */
49 border-left: 5px solid rgba(0, 0, 0, 0);
50 border-right: 5px solid rgba(0, 0, 0, 0);
51 border-top: 5px solid white;
52 border-bottom: 5px solid rgba(0, 0, 0, 0);
53 position: absolute;
54 top: 15px;
55 right: 15px;
56 }
57
58 .list:target p {
59 height: 100px;
60 }
61
62 .list a:hover,
63 .list:target a {
64 background: linear-gradient(#6bb2ff, #2288dd);
65 color: white;
66 }
67
68 .list:target span {
69 /* transform: rotate(-90deg); */
70 border-top: 5px solid transparent;
71 border-left: 5px solid #fff;
72 right: 10px;
73 }
74 /*
75 锚点 :css 实现点击效果变样式,就用锚点 ,单页面进行跳转的时候
76 2.定位
77 3.边框写三角形
78 4.当前活动窗口的控制 :target
79 */
80 </style>
81 </head>
82
83 <body>
84 <div class="listbox">
85 <div class="list" id="listOne">
86 <a href="#listOne">小狗</a>
87 <!-- 边框三角形 -->
88 <span></span>
89 <p>壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上， 徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。 于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕， 如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。 苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，
90 东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江
91 </p>
92
93 </div>
94 <div class="list" id="listTwo">
95 <a href="#listTwo">小狗</a>
96 <!-- 边框三角形 -->
97 <span></span>
98 <p>壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上， 徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。 于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕， 如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。 苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，
99 东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江
100 </p>
101
102 </div>
103 <div class="list" id="listThree">
104 <a href="#listThree">小狗</a>
105 <!-- 边框三角形 -->
106 <span></span>
107 <p>壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上， 徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。 于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕， 如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。 苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，
108 东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江
109 </p>
110
111 </div>
112
113 </div>
114 </body>
115
116 </html>
来源：https://www.cnblogs.com/yuanxiangguang/p/11211230.html