目录
欢迎来到我的优快云主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
5000+完整代码，主题涵盖30+种类型:
一、网页概述
绿色的生态农业水果种植公司网页模板，应用html+css+js，图片轮翻效果，视频、留言表单等，供大家参考。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>首页</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/font.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--header-->
<div class="header_wrap">
<div class="header fixed_top wow fadeInDown ">
<div class="container">
<div class="left header_nav">
<ul class="header_nav_list clearfix">
<li class="active">
<a href="#">
<p class="nav_name">网站首页</p>
<p class="nav_en">HOME</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">公司动态</p>
<p class="nav_en">ABOUT</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">产品展示</p>
<p class="nav_en">PRODUCTS</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">荣誉资质</p>
<p class="nav_en">HONOR</p>
<span class="nav_dot"></span>
</a>
</li>
</ul>
</div>
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<div class="right header_nav">
<ul class="header_nav_list clearfix">
<li class="">
<a href="#">
<p class="nav_name">种植基地</p>
<p class="nav_en">BASE</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">咨询中心</p>
<p class="nav_en">NEWS</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">招聘信息</p>
<p class="nav_en">RECRUITMENT</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">联系我们</p>
<p class="nav_en">CONTACT</p>
<span class="nav_dot"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header fixed_top_scroll wow fadeInDown">
<div class="container">
<div class="left header_nav">
<ul class="header_nav_list clearfix">
<li class="active">
<a href="#">
<p class="nav_name">网站首页</p>
<p class="nav_en">HOME</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">公司动态</p>
<p class="nav_en">ABOUT</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">产品展示</p>
<p class="nav_en">PRODUCTS</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">荣誉资质</p>
<p class="nav_en">HONOR</p>
<span class="nav_dot"></span>
</a>
</li>
</ul>
</div>
<div class="logo logo_scroll">
<img src="images/logo2.png" alt="">
</div>
<div class="right header_nav">
<ul class="header_nav_list clearfix">
<li class="">
<a href="#">
<p class="nav_name">种植基地</p>
<p class="nav_en">BASE</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">咨询中心</p>
<p class="nav_en">NEWS</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">招聘信息</p>
<p class="nav_en">RECRUITMENT</p>
<span class="nav_dot"></span>
</a>
</li>
<li class="">
<a href="#">
<p class="nav_name">联系我们</p>
<p class="nav_en">CONTACT</p>
<span class="nav_dot"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header_small">
<div class="header_small_btn">
<i class="fa-align-justify fa"></i>
</div>
<div class="header_small_nav">
<ul>
<li>
<a href="#">网站首页</a>
</li>
<li>
<a href="#">公司动态</a>
</li>
<li>
<a href="#">产品展示</a>
</li>
<li>
<a href="#">荣誉资质</a>
</li>
<li>
<a href="#">种植基地</a>
</li>
<li>
<a href="#">咨讯中心</a>
</li>
<li>
<a href="#">招聘信息</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<!--banner-->
<div id="banner">
<div class="swiper-container" id="banner_in">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="images/banner1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/banner1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/banner1.png" alt="">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--关于我们-->
<div class="about_wrap">
<div class="container">
<div class="about">
<div class="about_top">
<h2 class="about_title wow fadeInUp" data-wow-delay="0.3s"></h2>
<p class="about_dec wow fadeInUp" data-wow-delay="0.5s">海南和民生态农业有限公司以基地化、品质化、标准化、品牌化的发展战略为指引，<br>
目前，已发展成为一家集基地种植、加工包装、冷藏保鲜、批发配送等全产业链为一体的公司。</p>
</div>
......
2.CSS
代码如下（节选示例）：
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2013 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s
}
@-webkit-keyframes bounce {
0%,
100%,
20%,
53%,
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
