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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

31 122 41



模板描述:蓝色扁平风格 纯净水公司 企业网站。蓝色扁平风格的纯净水公司企业网站源码下载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自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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