红色扁平风格的第三方检测机构整站网站源码下载



5 17 6



模板描述:红色扁平风格 第三方检测机构 整站网站,红色扁平风格的第三方检测机构整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>

3. HTML代码

<!--log-->
<div class="wrap top_inf ">
 <!--log-->
 <div class="log_left overflow fl pt20">
  <dl>
   <dt class="fl">
   <img src="images/index1_r1_c1.jpg">
   </dt>
   <dd class="fr pt20 tl f16 l-24 ml20">
   立足中原辐射全国的独立第三方<br>
检验、鉴定、测试的认证的高科技技术机构
   </dd>
  </dl>
 </div>
 <!--微博微信等-->
 <div class="wwq fr pt50 ">
  <UL>
   <li>
    <a href="#"><img src="images/index1_r2_c10.jpg"></a>
   </li>
   <li>
    <a href="#"><img src="images/index1_r3_c13.jpg"><span><img src="images/index1_r31_c12.jpg" width="112" height="112"></span></a>
   </li>
   <li>
   <a href="#"><img src="images/index1_r3_c15.jpg"></a>
   </li>
  </UL>
 </div>
</div>
<!--nav-->
<div class="wrap overflow clearfix nav_inf pt40">
 <dl>
  <dt>
   <p><a href="#" class="nav_bg">首页</a></p>
  </dt>
  <dd></dd>
  </dl>
  <dl>
  <dt>
   <p><a href="#">关于聚谷</a></p>
  </dt>
  <dd></dd>
  </dl>
  <dl>
  <dt>
   <p><a href="#">我们的服务</a></p>
  </dt>
  <dd></dd>
  </dl>
  <dl>
  <dt>
   <p><a href="#">信息资讯</a></p>
  </dt>
  <dd></dd>
  </dl>
  <dl>
  <dt>
   <p><a href="#">法规标准</a></p>
  </dt>
  <dd></dd>
  </dl>
  <dl>
  <dt>
   <p><a href="#">人才招聘</a></p>
  </dt>
  <dd></dd>
  </dl>
  <dl>
  <dt>
   <p><a href="#">联系我们</a></p>
  </dt>
  <dd></dd>
  </dl>
</div>
<div class="bg_body overflow clearfix">
<!--js-->
<div class="w100 clearfix overflow ">
<div class="flexslider" >
  <ul class="slides">
    <li style="background: url(images/index_r2_c1.jpg) 50% 0 no-repeat; z-index:1"></li>
    <li style="background:url(images/index_r2_c1.jpg) 50% 0 no-repeat; z-index:1"></li>
    <li style="background:url(images/index_r2_c1.jpg) 50% 0 no-repeat; z-index:1"></li>
  </ul>
</div>
<!-- 代码end --> 
<script src="js/jquery.flexslider-min.js"></script> 
<script>
$(function(){
	$('.flexslider').flexslider({
		directionNav: true,
		pauseOnAction: false
	});
});
</script> 
</div>
<!--服务项目简介等-->
<div class="wrap ser_about overflow clearfix ">
 <!--left-->
 <div class="w668 fl overflow">
  <div class="w100  overflow pt30">
   <h5 class="fl f30 pl40 l-30"><a href="#">我们的服务</a></h5>
   <p class="fr pr40 hui f18 l-30 pt5">OUR SERVISES</p>
  </div>
  <div class="w100  overflow clearfix ser_list mt20 ">
   <dl>
    <a href="#">
    <dt>
     <h5 class="f24 pl40 l-30 tl pt20">农产品</h5>
     <p></p>
    </dt>
    <dd>
     <p>
     聚谷检测作为一家新起之秀,不仅与各地质监部门和检验检疫部门进行技术合作为其提供技术支
,并且与这些部门开展深度合作,以达......
     </p>
     <span></span>
    </dd>
    </a>
   </dl>
   <dl>
    <a href="#">
    <dt>
     <h5 class="f24 pl40 l-30 tl pt20">预包装食品</h5>
     <p></p>
    </dt>
    <dd>
     <p>
     聚谷检测作为一家新起之秀,不仅与各地质监部门和检验检疫部门进行技术合作为其提供技术支
,并且与这些部门开展深度合作,以达......
     </p>
     <span></span>
    </dd>
    </a>
   </dl>
   <dl>
    <a href="#">
    <dt>
     <h5 class="f24 pl40 l-30 tl pt20">水、化妆品</h5>
     <p></p>
    </dt>
    <dd>
     <p>
     聚谷检测作为一家新起之秀,不仅与各地质监部门和检验检疫部门进行技术合作为其提供技术支
,并且与这些部门开展深度合作,以达......
     </p>
     <span></span>
    </dd>
    </a>
   </dl>
   <dl>
    <a href="#">
    <dt>
     <h5 class="f24 pl40 l-30 tl pt20">保健食品</h5>
     <p></p>
    </dt>
    <dd>
     <p>
     聚谷检测作为一家新起之秀,不仅与各地质监部门和检验检疫部门进行技术合作为其提供技术支
,并且与这些部门开展深度合作,以达......
     </p>
     <span></span>
    </dd>
    </a>
   </dl>
  </div>
 </div>
 <!--right-->
 <div class="w667 fr overflow">
  <div class="inde_about overflow">
   <h5>Jugu Detection</h5>
   <p>
   聚谷检测作为一家新起之秀,不仅与各地质监部门和检验检疫部门进行技术合作为其提供技术支持
,并且与这些部门开展深度合作,以达到优势互补、共同发展的目的。我们立足于客户和社会的期
望,为客户提供更专业科学的检验检测服务,帮助客户在日益规范的世界中生存成长。我们的独立
服务可为客户运营附加重要的价值,保证企业发展的可持
   </p>
   <span>
    <a href="#"><img src="images/index1_r10_c14.jpg"></a>
   </span>
   <div class="right_bt overflow clearfix">
    <a href="#">
     <p>About us</p>
     <span></span>
    </a>
   </div>
  </div>
  <div class="w100 overflow clearfix ">
   <img src="images/index1_r9_c4.jpg">
  </div>
  <div class="inde_about overflow">
   <h5 class="f35 l-35">News <em class="f18">公司新闻</em></h5>
   <div class="w100 pt40 overflow">
    <h2 class="tl l-26 f18"><a href="#">聚谷检测作为一家新起之秀,不仅与各地质监部门和检验检疫部</a></h2>
    <ol class="huise tl l-30">
     <img src="images/index_r1_c3.jpg" class="fl mr10 pt5"> 2017-09-20
    </ol>
    <p class="pt10">聚谷检测作为一家新起之秀,不仅与各地质监部门和作,以达......</p>
    <ul>
     <li>
      <a href="#">2017年度客户满意度调查幸运客户抽取结果公布</a>
     </li>
     <li>
      <a href="#">CTI报告编号编码规则变更通知</a>
     </li>
    </ul>
   </div>
   <div class="right_bt overflow clearfix mt25">
    <a href="#">
     <p>News</p>
     <span></span>
    </a>
   </div>
  </div>
 </div>
</div>
<!--核心服务-->
<div class="wrap overflow clearfix pt50">
 <h5 class="f30 l-30">
  <i class="blod">核心服务</i><br>
  <em class="f14 huise1">我们提供从原料到产品,从测试到研发的一站式分析检测服务</em>
 </h5>
</div>
<div class="hx wrap overflow clearfix pt50">
 <dl>
  <a href="#">
  <dt>
   <img src="images/tb_r4_c1.png">
  </dt>
  <dd>检验</dd>
  </a>
 </dl>
 <dl>
  <a href="#">
  <dt>
   <img src="images/tb_r3_c3.png">
  </dt>
  <dd>测试</dd>
  </a>
 </dl>
 <dl>
  <a href="#">
  <dt>
   <img src="images/tb_r1_c5.png">
  </dt>
  <dd>认证</dd>
  </a>
 </dl>
 <dl>
  <a href="#">
  <dt>
   <img src="images/tb_r2_c7.png">
  </dt>
  <dd>鉴定</dd>
  </a>
 </dl>
</div>
<!--预约-->
<div class="yuyue overflow clearfix mt30" id="us3">
 <div class="wrap overflow ">
  <h5 class="pt30">预约 <i class="f14 huise1">/ MiracleVision</i></h5>
  <ul class="mt20">
   <li><input type="text" class="ss1_in" value="姓名称呼" onfocus="if(this.value=='姓名称呼'){this.value='';this.style.color='#515050'}" onblur="if(this.value==''){this.value='姓名称呼';this.style.color='#515050'}" x-webkit-grammar="bUIltin:search" x-webkit-speech="" maxlength="30" name="keyword" /></li>
   <li><input type="text" class="ss1_in" value="联系方式" onfocus="if(this.value=='联系方式'){this.value='';this.style.color='#515050'}" onblur="if(this.value==''){this.value='联系方式';this.style.color='#515050'}" x-webkit-grammar="bUIltin:search" x-webkit-speech="" maxlength="30" name="keyword" /></li>
   <li><input type="text" class="ss1_in1" value="留言" onfocus="if(this.value=='留言'){this.value='';this.style.color='#515050'}" onblur="if(this.value==''){this.value='留言';this.style.color='#515050'}" x-webkit-grammar="bUIltin:search" x-webkit-speech="" maxlength="30" name="keyword" /></li>
   <li><input type="submit"  value="提交" class="submit1"/></li>
  </ul>
  <dl class="w100 clearfix overflow pt40">
   <dt>
    <p class="l-35 pt30"> Tel 0371-9999999 <img src="images/popne.png" class="fr" style="margin-right:250px"></p>
    <span class="w100 tl l-24 baise dis pt25">
    中国郑州 郑东rtr东路与中兴路交汇处楷林IFC /A座 -17F-1713<br>
<i class="f12 huise1">Room1713 Building A,Kineer IFC,JinShui East Rd.<br>
Zhengdong New Area,Henan,China</i>
    </span>
   </dt>
   <dd class="pt30">
    <img src="images/index1_r31_c12.jpg " class="fl mr15">
    <p class=" baise f14 tl pt30">
     关注我们<br>
     每日实时动态更新!
    </p>
   </dd>
  </dl>
 </div>
</div>
<!--行业资讯-->
<div class="wrap overflow clearfix pt50">
 <h5 class="f30 l-30">
  <i class="blod">行业资讯</i><br>
  <em class="f14 huise1">已为国内外众多知名企业提供检测分析服务</em>
 </h5>
</div>
<div class="wrap overflow clearfix pt30 h_inf">
 <dl>
  <a href="#">
   <dt>
    <img src="images/index_r7_c1.jpg">
    <p>
     <em>12</em><br>
     2017-09-20
    </p>
   </dt>
   <dd>
    <h5>
     管理学院荣获“2016-2017卓越培训服务机构
”奖项
    </h5>
    <p>
    聚谷检测作为一家新起之秀,不仅与各地质监部门和检验
检疫部门进行技术合作为其提供技术支持,并且与这些
部门开展深度合作,以达....
    </p>
    <span>Read More +</span>
   </dd>
  </a>
 </dl>
 <dl>
  <a href="#">
   <dt>
    <img src="images/index_r7_c1.jpg">
    <p>
     <em>12</em><br>
     2017-09-20
    </p>
   </dt>
   <dd>
    <h5 class="f18 tl">
     管理学院荣获“2016-2017卓越培训服务机构
”奖项
    </h5>
    <p>
    聚谷检测作为一家新起之秀,不仅与各地质监部门和检验
检疫部门进行技术合作为其提供技术支持,并且与这些
部门开展深度合作,以达....
    </p>
    <span>Read More +</span>
   </dd>
  </a>
 </dl>
 <dl>
  <a href="#">
   <dt>
    <img src="images/index_r7_c1.jpg">
    <p>
     <em>12</em><br>
     2017-09-20
    </p>
   </dt>
   <dd>
    <h5>
     管理学院荣获“2016-2017卓越培训服务机构
”奖项
    </h5>
    <p>
    聚谷检测作为一家新起之秀,不仅与各地质监部门和检验
检疫部门进行技术合作为其提供技术支持,并且与这些
部门开展深度合作,以达....
    </p>
    <span>Read More +</span>
   </dd>
  </a>
 </dl>
</div>
<!--ad-->
<div class="wrap overflow clearfix pt30">
 <a href="#"><img src="images/index1_r13_c2.jpg"></a>
</div>
</div>
<!--版权-->
<div class="copy_bg overflow clearfix w100 mt30">
 <div class="wrap overflow">
  <dl>
   <dt>
   <a href="#">关于聚谷</a>       /      <a href="#">我们的服务</a>      /     <a href="#"> 信息资讯</a>      /      <a href="#"> 法规标准</a>      /    <a href="#">  人才招聘</a>       /    <a href="#">   联系我们</a>      <br>
   Copyright ©2017 聚谷检测服务有限公司    All Rights Reserved. ICP备15015338号-3  
   </dt>
   <dd>
    <a href="#"><img src="images/index1_r15_c7.jpg" class="fl mr15"></a> 欢迎您在线咨询
   </dd>
  </dl>
 </div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 pc 电脑 普通自适应 html+css自适应 html+css响应式 红色 简洁 简约 简单 食品 食品厂 食品公司 蛋糕店 咖啡店

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到