html中制作精美的展示列表(基于bootstrap,内含代码链接)
在网站建设中,往往需要以列表的形式展示一些招聘信息。尽管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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.****.net/download/qianbin3200896/11048761