绿色扁平风格PC工业管道生产公司网页模板



5 18 7



模板描述:PC工业管道生产公司,绿色扁平风格PC工业管道生产公司网页模板html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/page.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/banner.jQuery.min.js"></script>
<script type="text/javascript" src="js/scrollleft.js"></script>

3. HTML代码

	<!--右侧固定客服-->
	<div class="right-fixed-bar">
		<ul class="contact">
			<li class="aside-tel">
				<div>
					<img src="img/aside-qq.png" alt="联系客服" />
				</div>
				<p class="ser-num">0539-8896029</p>
			</li>
			<li class="aside-chat">
				<div class="aside-pic-chat"></div>
				<div class="aside-rwm-box">
					<img src="img/rwm.png" alt="二维码" />
				</div>
			</li>
		</ul>
	</div>
	<!--页眉   开始-->
	<div class="header">
		<div class="hd-container">
 			<div class="hd-nav wrapper">
 				<ul class="main-nav clearfix">
 					<li class="main-nav-item nav-active li-1">
 						<a href="index.html">首页</a>
 					</li>
 					<li class="main-nav-item li-2">
 						<a href="about-produce.html">关于我们</a>
 						<div class="sub-nav">
 							<span><a href="about-produce.html">企业介绍</a></span>
 							<span><a href="about-culture.html">企业文化</a></span>
 							<span><a href="about-honor.html">荣誉资质</a></span>
 							<span><a href="about-develop.html">发展历程</a></span>
 						</div>
 					</li>
 					<li class="main-nav-item li-3">
 						<a href="news.html">新闻中心</a>
 						<div class="sub-nav">
 							<span><a href="news.html">企业新闻</a></span>
 							<span><a href="news.html">行业动态</a></span>
 						</div>
 					</li>
 					<li class="main-nav-item li-4">
 						<a href="fields.html">应用领域</a>
 					</li>
 					<li class="main-nav-item li-5">
 						<a href="product.html">产品中心</a>
 					</li>
 					<li class="main-nav-item li-6">
 						<a href="technical.html">科技创新</a>
 						<div class="sub-nav">
 							<span><a href="technical.html">政策优势</a></span>
 							<span><a href="technical.html">技术原理</a></span>
 							<span><a href="technical.html">技术专利</a></span>
 							<span><a href="technical.html">技术合作</a></span>
 						</div>
 					</li>
 					<li class="main-nav-item li-7">
 						<a href="employ.html">招贤纳士</a>
 						<div class="sub-nav">
 							<span><a href="employ.html#employ-part1">人才理念</a></span>
 							<span><a href="employ.html#employ-part2">人才招聘</a></span>
 						</div>
 					</li>
 					<li class="main-nav-item li-8">
 						<a href="contact.html">联系我们</a>
 					</li>
 				</ul>
 			</div>
 		</div>
 		<div class="head-logo">
 			<img src="img/logo.png" alt="鑫竹海" />
 		</div>
	</div>
	<!--页眉   结束-->
	<!--轮播图-->
	<div class="index-banner">
		<!--轮播图-->
		<div class="common-banner">
			 <a href="https://www.51qianduan.com/">51前端</a>
			 <a href="https://www.51qianduan.com/">51前端</a>
	        <!--自定义按钮,移动端可不写-->
	        <div class="banner-slider"><!--主体结构,请用此类名调用插件,此类名可自定义-->
	            <ul>
	            	 <li><a href=""><img src="img/index-banner.jpg" alt="" /></a></li>
	            	<li><a href=""><img src="img/index-banner.jpg" alt="" /></a></li>
	                <li><a href=""><img src="img/index-banner.jpg" alt="" /></a></li>
	            </ul>
	        </div>
		</div>
	</div>
	<!--关于我们-->
	<div class="index-about">
			<div class="index-about-con clearfix">
				<div class="index-about-col index-about-txt">
					<h2></h2>
					<div class="clearfix">
						<p>鑫竹海(山东)管道制造有限公司,座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务。</p>
						<p>竹缠绕压力管道和竹基管廊,是由中国人发明、全球首创、世界领先,真正的中国制造。它以竹子为基材,以树脂为胶黏剂,充分利用竹材轴向拉伸强度高的特点,采用无应力缺陷的弧形缠绕工艺技术制成。</p>
						<p>产品具有高性价比、低碳环保、抗震抗沉降能力强、保温性能极好等特点;独具耐压强度高、水流性能佳、重量轻、安装方便、使用寿命长等优点突出。可广泛应用于城市给排水、城市地下管廊建设、农田节水灌溉等领域。</p>
						<a href="https://www.51qianduan.com/">51前端</a>
					</div>
				</div>
				<div class="index-about-col index-about-vider">
					<video src="img/nubiaz11id.mp4" width="100%" controls poster="">
						当前浏览器不支持 video直接播放,点击这里下载视频: <a href="img/nubiaz11id.mp4">下载视频</a>
					</video>
				</div>
			</div>
	</div>
	<!--产品展示-->
	<div class="index-product">
		<div class="index-pro-con wrapper">
			<div class="com-title-box">
				<div class="common-title clearfix">
					<h1>产品展示</h1>
					<p>PRODUCT</p>
				</div>
			</div>
			<div class="index-pro-pics">
					<ul class="clearfix">
						<li class="index-pro-item">
							<a href="product-detail.html">
								<div class="index-pro-img">
									<img src="img/index-pro-pic-1.png" alt="" />
								</div>
								<p>产品的型号1</p>
								<p>产品规格:300mm</p>
							</a>
						</li>
						<li class="index-pro-item">
							<a href="product-detail.html">
								<div class="index-pro-img">
									<img src="img/index-pro-pic-1.png" alt="" />
								</div>
								<p>产品的型号1</p>
								<p>产品规格:300mm</p>
							</a>
						</li>
						<li class="index-pro-item">
							<a href="product-detail.html">
								<div class="index-pro-img">
									<img src="img/index-pro-pic-1.png" alt="" />
								</div>
								<p>产品的型号1</p>
								<p>产品规格:300mm</p>
							</a>
						</li>
						<li class="index-pro-item">
							<a href="product-detail.html">
								<div class="index-pro-img">
									<img src="img/index-pro-pic-1.png" alt="" />
								</div>
								<p>产品的型号1</p>
								<p>产品规格:300mm</p>
							</a>
						</li>
						<li class="index-pro-item">
							<a href="product-detail.html">
								<div class="index-pro-img">
									<img src="img/index-pro-pic-1.png" alt="" />
								</div>
								<p>产品的型号1</p>
								<p>产品规格:300mm</p>
							</a>
						</li>
						<li class="index-pro-item">
							<a href="product-detail.html">
								<div class="index-pro-img">
									<img src="img/index-pro-pic-1.png" alt="" />
								</div>
								<p>产品的型号1</p>
								<p>产品规格:300mm</p>
							</a>
						</li>
					</ul>
					<div class="index-news-more">
						<a href="product.html">
							了解更多
						</a>
					</div>
			</div>
		</div>
	</div>
	<!--新闻中心-->
	<div class="index-news">
		<div class="index-news-wrap wrapper">
			<div class="com-title-box">
				<div class="common-title clearfix">
					<h1>新闻中心</h1>
					<p>NEWS</p>
				</div>
			</div>
			<div class="index-news-lists">
				<div class="com-tabs">
					<ul class="com-tab-list clearfix">
						<li class="com-tab-active">企业新闻</li>
						<li>行业动态</li>
					</ul>
				</div>
				<div class="index-news-con clearfix">
					<div class="index-news-col index-news-active">
						<ul class="clearfix">
							<li class="index-news-item clearfix">
								<div class="index-news-date float-l">
									<p>25</p>
									<span>2016-11</span>
								</div>
								<div class="index-news-txt float-l">
									<a href="news-detail.html">
										<h2>鑫竹海(山东)管道制造有限公司</h2>
										<p>座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务</p>
									</a>
								</div>
							</li>
							<li class="index-news-item clearfix">
								<div class="index-news-date float-l">
									<p>25</p>
									<span>2016-11</span>
								</div>
								<div class="index-news-txt float-l">
									<a href="news-detail.html">
										<h2>鑫竹海(山东)管道制造有限公司</h2>
										<p>座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务</p>
									</a>
								</div>
							</li>
							<li class="index-news-item clearfix">
								<div class="index-news-date float-l">
									<p>25</p>
									<span>2016-11</span>
								</div>
								<div class="index-news-txt float-l">
									<a href="news-detail.html">
										<h2>鑫竹海(山东)管道制造有限公司</h2>
										<p>座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务</p>
									</a>
								</div>
							</li>
							<li class="index-news-item clearfix">
								<div class="index-news-date float-l">
									<p>25</p>
									<span>2016-11</span>
								</div>
								<div class="index-news-txt float-l">
									<a href="news-detail.html">
										<h2>鑫竹海(山东)管道制造有限公司</h2>
										<p>座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务</p>
									</a>
								</div>
							</li>
						</ul>
						<div class="index-news-more">
							<a href="news.html">
								了解更多
							</a>
						</div>
					</div>
					<div class="index-news-col">
						<ul class="clearfix">
							<li class="index-news-item clearfix">
								<div class="index-news-date float-l">
									<p>25</p>
									<span>2016-11</span>
								</div>
								<div class="index-news-txt float-l">
									<a href="news-detail.html">
										<h2>鑫竹海(山东)管道制造有限公司</h2>
										<p>座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务</p>
									</a>
								</div>
							</li>
							<li class="index-news-item clearfix">
								<div class="index-news-date float-l">
									<p>25</p>
									<span>2016-11</span>
								</div>
								<div class="index-news-txt float-l">
									<a href="news-detail.html">
										<h2>鑫竹海(山东)管道制造有限公司</h2>
										<p>座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务</p>
									</a>
								</div>
							</li>
							<li class="index-news-item clearfix">
								<div class="index-news-date float-l">
									<p>25</p>
									<span>2016-11</span>
								</div>
								<div class="index-news-txt float-l">
									<a href="news-detail.html">
										<h2>鑫竹海(山东)管道制造有限公司</h2>
										<p>座落在美丽的临沂经济技术开发区,是中国乃至全世界第一家发明方控股公司,是中国生物基竹复合管道制造示范基地,专业从事竹缠绕压力管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务管道的生产、销售及技术服务绕压力管道的生产、销售及技术服务</p>
									</a>
								</div>
							</li>
						</ul>
						<div class="index-news-more">
							<a href="news.html">
								了解更多
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--友情链接-->
	<div class="index-links">
		<div class="index-links-con">
			<div class="com-title-box">
				<div class="common-title common-title-small clearfix">
					<h1>友情链接</h1>
					<p>FRIENDLY LINK</p>
				</div>
			</div>
			<div class="index-link-wrap wrapper">
				<ul>
					<li>
						<a href="https://www.51qianduan.com/">51前端</a>
					</li>
					<li>
						<a href="" target="_blank">
							<img alt="" src="img/index-link-pic-2.jpg"/>
						</a>
					</li>
					<li>
						<a href="" target="_blank">
							<img alt="" src="img/index-link-pic-3.jpg"/>
						</a>
					</li>
					<li>
						<a href="" target="_blank">
							<img alt="" src="img/index-link-pic-4.jpg"/>
						</a>
					</li>
					<li>
						<a href="" target="_blank">
							<img alt="" src="img/index-link-pic-5.jpg"/>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--页脚-->
	<div class="footer">
		<div class="ft-container wrapper">
			<ul class="clearfix">
				<li class="ft-left">
					<a href="index.html">
						<img src="img/ft-logo.png" alt="鑫竹海" />
					</a>
				</li>
				<li class="ft-middle">
					<p>鑫竹海(山东)管道制造有限公司</p>
					<p>地址:山东省临沂经济开发区金升路109号</p>
					<p>Copyright 2011-2016 版权所有:鑫竹海(山东)管道制造有限公司   </p>
				</li>
				<li class="ft-right">
					<dl class="clearfix">
						<dt class="ewm">
							<img src="img/wem.jpg" alt="" />
						</dt>
						<dd>
							<h4>扫一扫</h4>
							<h5>关注网站</h5>
						</dd>
					</dl>
				</li>
			</ul>
			<div class="back-top">
				<a href="#">
					<img src="img/backtop.png" alt="返回顶部" />
				</a>
			</div>
		</div>
	</div>
	<!--页脚结束-->
<!--轮播图js-->
<!--首页无缝滚动js-->
<script type="text/javascript">
	//导航当前效果
	$(".main-nav .main-nav-item").click(
		function(){
			$(this).addClass("nav-active").siblings().removeClass("nav-active");
		});
	//导航二级菜单显示效果
	$(".main-nav .main-nav-item").hover(
		function(){
			$(this).children(".sub-nav").stop().fadeIn();
			$(this).siblings().children(".sub-nav").stop().hide();
		},function(){
			$(this).children(".sub-nav").stop().fadeOut();
		});
	//轮播图--调用
	$(".banner-slider").YuxiSlider({
        width:1920, //容器宽度
        height:650,
        control:$('.banner-control'), //绑定控制按钮
        during:4000, //间隔4秒自动滑动
        speed:800, //移动速度0.8秒
        direkey:true //是否开启左右箭头方向控制
    });
	//公共切换标签
	$(".com-tab-list li").click(
		function(){
			var n=$(this).index();
			$(this).addClass("com-tab-active").siblings().removeClass("com-tab-active");
			$(".index-news-col").eq(n).addClass("index-news-active").siblings().removeClass("index-news-active");
		});
	//首页友情链接无缝滚动--调用
	$(".index-link-wrap").imgscroll({
		speed: 40,    //图片滚动速度
		amount: 0,    //图片滚动过渡时间
		width: 1,     //图片滚动步数
		dir: "left"   // "left" 或 "up" 向左或向上滚动
	});
	//返回顶部
	$(".back-top").click(function () {
        var speed=200;//滑动的速度
        $('body,html').animate({ scrollTop: 0 }, speed);
        return false;
 	});
</script>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 pc 电脑 普通自适应 html+css自适应 html+css响应式 欧美风 欧美 欧洲 美洲 绿色 简洁 简约 简单 工厂 工业 工业产品

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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