手风琴折叠菜单
今天要解釋的界面如下所示
? ? ? ? ? ? ? ? ? ? ? ??
?
主要是手風琴折疊菜單的實現：使用了bootstrap框架實現。
對于bootstrap實現的樣式，我們可以更改css樣式來實現我們想要的界面。
完整實現代碼如下：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>頁面二</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style type="text/css">body, #accordion{padding: 0;margin: 0;}a{background:red url("../2.png") right center no-repeat;display: block;font-size: 20px;padding: 30px;text-decoration: none;}a:hover{background-color: gray;}.panel-heading{padding: 0;margin: 0;}</style> </head> <body><div class="panel-group" id="accordion"><div id="top" style="height:200px;background: yellow"></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapseOne">更多詳情</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes andersoncred nesciunt sapiente ea proident. Ad vegan excepteur butchervice lomo.</div></div></div><div class="panel panel-default" style="margin-top: 0px"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapseTwo">二維碼</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes andersoncred nesciunt sapiente ea proident. Ad vegan excepteur butchervice lomo.</div></div></div> </div></body> </html>?
轉載于:https://www.cnblogs.com/mengxiao/p/7275316.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： java String长度与varcha
- 下一篇： python 3 递归调用与二分法