zoukankan      html  css  js  c++  java
  • 手风琴折叠菜单

    今天要解释的界面如下所示

                            

    主要是手风琴折叠菜单的实现:使用了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 anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice 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 anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                </div>
            </div>
        </div>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    ORACLE小错误和小技巧
    linux下面ssh免密码登陆
    JAVA中值传递和引用传递,抽象类,接口的概念
    org.apache.catalina.LifecycleException tomcat 启动 maven 处处都是坑!!!
    springmvc登陆拦截案例
    eclipse tomcat add and remove工程异常
    spring 官方下载地址(Spring Framework 3.2.x&Spring Framework 4.0.x)
    SpringMvc JSON 406,吐血。。。。
    List
    集合Collection
  • 原文地址:https://www.cnblogs.com/mengxiao/p/7275316.html
Copyright © 2011-2022 走看看