直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
/*公用栏目标题*/
.lanmu{ width:100%; height:30px; border-bottom:1px solid #CCC; position:relative; z-index:1}
.lanmu p.lanmutitle{ display:inline-block; padding-right:20px; height:30px; border-bottom:1px solid #c00; position:absolute;z-index:2; font-size:1.3em; color:#666}
.lanmumenu{ background:#0e5ca9; color:#fff; height:70px; padding:5px 20px; z-index:9999}
.lanmumenu h2{ color:#fff; font-size:20px; display:inline-block}
.lanmumenu h5{ color:#fff;font-size:16px; display:inline-block; margin-left:10px;}
/*公用栏目列表*/
.lanmuul{ padding:0; margin:10px 0;margin-bottom:20px}
.lanmuul li{ list-style:none ; background:url(http://www.bootfastui.cn/img/2021/0427-3/lanmuulbg.png) no-repeat right 3px;; height:35px; line-height:35px ; border-bottom:1px solid #eee; padding-left:20px;}
.lanmuul li a{ color:#333}
.lanmuul li a:visited{ color:#333}
.lanmuul li a:hover{ color:#c00}
/*公用文章列表*/
.articleul{ padding:0; margin:10px 0;margin-bottom:20px}
.articleul li{ list-style:none ; background:url(http://www.bootfastui.cn/img/2021/0427-3/articleulbg.png) no-repeat 0 3px;; height:40px; line-height:40px ; padding-left:20px;}
.articleul li a .data{ display:inline-block; float:right;}
ul.slide li{ border-bottom:1px dashed #ccc;}
ul.slide li a{ color:#666}
ul.slide li a:visited{ color:#666}
ul.slide li a:hover{ color:#c00}
ul.dashed li{ border-bottom:1px dashed #eee;}
ul.dashed li a{ color:#333}
ul.dashed li a:visited{ color:#333}
ul.dashed li a:hover{ color:#c00}
.left-contact{ background:#F7F7F7; padding:10px;line-height: 25px;color:#666;}
/*产品列表*/
.imglist{margin-top:20px; text-align:center}
.imglist p{ line-height:30px;margin-bottom:20px; color:#333}
.imglist p:hover{ color:#c00}
</style>
HTML+JS代码
<section id="content">
<div class="container">
<div class="row">
<!--left-->
<div class="col-md-3 listleft ">
<div class="lanmumenu">
<h2>研发中心</h2>
<h5>R & D Center</h5>
</div>
<ul class="lanmuul">
<li><a href="http://www.bootfastui.cn">研发产品</a></li>
<li><a href="http://www.bootfastui.cn">研发技术</a></li>
<li><a href="http://www.bootfastui.cn">最新消息</a></li>
</ul>
<div class="visible-lg visible-md">
<div class="lanmu">
<p class="lanmutitle">行业标准</p>
</div>
<ul class="articleul slide">
<li class="sheng"><a href="http://www.bootfastui.cn">卵磷脂中磷脂含量的测定GB/T 35867-2018</a></li>
<li class="sheng"><a href="http://www.bootfastui.cn">大豆及制品中磷脂组分和含量的测定NY/T 2004-2011</a>
</li>
<li class="sheng"><a href="http://www.bootfastui.cn">进出口磷脂乙醚不容物检测方法 SN/T 0802.1-1999</a>
</li>
<li class="sheng"><a href="http://www.bootfastui.cn">出口食品中磷脂的测定 SN/T 3851-2014</a></li>
<li class="sheng"><a href="http://www.bootfastui.cn">进出口磷脂丙酮不容物检验方法SN/T 0802.2-1999</a>
</li>
<li class="sheng"><a href="http://www.bootfastui.cn">食品添加剂铵磷脂 GB/T 1886.83-2016</a></li>
</ul>
<div class="clear"></div>
<img src="http://www.bootfastui.cn/img/2021/0427-3/contact.png" width="100%" />
<div class="left-contact">
郑州福宏生物科技有限公司<br />
市场部： 0371--86112880 <br />
技术部： 0371--86112886<br />
传  真： 0371--86112882<br />
外贸部： 15136203167 <br />
内贸部： 13223022198<br />
油脂部： 19939930913<br />
地  址： 郑州市金水区中州大道656号<br />
邮  箱： zzfhbio@126.com<br />
网  址： http://www.zzfh.net
</div>
<div><br></div>
</div>
</div>
<!--left end-->
<div class="col-md-9 listright">
<div class="lanmu">
<p class="lanmutitle">研发中心</p>
</div>
<ul class="articleul dashed">
<li><a href="http://www.bootfastui.cn"><span class="data sheng visible-md visible-lg visible-sm">2021-03-11
09:09</span>国家粮油信息中心：豆油库存下降，价格波动加剧</a>
</li>
<li><a href="http://www.bootfastui.cn"><span class="data sheng visible-md visible-lg visible-sm">2020-09-07
16:34</span>大豆磷脂作为药用辅料的作用</a></li>
<li><a href="http://www.bootfastui.cn"><span class="data sheng visible-md visible-lg visible-sm">2019-07-17
16:04</span>卵磷脂的神奇食效</a></li>
<li><a href="http://www.bootfastui.cn"><span class="data sheng visible-md visible-lg visible-sm">2019-06-24
10:54</span>磷脂的功效</a></li>
<li><a href="http://www.bootfastui.cn"><span class="data sheng visible-md visible-lg visible-sm">2019-05-27
09:24</span>国内豆油行情为何连续大跌？后市何去何从？</a></li>
</ul>
<div class="lanmu">
<p class="lanmutitle">产品中心</p>
</div>
<div class="row imglist">
<div class="col-md-3">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0427-3/product.png" class="img-responsive img-thumbnail" style="height:180px;" />
<p style="height:40px;">邦吉大豆透明磷脂</p>
</a>
</div>
<div class="col-md-3">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0427-3/product.png" class="img-responsive img-thumbnail" style="height:180px;" />
<p style="height:40px;">邦吉标准大豆磷脂</p>
</a>
</div>
<div class="col-md-3">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0427-3/product.png" class="img-responsive img-thumbnail" style="height:180px;" />
<p style="height:40px;">定制磷脂</p>
</a>
</div>
<div class="col-md-3">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0427-3/product.png" class="img-responsive img-thumbnail" style="height:180px;" />
<p style="height:40px;">食品用颗粒磷脂（FHK）</p>
</a>
</div>
<div class="col-md-3">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0427-3/product.png" class="img-responsive img-thumbnail" style="height:180px;" />
<p style="height:40px;">食品用葵花磷脂(FHSC)</p>
</a>
</div>
<div class="col-md-3">
<a href="http://www.bootfastui.cn">
<img src="http://www.bootfastui.cn/img/2021/0427-3/product.png" class="img-responsive img-thumbnail" style="height:180px;" />
<p style="height:40px;">非转基因大豆磷脂(液体型)（FHN-CP）</p>
</a>
</div>
</div>
</div>
<!--right end-->
<!--left-->
<div class="col-md-3 listleft visible-xs">
<div class="lanmu">
<p class="lanmutitle">行业标准</p>
</div>
<ul class="articleul slide">
<li class="sheng"><a href="http://www.bootfastui.cn">卵磷脂中磷脂含量的测定GB/T 35867-2018</a></li>
<li class="sheng"><a href="http://www.bootfastui.cn">大豆及制品中磷脂组分和含量的测定NY/T 2004-2011</a>
</li>
<li class="sheng"><a href="http://www.bootfastui.cn">进出口磷脂乙醚不容物检测方法 SN/T 0802.1-1999</a>
</li>
<li class="sheng"><a href="http://www.bootfastui.cn">出口食品中磷脂的测定 SN/T 3851-2014</a></li>
<li class="sheng"><a href="http://www.bootfastui.cn">进出口磷脂丙酮不容物检验方法SN/T 0802.2-1999</a>
</li>
<li class="sheng"><a href="http://www.bootfastui.cn">食品添加剂铵磷脂 GB/T 1886.83-2016</a></li>
</ul>
<div class="clear"></div>
<img src="/Public/images/contact.png" width="100%" />
<div class="contact">
郑州福宏生物科技有限公司<br />
市场部： 0371--86112880 <br />
技术部： 0371--86112886<br />
传  真： 0371--86112882<br />
外贸部： 15136203167 <br />
内贸部： 13223022198<br />
油脂部： 19939930913<br />
地  址： 郑州市金水区中州大道656号<br />
邮  箱： zzfhbio@126.com<br />
网  址： http://www.zzfh.net
</div>
<div><br></div>
</div>
<!--left end-->
</div>
<!--row end-->
</div>
</section>
