html中制作精美的展示列表（基于bootstrap，内含代码链接）

最新推荐文章于 2024-08-16 14:10:43 发布

钱彬 (Qian Bin)

最新推荐文章于 2024-08-16 14:10:43 发布

阅读量5.2k

点赞数

分类专栏： Python Web企业门户网站开发实战(基于windows 文章标签： bootstrap 漂亮的展示列表

本文链接：https://blog.csdn.net/qianbin3200896/article/details/88732517

版权

Python Web企业门户网站开发实战(基于windows 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

在网站建设中，往往需要以列表的形式展示一些招聘信息。尽管Bootstrap提供了不少扁平式的列表样式，但是在美观性上面还有待二次开发。下面讲解如何制作一款比较精美的展示列表，效果图如下：

下面进入具体的开发。

1. html编写

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>手风琴列表样式</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    
    <link href="newlist.css" rel="stylesheet" type="text/css">

  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    1. 算法开发工程师
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                                <p>岗位职责：
                                    1、负责以机器/深度学习为基础的高级驾驶辅助系统物体检测算法，包括模型训练和优化；
                                    2、负责计算机视觉、深度学习相关方向的技术难点攻关与前瞻研究，包括行人检测/识别、车辆检测/追踪、车道线检测等。
                                    任职要求：
                                    1、熟悉机器学习（Boosting等）和深度学习（CNN等），有caffe，tensorflow，mxnet等至少一个深度学习框架使用经验；
                                    2、熟悉并实践过物体检测算法，如SSD、Fast-RCNN等，熟练掌握训练、评测、调参等过程；
                                    3、 优秀的Python/C/C++编程能力，良好的Linux操作，掌握Git开发流程，了解Cmake、GCC等；
                                    4、 硕士及以上学历；优秀的英语能力，熟练阅读英文文献；
                                    5、有图像处理经验、CVPR等会议论文获奖者优先。</p>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    2. 美工设计师
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                            <div class="panel-body">
                                <p>...</p>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingThree">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    3. 运维分析师
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                            <div class="panel-body">
                                <p>.... </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
  </body>
</html>

上述代码大部分直接来源于当前的bootstrap官方样例程序，头部通过在线引用资源文件的方式可以方便的集成和使用bootstrap的组件以及字体库。

2. 编写CSS样式文件

下面在同文件夹下添加对应的newlist.css文件，内容如下：

#accordion a:hover,a:focus{
    text-decoration: none;
    outline: none;
}
#accordion{
    padding-right: 24px;
    padding-left: 24px;
    z-index: 1;
}
#accordion .panel{
    border: none;
    box-shadow: none;
}
#accordion .panel-heading{
    padding: 0;
    border-radius: 0;
    border: none;
}
#accordion .panel-title{
    padding: 0;
}
#accordion .panel-title a{
    display: block;
    font-size: 16px;
    font-weight: bold;
    background: #e16b47;
    color: #f7c59f;
    padding: 15px 25px;
    position: relative;
    margin-left: -24px;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed{
    background: #f7c59f;
    color: #e16b47;
    margin-left: 0;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a:before{
    content: "";
    border-left: 24px solid #e16b47;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    position: absolute;
    top: 0;
    right: -24px;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed:before{
    border-left-color: #f7c59f;
}
#accordion .panel-title a:after{
    content: "\e133";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    top: 30%;
    right: 15px;
    font-size: 18px;
    color: #f7c59f;

}
#accordion .panel-title a.collapsed:after{
    content: "\e134";
    color: #e16b47;
}
#accordion .panel-collapse{
    position: relative;
}
#accordion .panel-collapse.in:before{
    content: "";
    border-right: 24px solid #f7c59f;
    border-bottom: 18px solid transparent;
    position: absolute;
    top: 0;
    left: -24px;
}
#accordion .panel-body{
    font-size: 14px;
    color: #333;
    background: #e4e4e4;
    border-top: none;
    z-index: 1;
}

通过上述步骤就可以开发出如图所示的展示列表。

代码下载链接： https://download.csdn.net/download/qianbin3200896/11048761