html中制作精美的展示列表（基于bootstrap，内含代码链接）
在网站建设中，往往需要以列表的形式展示一些招聘信息。尽管Bootstrap提供了不少扁平式的列表样式，但是在美观性上面还有待二次开发。下面讲解如何制作一款比较精美的展示列表，效果图如下：
下面进入具体的开发。
1. html编写
代码如下：
手风琴列表样式
岗位职责：
1、负责以机器/深度学习为基础的高级驾驶辅助系统物体检测算法，包括模型训练和优化；
2、负责计算机视觉、深度学习相关方向的技术难点攻关与前瞻研究，包括行人检测/识别、车辆检测/追踪、车道线检测等。
任职要求：
1、熟悉机器学习（Boosting等）和深度学习（CNN等），有caffe，tensorflow，mxnet等至少一个深度学习框架使用经验；
2、熟悉并实践过物体检测算法，如SSD、Fast-RCNN等，熟练掌握训练、评测、调参等过程；
3、 优秀的Python/C/C++编程能力，良好的Linux操作，掌握Git开发流程，了解Cmake、GCC等；
4、 硕士及以上学历；优秀的英语能力，熟练阅读英文文献；
5、有图像处理经验、CVPR等会议论文获奖者优先。
...
....
上述代码大部分直接来源于当前的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