蓝色扁平风格的纯净水公司企业网站源码下载



5 19 7



模板描述:蓝色扁平风格 纯净水公司 企业网站,蓝色扁平风格的纯净水公司企业网站源码下载html模板下载

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.3.js"></script>
<script type="text/javascript" src="js/qht/ImageSlide.js"></script>
<script type="text/javascript" src="js/qht/prototype.js"></script>
<script type="text/javascript" src="js/aos/highlight.min.js"></script>
<script type="text/javascript" src="js/aos/aos.js"></script>

3. HTML代码

<!-- 头部 -->
<div class="head">
	<div class="top">
		<div class="px1200">
			<p>· 欢迎来到浩然山泉!</p>
			<ul>
				<li><a href="about_LianXi.html">联系我们</a></li>
				<li><a href="#">法律声明</a></li> 
				<li class="no">
					<a href="javascript:;" class="erwm">手机端</a>
					<div class="web">
						<div>
							<img src="images/ewm.jpg">
							<p>微官网</p>
						</div>
						<div>
							<img src="images/ewm.jpg">
							<p>手机版</p>
						</div>
					</div>
				</li>  
			</ul>
		</div>
	</div>
	<div class="bottom" aos="fade-up" aos-easing="ease" aos-delay="100">
		<div class="px1200">
			<div class="logo" aos="fade-up" aos-offset="120" aos-duration="200" aos-delay="200">
				<a href="index.html"><img src="images/logo.png"></a>
			</div>
			<div class="dh">
				<ul>
					<li class="no" aos="fade-up"  aos-delay="300" aos-duration="400"><a href="index.html"><span>网站首页</span><i></i></a></li>
					<li aos="fade-up" aos-delay="400" aos-duration="600"><a href="water.html"><span>水源地</span><i></i></a></li>
					<li aos="fade-up" aos-delay="500" aos-duration="800"><a href="brand.html"><span>品牌中心</span><i></i></a></li>
					<li aos="fade-up" aos-delay="600" aos-duration="1000"><a href="news.html"><span>企业新闻</span><i></i></a></li>
					<li aos="fade-up" aos-delay="700" aos-duration="1200"><a href="aboutHaoRan.html"><span>关于浩然</span><i></i></a></li>
				</ul>
			</div>
			<div class="dianh" aos="fade-left" aos-easing="ease"  aos-delay="700"   aos-duration="600">
				<p>全国服务热线</p>
				<h2>400-6677-937</h2>
			</div>
		</div>
	</div>
</div>
<!-- banner--> 
 <div id="slideBox" class="slideBox_banner" style="overflow: hidden; position:relative;" aos="fade-up" aos-easing="ease" aos-delay="1300">
	<div class="hd">
		<ul><li>1</li><li>2</li><li>3</li></ul>
	</div>
	<div class="bd">
		<ul>
			<li><a href="#" target="_blank"><img src="images/banner.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="images/banner1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="images/banner2.jpg" /></a></li>
		</ul>
	</div>
	<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
	<a class="prev" href="javascript:void(0)"></a>
	<a class="next" href="javascript:void(0)"></a>
</div>
<script type="text/javascript">
jQuery(".slideBox_banner").slide({mainCell:".bd ul",autoPlay:true});
</script>
<!-- 内容-快捷导航 -->
<div class="px1200" aos="fade-up" aos-delay="500" aos-easing="ease">
	<div class="kuaij">
		<ul>
			<li aos="fade-up" aos-delay="800" aos-easing="ease"><a href="water.html"><i></i><p>饮水讲堂</p></a></li>
			<li aos="fade-up" aos-delay="1000" aos-easing="ease" ><a href="brend_JiaM.html"><i class="i2"></i><p>加入浩然</p></a></li>
			<li aos="fade-up" aos-delay="1200" aos-easing="ease"><a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&amp;uin=2239329788&amp;site=qq&amp;menu=yes"><i class="i3"></i><p>在线沟通</p></a></li>
			<li aos="fade-up" aos-delay="1600" aos-easing="ease"><a href="aboutHaoRan.html"><i class="i4"></i><p>浩然历程</p></a></li>
		</ul>
	</div>
	<!-- 产品 --> 
	<div class="brand"  aos="fade-up" aos-easing="ease">
		<div class="bt">
			<p aos="fade-down" aos-delay="500" aos-easing="ease">haoranquanshui</p>
			<h2 aos="fade-down" aos-delay="600" aos-easing="ease">浩然泉水</h2>
			<i aos="flip-left" aos-delay="700" aos-easing="ease"></i>
		</div>
		<!-- canp -->
		<div class="picScroll-left_chanp" aos="fade-up" aos-delay="800" aos-easing="ease"> 
			<div class="bd">
				<ul class="picList">
					<li>
						<div class="chanp_text">
							<h1>精装浩然山泉</h1>
							<p>浩然纯净水,中国饮用水市场的领先品牌,用30年的专业经...</p>
							<a href="brand.html">details</a>
						</div>
						<div class="img">
							<a href="brand.html"></a><img src="images/chanp_1.jpg">
						</div>
					</li>
					<li>
						<div class="chanp_text">
							<h1>精装浩然山泉</h1>
							<p>浩然纯净水,中国饮用水市场的领先品牌,用30年的专业经...</p>
							<a href="brand.html">details</a>
						</div>
						<div class="img">
							<a href="brand.html"></a><img src="images/chanp_2.jpg">
						</div>
					</li>
					<li>
						<div class="chanp_text">
							<h1>精装浩然山泉</h1>
							<p>浩然纯净水,中国饮用水市场的领先品牌,用30年的专业经...</p>
							<a href="brand.html">details</a>
						</div>
						<div class="img">
							<a href="brand.html"></a><img src="images/video_img.jpg">
						</div>
					</li>
					<!-- 这里将来客户新增产品,多条数据,就轮播 -->
				</ul>
			</div>
			<div class="hd" aos="fade-up" aos-delay="900" aos-easing="ease">
				<a class="next" aos="fade-right" aos-delay="1200" aos-easing="ease"><</a>
				<ul></ul>
				<a href="brand.html" class="ck" >查看详情</a>
				<a class="prev" aos="fade-left" aos-delay="1200" aos-easing="ease">></a> 
			</div>
		</div> 
		<script type="text/javascript">
		jQuery(".picScroll-left_chanp").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:2,trigger:"click"});
		</script> 
	</div> 
	<!-- 企业介绍 -->
	<div class="about_hr" aos="fade-up" aos-easing="ease">
		<div class="text" aos="fade-right" aos-easing="ease" aos-delay="500">
			<div class="bt" aos="fade-right" aos-easing="ease" aos-delay="600">
				<p>about haoran</p>
				<h2>关于浩然</h2>
				<i></i>
			</div>
			<div class="neir" aos="fade-up" aos-easing="ease" aos-delay="700">
				<h3>遵义县虾子镇浩然山泉</h3>
				<p>浩然山泉(中国)有限公司(下面简称“浩然山泉”)隶属华润集团旗下华润创业有限公司,总部位于深圳市高新技术产业园区(北区)。1990年泉在国内率先推出纯净水,是国内最早专业化生.....装饮用水的企业之一,主营“怡寶”牌系列包装饮用水。致力为每一位消费者带来优质的产品和真诚的服.....</p>
				<a href="aboutHaoRan.html" aos="fade-up" aos-easing="ease" aos-delay="900">查看更多</a>
			</div>
		</div>
		<div class="img" aos="fade-left" aos-easing="ease" aos-delay="800">
			<img src="images/about_img.jpg">
		</div>
	</div> 
</div> 
<!-- 浩然水之韵 -->
<!-- 2 -->
<div class="water_bj" style="background:no-repeat center center url(images/shui_bj.jpg);" aos="fade-up" aos-easing="ease">
	<div class="px1200">
		 <!-- 开始 -->
		<div id="focusImage" class="slide">
			<div class="bai"></div>
			<div class="lan"></div>
			<ul class="contents"> 
				<li class="current">
					<div class="image"><a href="#"><img src="images/water_img.jpg"></a></div>
					<div class="text">
						<h1>浩然水之韵的故事</h1>
						<h3>_遵义县虾子镇浩然山泉</h3>
						<p>浩然度假村品牌,它注重于和周围的自然环境融为一体,使人能无拘无束的接近大自然。人类原本不是生活在喧嚣周围的自然环境融为一体,使人能无拘无束的接近大自然。人类原本不是生活在喧的城市里。我们已经完全适应这种都市的生活方式了,但有时,我们应该赤裸裸的回归那个最原本的自己。</p> 
						<a href="brend_DuJia.html">查看更多</a>
					</div>
				</li>
				<li>
					<div class="image"><a href="#"><img src="images/water_img1.jpg"></a></div>
					<div class="text">
						<h1>住宿</h1>
						<h3>_豪华套间随你选</h3>
						<p>天涯上曾经有个高楼,说的是民国时期的原配和小三,看那些早已逝去的旧人的故事,倒是颇有几分唏嘘。
		很多人在回帖里痛斥那些抛弃结发妻子的男人渣男,声嘶力竭,又想起被无数姑娘转发的那句话“有朝一日剑在手,斩尽天下负心狗。”不由得哑然。
		  
		我倒是觉得,感情的事,大半是由于情投意合,合则来,不合则去,人能够约束自己的是道德和责任,而非感情。从本质上来说,婚姻和爱情是背道而驰的。
		而一段感情能否持久与牢固,很大程度上,是两人之间的博弈,势均力敌者方能走到最后。
		  
		势均力敌不仅仅体现在身家、背景,更体现在两人的才学、性格、能干、兴趣和喜好上。</p> 
						<a href="brend_DuJia.html">查看更多</a>
					</div>
				</li>
				<li>
					<div class="image"><a href="#"><img src="images/water_img2.jpg" ></a></div>
					<div class="text">
						<h1>美食</h1>
						<h3>_精心绿色美食为您准备</h3>
						<p>若认真评价徐志摩有关的三个女人,张幼仪其实更漂亮温柔对徐志摩的感情更深,她甚至坚韧不拔,大着肚子被徐志摩抛弃后也依旧咬着牙活得漂亮潇洒,带大了孩子,念了美国的学校,成为了女强人。但是在洋派青年徐志摩的眼中,她依旧不过是个木讷无趣的乡下妇人,他更加喜欢的是林徽因的温婉聪明才华横溢和陆小曼的妖娆娇俏眼角眉梢都是风情。</p> 
						<a href="brend_DuJia.html">查看更多</a>
					</div>
				</li> 
			</ul>
			<div class="triggers">
				<a href="javascript:;" class="cur current"><img src="images/water_img.jpg" width="58" height="38"></a>
				<a href="javascript:;"><img src="images/water_img1.jpg" width="58" height="38"></a>
				<a href="javascript:;"><img src="images/water_img2.jpg" width="58" height="38"></a> 
			</div>
			<div class="icon-dot">
				<a href="javascript:;" class="cur current"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a> 
			</div> 
			<span class="link-watch pre down"></span>
			<span class="link-watch next down"></span>
		</div>
		<script type="text/javascript">
		new ImageSlide({
			project:"#focusImage",
			content:".contents li",
			tigger:".triggers a",
			dot:".icon-dot a",
			watch:".link-watch",
			auto:!0,
			hide:!0
		})
		</script>
		 <!-- 结束 -->
		<div class="right"  > 
			<div class="text">
				<h1  >浩然水之韵</h1>
				<h3>_遵义县虾子镇浩然山泉</h3>
				<p>浩然度假村品牌,它注重于和周围的自然环境融为一体,使人能无拘无束的接近大自然。人类原本不是生活在喧嚣的城市里。我们已经完全适应这种都市的生活方式了,但有时,我们应该赤裸裸的回归那个最原本的自己。</p> 
				<a href="brend_DuJia.html" >查看更多</a>
			</div>
		</div>
	</div>
</div>
<!-- news 新闻 -->
<div class="px1200" aos="fade-up" aos-easing="ease"> 
	<div class="shouy_news">
		<div class="bt">
			<p aos="fade-down" aos-delay="500" aos-easing="ease">Corporate news</p>
			<h2 aos="fade-down" aos-delay="600" aos-easing="ease">企业新闻</h2>
			<i aos="flip-left" aos-delay="700" aos-easing="ease"></i>
		</div>
		<div class="left" aos="fade-up-right" aos-easing="ease">
			<ul>
				<li aos="fade-up" aos-easing="ease" aos-delay="500">
					<div class="riq">
						<h1>22</h1>
						<span>2019/02</span>
					</div>
					<h2><a href="news_xq.html">华润怡宝&去哪儿网再联华润怡宝&去哪儿网再联</a></h2>
					<p>v华润怡宝水公益计划全国公益行动 2018华润怡宝水公益计划公益水公益计划公益 全球首个 by UTMB赛事明日赛事明日开跑...</p>
				</li>
				<li aos="fade-up" aos-easing="ease" aos-delay="600">
					<div class="riq">
						<h1>22</h1>
						<span>2019/02</span>
					</div>
					<h2><a href="news_xq.html">华润怡宝&去哪儿网再联华润怡宝&去哪儿网再联</a></h2>
					<p>v华润怡宝水公益计划全国公益行动 2018华润怡宝水公益计划公益水公益计划公益 全球首个 by UTMB赛事明日赛事明日开跑...</p>
				</li>
				<li  aos="fade-up" aos-easing="ease" aos-delay="700">
					<div class="riq">
						<h1>22</h1>
						<span>2019/02</span>
					</div>
					<h2><a href="news_xq.html">华润怡宝&去哪儿网再联华润怡宝&去哪儿网再联</a></h2>
					<p>v华润怡宝水公益计划全国公益行动 2018华润怡宝水公益计划公益水公益计划公益 全球首个 by UTMB赛事明日赛事明日开跑...</p>
				</li>
				<li  aos="fade-up" aos-easing="ease" aos-delay="800">
					<div class="riq">
						<h1>22</h1>
						<span>2019/02</span>
					</div>
					<h2><a href="news_xq.html">华润怡宝&去哪儿网再联华润怡宝&去哪儿网再联</a></h2>
					<p>v华润怡宝水公益计划全国公益行动 2018华润怡宝水公益计划公益水公益计划公益 全球首个 by UTMB赛事明日赛事明日开跑...</p>
				</li>
				<li  aos="fade-up" aos-easing="ease" aos-delay="900">
					<div class="riq">
						<h1>22</h1>
						<span>2019/02</span>
					</div>
					<h2><a href="news_xq.html">华润怡宝&去哪儿网再联华润怡宝&去哪儿网再联</a></h2>
					<p>v华润怡宝水公益计划全国公益行动 2018华润怡宝水公益计划公益水公益计划公益 全球首个 by UTMB赛事明日赛事明日开跑...</p>
				</li>
			</ul>
		</div>
		<div class="right" aos="fade-up-left" aos-easing="ease">
			<video width="400" height="250" poster="images/video_img.jpg" controls>
			  	<source src="images/mov_bbb.mp4"  type="video/mp4">
			  	<source src="images/mov_bbb.ogg"  type="video/ogg"> 
			</video>
			<div class="img" aos="fade-up" aos-easing="ease" aos-delay="600">
				<ul>
					<li>
						<a href="#"><img src="images/tu_y.jpg"></a>
					</li>
					<li>
						<a href="#"><img src="images/tu_y1.jpg"></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- footer -->
<div class="footer">
	<div>
		<div class="px1200"> 
			<ul>
				<h3>常用链接</h3>
				<li><a href="#">网站地图</a></li>
				<li><a href="#">隐私与安全</a></li>
				<li><a href="#">常见问题 </a></li>
				<li><a href="#">在线留言</a></li>
			</ul>
			<ul>
				<h3>友情链接</h3>
				<li><a href="http://www.51qianduan.com//" target="_blank">苗谷网</a></li>
				<li><a href="http://www.51qianduan.com//" target="_blank">百度一下</a></li>
				<li><a href="http://www.51qianduan.com//" target="_blank">浩然山泉 </a></li>
				<li><a href="http://www.51qianduan.com//" target="_blank">WangID</a></li>
			</ul>
			<ul class="dh">
				<h3>联系我们</h3>
				<li class="dianh"><p>服务热线</p><h2>400 9200 518</h2></li>
				<li><a href="javascript:;">邮箱:2239329788@qq.com</a></li> 
			</ul>
			<ul class="yidb">
				<h3>关注我们</h3>
				<li>
					<img src="images/ewm.jpg">
					<p>扫码关注我们</p>
				</li> 
				<li>
					<img src="images/ewm.jpg">
					<p>扫码关注我们</p>
				</li> 
			</ul>
		</div>
	</div>
	<div class="banq">
		<p>Copyright © 浩然山泉有限公司     备案号:粤ICP备11045133号-6     技术支持:驰通网络</p>
	</div>
</div>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 工厂 工业 工业产品

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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