代码片段 1
- <!DOCTYPE html>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title > 垂直手风琴</title>
- <style type="text/CSS">
- .accordionMenu {
- background: #fff;
- color:#424242;
- font: 12px Arial, Verdana, sans-serif;
- margin:0 auto;
- padding: 10px;
- width: 500px;
- }
- .accordionMenu h2 {
- margin:5px 0;
- padding:0;
- position: relative;
- }
- .accordionMenu h2:before {
- border: 5px solid #fff;
- border-color: #fff transparent transparent;
- content:"";
- height: 0;
- position:absolute;
- right: 10px;
- top: 15px;
- width: 0;
- }
- .accordionMenu h2 a {
- background: #8f8f8f;
- background: -moz-linear-gradient( top, #cecece, #8f8f8f);
- background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
- background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
- background: -o-linear-gradient( top, #cecece, #8f8f8f);
- background: linear-gradient( top, #cecece, #8f8f8f);
- border-radius: 5px;
- color:#424242;
- display: block;
- font-size: 13px;
- font-weight: normal;
- margin:0;
- padding:10px 10px;
- text-shadow: 2px 2px 2px #aeaeae;
- text-decoration:none;
- }
- .accordionMenu :target h2 a,
- .accordionMenu h2 a:focus,
- .accordionMenu h2 a:hover,
- .accordionMenu h2 a:active {
- background: #2288dd;
- background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
- background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
- background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
- background: -o-linear-gradient( top, #6bb2ff, #2288dd);
- background: linear-gradient( top, #6bb2ff, #2288dd);
- color:#FFF;
- }
- .accordionMenu p {
- margin:0;
- height: 0;
- overflow: hidden;
- padding:0 10px;
- -moz-transition: height 0.5s ease-in;
- -webkit-transition: height 0.5s ease-in;
- -o-transition: height 0.5s ease-in;
- transition: height 0.5s ease-in;
- }
- .accordionMenu :target p {
- height:100px;
- overflow: auto;
- }
- .accordionMenu :target h2:before {
- border-color: transparent transparent transparent #fff;
- }
- </style>
- </head>
- <body>
- <div class="accordionMenu">
- <div class="menuSection" id="brand">
- <h2><a href="#brand">Brand</a></h2>
- <p > 导致大家认为 "质检总局买的是山寨货, 假货" 这个结论的因素, 应该是小米声明中的这一句: 此次 "电源容量虚标" 事件, 再次让小米和喜爱小米的用户, 甚至国家质量监督检测机构和媒体, 都成为了山寨产品的受害者.
但回过头来看看此回应关于小米与质检总局的沟通内容: 小米公司在央视报道之前即与国家质检总局相关人员取得联系, 发现其抽样调查的小米移动电源是通过非小米官方及授权渠道购买. 该相关人员也明确告知: 此次移动电源调查属于风险监控性质, 检测产品均为市场上随机抽样购买, 并不对真假负责.</p>
- </div>
- <div class="menuSection" id="promotion">
- <h2><a href="#promotion">Promotion</a></h2>
<p>5200mAh 是该移动电源的电芯额定容量, 这个数值必须是在额定电压 (3.6V) 下的, 两者相乘就是额定能量(18.72Wh), 但这个不是直接给设备充电的电压: 例如, 如果是在电压 5.1V 下, 就应该另外计算(洒家粗略算了算, 是不是应该是 18.72/5.1=3670mAh 呢?)</p>
- </div>
- <div class="menuSection" id="event">
- <h2><a href="#event">Event</a></h2>
<p > 目前国家移动电源检测标准缺失, 导致劣货, 假货横行. 事实上, 小米一直严格按照电芯实际容量标注, 且通过了国际权威机构 SGS 的严格检测. 小米愿意和国家质量监督检测机构, 同行企业一起, 推进移动电源国家标准的制订, 共同促进行业健康, 繁荣发展, 给消费者提供更多优质的移动电源产品.</p>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/note/14487/c6f9360ed26601a499f851d83104f6b4.html