直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
/* 上部栏目文字*/
.com-topArctype{padding:20px; background:url(http://www.bootfastui.cn/img/2021/0509-5/bg_lanmu.jpg) no-repeat right bottom; padding-bottom:40px;}
.com-topArctype h5{ height:40px; line-height:40px; padding-left:15px; border-left:6px solid #337ab7; font-size:25px; color:#337ab7}
.com-topArctype h5 span{ display:block; line-height:40px; color: #aaa;font-size:20px; }
/*人才招聘*/
#list-article .main{ background:#f9f9f9; min-height:700px;}
.zhaopin{ padding:10px 00px;}
.zhaopin a{ color:#333}
.zhaopin .kuai-line{ line-height:35px; background:#fff; padding:0 20px; border-radius:5px; margin:15px 0; cursor:pointer}
.zhaopin .current{ background:#337ab7; color:#fff}
.zhaopin .son:hover{ background:#e2f0bf;}
.zhaopin .son .date{ background:url(http://www.bootfastui.cn/img/2021/0509-5/zhaopin3.jpg) no-repeat right center}
.zhaopin .son:hover .date{ background:url(http://www.bootfastui.cn/img/2021/0509-5/zhaopin2.jpg) right center no-repeat}
.zhaopin-content{ display:none; padding:0 20px;color:#666; line-height:25px}
.zhaopin-info{ padding:20px 10px;}
.more-btn{display:inline-block;padding:6px 15px;background:#337ab7;color:#fff;border-radius:3px;}
.more-btn:hover{background:#3d7aad;color:#fff;}
</style>
HTML+JS代码
<section class="container">
<div class="f16 line60">
<span class="glyphicon glyphicon-home"></span> <a href="/">首页</a> > 人才招聘
</div>
<div id="list-article" class="row">
<div class="col-md-9">
<div class="main">
<!-- <img src="http://www.bootfastui.cn/img/news1.jpg" width="100%"/>-->
<div class="com-topArctype">
<h5>人才招聘</h5>
</div>
<br>
<div class="zhaopin mar-x10 ">
<div class="kuai-line current">
<div class="col-md-7 col-xs-4">职位名称</div>
<div class="col-md-2 col-xs-4">招聘人数</div>
<div class="col-md-3 col-xs-4">更新时间</div>
<div class="clear"></div>
</div>
<!-- item start -->
<div class="my-item">
<div class="kuai-line son">
<div class="col-md-7 col-xs-5">土地拓展专员</div>
<div class="col-md-2 col-xs-2">1</div>
<div class="col-md-3 date col-xs-5">2019-07-17</div>
<div class="clear"></div>
</div>
<div class="zhaopin-content">
岗位职责：1、负责搜集和整理土地信息、筛选出意向地块；<br/>
2、负责对意向地块的现场踏勘及周边市场调研<br/>
3、负责完成意向地块的项目简报、物业排布方案、投资决策报告编制<br/>
4、收集城市规划资料、观察房地产市场动态为可行性研究和公司决策提供各种城市规划、市场、经济指标，并进行整理形成PPT。<br/>
任职资格： 1、熟悉房地产开发相关的法律、法规、政策及工作环节、流程。<br/>
2、有较强的市场数据收集、整理、分析能力<br/>
3、具有较好的报告、公文写作能力，熟练操作PPT.<br/>
</div>
</div>
<!-- item end -->
<!-- item start -->
<div class="my-item">
<div class="kuai-line son">
<div class="col-md-7 col-xs-5">融资经理</div>
<div class="col-md-2 col-xs-2">6</div>
<div class="col-md-3 date col-xs-5">2019-07-17</div>
<div class="clear"></div>
</div>
<div class="zhaopin-content">
岗位职责：1、负责搜集和整理土地信息、筛选出意向地块；<br/>
2、负责对意向地块的现场踏勘及周边市场调研<br/>
3、负责完成意向地块的项目简报、物业排布方案、投资决策报告编制<br/>
4、收集城市规划资料、观察房地产市场动态为可行性研究和公司决策提供各种城市规划、市场、经济指标，并进行整理形成PPT。<br/>
任职资格： 1、熟悉房地产开发相关的法律、法规、政策及工作环节、流程。<br/>
2、有较强的市场数据收集、整理、分析能力<br/>
3、具有较好的报告、公文写作能力，熟练操作PPT.<br/>
</div>
</div>
<!-- item end -->
</div>
</div>
<script type="text/javascript">
$('.my-item').click(function () {
$(this).siblings().children('.zhaopin-content').hide();
$(this).children('.zhaopin-content').slideToggle();
})
</script>
<div class="clear"></div>
</div>
<!-- 公用右侧 -->
<div class="col-md-3">
<div class="row">
<div class="thumbnail">
<img src="http://www.bootfastui.cn/img/2021/0509-5/about.jpg" alt="..." class="img-responsive">
<div class="caption">
<h3>湖溪苑项目工程</h3>
<p>湖溪苑项目位于郑州市中原区苑南路北，湖东路东，占地面积6160.24平方米。该项目包括1#楼、2#楼及地下车库，总建筑规模26923.24平方米...</p>
<a href="/article/51" class="more-btn">了解更多</a>
</div>
</div>
</div>
<div class="row">
<div class="list-group">
<a href="#" class="list-group-item active">
通知公告
</a>
<a href="" class="list-group-item sheng">在售项目</a>
<a href="" class="list-group-item sheng">房屋预售</a>
<a href="" class="list-group-item sheng">涨幅全面回落 三季度房市预期“降温”</a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</section>
