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>
