16. Web前端网页制作农产品农业主题网页设计实例大学生期末大作业 html+css+js

本文链接：https://blog.csdn.net/A240307/article/details/136788455

前言

本实例以“农业”网站为主题设计，本实例为html+css+js代码。系统文件种类包含：html结构文件、css网页样式文件，js网页样式文件。应用二级菜单、图片轮翻效果、点击事件、注册、登录页面等，供大家参考。

【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！

一、网页概述

2000+案例推荐，主题涵盖30+种类型：

二、网页效果

本案例为响应式网站实例，应用html+css+js，包括bootstrap、swiper、click、respond、图片轮翻效果、注册、登录页面等。以下是本篇文章正文内容，下面案例供参考。以下是本篇文章正文内容，下面案例可供参考：

三、代码展示

1.HTML

代码如下（示例）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>农特汇</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="描述">
<meta name="author" content="yanglin">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/settings.css" rel="stylesheet">
<link href="css/captions.css" rel="stylesheet">
<script src="js/jquery.js"></script>

</head>
<body>
<div id="wrap">
<div class="main-inner-content">
<header id="header" class="section cover header-bg" data-bg="images/slider.jpg">
<div class="header-fixed">
<div class="logo-header">
<div class="container">
<div class="logo-container pull-left clearfix">
<div class="logo">
<h1 class="site-title"> <a href="index.html"> <img src="images/small-logo.png" alt="农特汇"> </a> </h1>
<p class="site-desc">小投资，过小资生活，打开中产阶级财富之门！</p>
</div>
</div>
<div class="menu-container pull-right">
<div class="site-menu">
<div class="site-menu-inner clearfix">
<div class="site-menu-container pull-left">
<nav class="hidden-xs hidden-sm">
<ul class="sf-menu clearfix list-unstyled">
<li class="current-menu-item"> <a href="index.html">首页</a> </li>
<li> <a href="about.html">项目介绍</a>
<ul>
<li><a href="about.html"><span class="icon"><i class="fa fa-font"></i></span>子栏目1</a></li>
<li><a href="about.html"><span class="icon"><i class="fa fa-columns"></i></span>子栏目2</a></li>
<li><a href="about.html"><span class="icon"><i class="fa fa-circle-o"></i></span>子栏目3</a></li>
</ul>
</li>
<li> <a href="#">新闻中心</a>
<div class="sf-mega">
<div class="sf-mega-content">
<div class="row">
<div class="col-md-3">
<ul>
<li><span>项目新闻</span></li>
<li><a href="#">新闻子栏目1</a></li>
<li><a href="#">新闻子栏目2</a></li>
<li><a href="#">新闻子栏目3</a></li>
<li><a href="#">新闻子栏目4</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><span>农业新闻</span></li>
<li><a href="#">新闻子栏目1</a></li>
<li><a href="#">新闻子栏目2</a></li>
<li><a href="#">新闻子栏目3</a></li>
<li><a href="#">新闻子栏目4</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><span>行业资讯</span></li>
<li><a href="#">新闻子栏目1</a></li>
<li><a href="#">新闻子栏目2</a></li>
<li><a href="#">新闻子栏目3</a></li>
<li><a href="#">新闻子栏目4</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><span>招商信息</span></li>
<li><a href="#">新闻子栏目1</a></li>
<li><a href="#">新闻子栏目2</a></li>
<li><a href="#">新闻子栏目3</a></li>
<li><a href="#">新闻子栏目4</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li> <a href="#">远景规划</a>
<ul>
<li><a href="#"><span class="icon"><i class="fa fa-font"></i></span>子栏目1</a></li>
<li><a href="#"><span class="icon"><i class="fa fa-columns"></i></span>子栏目2</a></li>
<li><a href="#"><span class="icon"><i class="fa fa-circle-o"></i></span>子栏目3</a></li>
</ul>
</li>
<li> <a href="#">产品中心</a>
<div class="sf-mega">
<div class="sf-mega-content">
<div class="row">
<div class="col-md-4">
<ul>
<li><span>蔬菜类</span></li>
<li><a href="#">产品子栏目1</a></li>
<li><a href="#">产品子栏目2</a></li>
<li><a href="#">产品子栏目3</a></li>
<li><a href="#">产品子栏目4</a></li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li><span>水果类</span></li>
<li><a href="#">产品子栏目1</a></li>
<li><a href="#">产品子栏目2</a></li>
<li><a href="#">产品子栏目3</a></li>
<li><a href="#">产品子栏目4</a></li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li><span>干货类</span></li>
<li><a href="#">产品子栏目1</a></li>
<li><a href="#">产品子栏目2</a></li>
<li><a href="#">产品子栏目3</a></li>
<li><a href="#">产品子栏目4</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li> <a href="#">服务网络</a>
<ul>
<li><a href="#">子栏目1</a></li>
<li><a href="#">子栏目2</a></li>
<li><a href="#">子栏目3</a></li>
</ul>
</li>
<li> <a href="#">客服中心 </a>
<ul>
<li><a href="#">子栏目1</a></li>
<li><a href="#">子栏目2</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="logo-header">
<div class="container">
<div class="logo-container clearfix">
<div class="logo pull-left">
<h1 class="site-title"> <a href="index.html"> <img src="images/logo.png" alt="农特汇"> </a> </h1>
<p class="site-desc">小投资，过小资生活，打开中产阶级财富之门！</p>
</div>
<div class="social-info pull-right hidden-xs hidden-sm">
<ul class="social textcolor list-unstyled">
<li class="phone"><a href="#"><i class="fa fa-phone"></i><span>023-8888 6666</span></a></li>
<li class="mail active"><a href="#"><i class="fa fa-envelope"></i><span>nonth@nonth.com</span></a></li>
</ul>
</div>
<ul class="member">
<li>
<input type="text" value="账户">
</li>
<li>
<input type="text" value="密码">
</li>
<li>
<input type="submit" name="submit" id="submit" value="登陆" class="login">
</li>
<li>
<input type="submit" name="submit" id="submit" value="注册" class="sign">
</li>
</ul>
</div>
</div>
</div>
<div class="site-menu">
<div class="container">
<div class="site-menu-inner clearfix">
<div class="site-menu-container pull-left">
<nav class="hidden-xs hidden-sm">
<ul class="sf-menu clearfix list-unstyled">
<li class="current-menu-item"> <a href="index.html">首页</a> </li>
<li> <a href="#">项目介绍</a>
<ul>
<li><a href="#"><span class="icon"><i class="fa fa-font"></i></span>子栏目1</a></li>
<li><a href="#"><span class="icon"><i class="fa fa-columns"></i></span>子栏目2</a></li>
<li><a href="#"><span class="icon"><i class="fa fa-circle-o"></i></span>子栏目3</a></li>
</ul>
</li>
<li> <a href="#">新闻中心</a>
<div class="sf-mega">
<div class="sf-mega-content">
<div class="row">
<div class="col-md-3">
<ul>
<li><span>项目新闻</span></li>
<li><a href="#">新闻子栏目1</a></li>
<li><a href="#">新闻子栏目2</a></li>
<li><a href="#">新闻子栏目3</a></li>
<li><a href="#">新闻子栏目4</a></li>
</ul>

......

2.CSS

代码如下（示例）：

.tp-caption.medium_grey {
   position: absolute;
   color: #fff;
   text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
   font-weight: 700;
   font-size: 20px;
   line-height: 20px;
   font-family: Arial;
   padding: 2px 4px;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   background-color: #888;
   white-space: nowrap;
}
.tp-caption.small_text {
   position: absolute;
   color: #fff;
   text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
   font-weight: 700;
   font-size: 14px;
   line-height: 20px;
   font-family: Arial;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
}
.tp-caption.medium_text {
   position: absolute;
   color: #fff;
   text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
   font-weight: 700;
   font-size: 20px;
   line-height: 20px;
   font-family: Arial;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
}
.tp-caption.large_text {
   position: absolute;
   color: #fff;
   text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
   font-weight: 700;
   font-size: 40px;
   line-height: 40px;
   font-family: Arial;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
}
.tp-caption.very_large_text {
   position: absolute;
   color: #fff;
   text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
   font-weight: 700;
   font-size: 60px;
   line-height: 60px;
   font-family: Arial;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
   letter-spacing: -2px;
}
.tp-caption.very_big_white {
   position: absolute;
   color: #fff;
   text-shadow: none;
   font-weight: 800;
   font-size: 60px;
   line-height: 60px;
   font-family: Arial;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
   padding: 0px 4px;
   padding-top: 1px;
   background-color: #000;
}
.tp-caption.very_big_black {
   position: absolute;
   color: #000;
   text-shadow: none;
   font-weight: 700;
   font-size: 60px;
   line-height: 60px;
   font-family: Arial;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
   padding: 0px 4px;
   padding-top: 1px;
   background-color: #fff;
}
.tp-caption.modern_medium_fat {
   position: absolute;
   color: #000;
   text-shadow: none;
   font-weight: 800;
   font-size: 24px;
   line-height: 20px;
   font-family: 'microsoft yahei', sans-serif;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
}
.tp-caption.modern_medium_fat_white {
   position: absolute;
   color: #fff;
   text-shadow: none;
   font-weight: 800;
   font-size: 24px;
   line-height: 20px;
   font-family: 'microsoft yahei', sans-serif;
   margin: 0px;
   border-width: 0px;
   border-style: none;
   white-space: nowrap;
}

......

3.JS

(function( global, factory ) {

   if ( typeof module === "object" && typeof module.exports === "object" ) {
       // For CommonJS and CommonJS-like environments where a proper `window`
       // is present, execute the factory and get jQuery.
       // For environments that do not have a `window` with a `document`
       // (such as Node.js), expose a factory as module.exports.
       // This accentuates the need for the creation of a real `window`.
       // e.g. var jQuery = require("jquery")(window);
       // See ticket #14549 for more info.
       module.exports = global.document ?
           factory( global, true ) :
           function( w ) {
               if ( !w.document ) {
                   throw new Error( "jQuery requires a window with a document" );
               }
               return factory( w );
           };
   } else {
       factory( global );
   }

// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

// Support: Firefox 18+
// Can't be in strict mode, several libs including ASP.NET trace
// the stack via arguments.caller.callee and Firefox dies if
// you try to trace through "use strict" call chains. (#13335)
//

var arr = [];

var slice = arr.slice;

var concat = arr.concat;

var push = arr.push;

var indexOf = arr.indexOf;

var class2type = {};

var toString = class2type.toString;

var hasOwn = class2type.hasOwnProperty;

var support = {};

var
// Use the correct document accordingly with window argument (sandbox)
document = window.document,

version = "2.1.3",

   // Define a local copy of jQuery
   jQuery = function( selector, context ) {
       // The jQuery object is actually just the init constructor 'enhanced'
       // Need init if jQuery is called (just allow error to be thrown if not included)
       return new jQuery.fn.init( selector, context );
   },

   // Support: Android<4.1
   // Make sure we trim BOM and NBSP
   rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

   // Matches dashed string for camelizing
   rmsPrefix = /^-ms-/,
   rdashAlpha = /-([\da-z])/gi,

   // Used by jQuery.camelCase as callback to replace()
   fcamelCase = function( all, letter ) {
       return letter.toUpperCase();
   };

jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,

constructor: jQuery,

// Start with an empty selector
selector: "",

// The default length of a jQuery object is 0
length: 0,

   toArray: function() {
       return slice.call( this );
   },

   // Get the Nth element in the matched element set OR
   // Get the whole matched element set as a clean array
   get: function( num ) {
       return num != null ?

// Return just the one element from the set
( num < 0 ? this[ num + this.length ] : this[ num ] ) :

           // Return all the elements in a clean array
           slice.call( this );
   },

   // Take an array of elements and push it onto the stack
   // (returning the new matched element set)
   pushStack: function( elems ) {

// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );

       // Add the old object onto the stack (as a reference)
       ret.prevObject = this;
       ret.context = this.context;

       // Return the newly-formed element set
       return ret;
   },

   // Execute a callback for every element in the matched set.
   // (You can seed the arguments with an array of args, but this is
   // only used internally.)
   each: function( callback, args ) {
       return jQuery.each( this, callback, args );
   },

   map: function( callback ) {
       return this.pushStack( jQuery.map(this, function( elem, i ) {
           return callback.call( elem, i, elem );
       }));
   },

   slice: function() {
       return this.pushStack( slice.apply( this, arguments ) );
   },

   first: function() {
       return this.eq( 0 );
   },

   last: function() {
       return this.eq( -1 );
   },

   eq: function( i ) {
       var len = this.length,
           j = +i + ( i < 0 ? len : 0 );
       return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
   },

   end: function() {
       return this.prevObject || this.constructor(null);
   },

   // For internal use only.
   // Behaves like an Array's method, not like a jQuery method.
   push: push,
   sort: arr.sort,
   splice: arr.splice
};

jQuery.extend = jQuery.fn.extend = function() {
   var options, name, src, copy, copyIsArray, clone,
       target = arguments[0] || {},
       i = 1,
       length = arguments.length,
       deep = false;

   // Handle a deep copy situation
   if ( typeof target === "boolean" ) {
       deep = target;

       // Skip the boolean and the target
       target = arguments[ i ] || {};
       i++;
   }

   // Handle case when target is a string or something (possible in deep copy)
   if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
       target = {};
   }

   // Extend jQuery itself if only one argument is passed
   if ( i === length ) {
       target = this;
       i--;
   }

   for ( ; i < length; i++ ) {
       // Only deal with non-null/undefined values
       if ( (options = arguments[ i ]) != null ) {
           // Extend the base object
           for ( name in options ) {
               src = target[ name ];
               copy = options[ name ];

               // Prevent never-ending loop
               if ( target === copy ) {
                   continue;
               }

               // Recurse if we're merging plain objects or arrays
               if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                   if ( copyIsArray ) {
                       copyIsArray = false;

......