12. Web前端网页制作特色农产品公司网页设计实例大学生期末大作业 html+css+js

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

前言

本文以农产品为主题设计，本实例为html+css+js代码。系统文件种类包含：html结构文件、css网页样式文件，js网页样式文件，图片动态轮翻、DIV、点击事件等实例，供大家参考。

一、网页概述

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

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

二、网页效果

提示：以下是本篇文章正文内容，下面案例供参考:

三、代码展示

1.HTML

代码如下（节选示例）：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网站首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/lrtk.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
<script>
$(function() {
   $(".btn_top").hide();
       $(".btn_top").live("click",function(){
           $('html, body').animate({scrollTop: 0},300);return false;
       })
       $(window).bind('scroll resize',function(){
           if($(window).scrollTop()<=300){
               $(".btn_top").hide();
           }else{
               $(".btn_top").show();
           }
       })
})
</script>
</head>
<body>

<div class="top" name="top">
<div class="top-ner">
<div class="top-ner01">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="dlzc">
<ul>
<li><a href="login.html">登录</a></li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li><a class="host" href="index.html">网站首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="chanpin.html">产品展示</a></li>
<li><a href="hezuo.html">企业文化</a></li>
</ul>
</div>
</div>
</div>

<div id="playBox">
<div class="pre"></div>
<div class="next"></div>
<div class="smalltitle">
<ul>
<li class="thistitle"></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="oUlplay">
<li><a href="#" target="_blank"><img src="images/1.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg"></a></li>

</ul>
</div>

<div class="main">
<div class="m-top"></div>
<div class="m-ner">
<div class="tit">产品展示</div>

<div class="chanp">
<ul>
<li class="mar8 mab8"><img src="images/cp01.jpg" /><p>圣女果</p><p><span>29.00元</span></p></li>
<li class="mar8 mab8"><img src="images/cp02.jpg" /><p>猕猴桃</p><p><span>39.00元</span></p></li>
<li class="mar8 mab8"><img src="images/cp03.jpg" /><p>掌叶复盆子</p><p><span>189.00元</span></p></li>
<li class="mab8"><img src="images/cp04.jpg" /><p>相思果 Pro</p><p><span>129.00元</span></p></li>
<li class="mar8"><img src="images/cp05.jpg" /><p>万寿果</p><p><span>199.00元</span></p></li>
<li class="mar8"><img src="images/cp06.jpg" /><p>钩藤</p><p><span>89.00元</span></p></li>
<li class="mar8"><img src="images/cp07.jpg" /><p>长桑果</p><p><span>129.00元</span></p></li>
<li ><img src="images/cp08.jpg" /><p>玉竹</p><p><span>239.00元</span></p></li>
</ul>
</div>
</div>
</div>

<div class="news">
<div class="news-ner">
<div class="tit">新闻资讯</div>
<div class="tit2">分享最新科技资讯,关注特色农业</div>
<div class="news-box">
<ul>
<li class="mar30"><a href="new01.html">
<img class="scm" src="images/n01.jpg" />
<h1>"布福娜"的果实造型奇特，吃上一次就会爱上的水果！</h1>
<p>大家除了爱吃美食跟零食之外应该还很爱吃水果吧，饭后跟家里人坐在一起，一边看电视一边吃水果也十分享受呢.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
<li><a href="new02.html">
<img class="scm" src="images/n02.jpg" />
<h1>一株苗木，带富一方百姓人民日报聚焦肥西苗农致富</h1>
<p>蜿蜒盘旋的山路、生意盎然的苗木，时值初冬，驱车于安徽省肥西县紫蓬镇罗坝村苗木种植基地，漫山的红枫.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
<li class="mar30"><a href="new03.html">
<img class="scm" src="images/n03.jpg" />
<h1>杨梅之乡</h1>
<p>靖州苗族侗族自治县，隶属于湖南省怀化市。位于湖南省西南，怀化市南部，湘、黔、桂交界地区。地处云贵高原.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
<li><a href="new04.html">
<img class="scm" src="images/n04.jpg" />
<h1>院士袁隆平：靖州杨梅好呷！</h1>
<p>中国工程院院士、"杂交水稻之父"袁隆平院士专程出席品梅活动，现场品尝新上市的靖州杨梅后，他连夸好吃.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
<li class="mar30"><a href="new05.html">
<img class="scm" src="images/n05.jpg" />
<h1>高档水果布福娜，农村种植创收好帮手</h1>
<p>布福娜，原产西部原始森林，近几年在北方地区选育而成的一种珍稀植物。苗语的解释为美容长寿之果。其根.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
<li><a href="new06.html">
<img class="scm" src="images/n06.jpg" />
<h1>浅谈推广绿色农业种植技术的方法</h1>
<p>如何有效推广绿色农业种植技术？各位农友你们知道吗？现在的人们追求养生、追求健康、追求绿色饮食概念.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
<li class="mar30"><a href="new07.html">
<img class="scm" src="images/n08.jpg" />
<h1>农业部部署落实中央一号文件 </h1>
<p>为深入贯彻《中共中央国务院关于深入推进农业供给侧结构性改革加快培育农业农村发展新动能的若干意见》.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
<li><a href="new08.html">
<img class="scm" src="images/n07.jpg" />
<h1>绿色农业发展如何成为新常态</h1>
<p>"四十年来'三农'发展虽然取得很大成绩。但要真正达到强富美，还必须从几大陷阱中拔出腿来与时俱进.....</p>
<p>2019-10-7   admin   </p>
</a>
</li>
</ul>
</div>
</div>

</div>

<div class="footer">
<div class="footer-ner">
<ul>
<li>
<h1><a href="#">关于我们</a></h1>
<p><a href="#">公司简介</a></p>
<p><a href="#">在线留言</a></p>
<p><a href="#">在线反馈</a></p>
<p><a href="#">联系我们</a></p>
</li>
<li>
<h1><a href="#">新闻资讯</a></h1>
<p><a href="#">公司动态</a></p>
<p><a href="#">业界资讯</a></p>
<p><a href="#">荣誉资质</a></p>
<p><a href="#">产品信息 </a></p>
</li>
<li>
<h1><a href="#">服务与支持</a></h1>
<p><a href="#">用户手册</a></p>
<p><a href="#">产品支持</a></p>
<p><a href="#">质保服务</a></p>
<p><a href="#">售后政策 </a></p>
</li>

......

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */

body {
   margin: 0 auto;
   font-size: 12px;
   font-family: "微软雅黑",arial;
   line-height: 22px;
   background: #fcf2dd;
}

div,p,input,ul,li,h1,h2 {
   height: auto;
   list-style: none;
   margin: 0;
   padding: 0;
   vertical-align: middle;
}

img {
   border: 0;
   margin: 0;
   padding: 0;
}

a {
color: #333;
text-decoration: none;
}

a:link {
color: #333;
}

a:hover {
   color: #69F;
   text-decoration: none;
   overflow: hidden;
}

/*----网页开始----*/
.top {
   height: 107px;
   width: 1200px;
   margin: 0 auto;
   background: #fff;
}

.top-ner {
   width: 1150px;
   height: 107px;
   margin: 0 auto;
}

.top-ner01 {
   height: 45px;
   padding-top: 15px;
   width: 100%;
}

.logo {
   width: 177px;
   height: 45px;
   float: left;
}

.dlzc {
   width: 140px;
   height: 45px;
   float: right;
}

.dlzc ul {
}

.dlzc ul li {
   width: 55px;
   height: 30px;
   line-height: 30px;
   border: #b2d6f9 1px solid;
   text-align: center;
   float: left;
   margin-left: 10px;
}

.dlzc ul li a {
   font-size: 14px;
   width: 55px;
   color: #b2d6f9;
   font-weight: bold;
   height: 30px;
   display: block;
}

.dlzc ul li a:hover {
   background: #48bf8b;
   color: #FFF;
   border: none;
}

.hos {
   background: #48bf8b;
   color: #FFF !important;
   border: none;
}
/*---导航----*/
#nav {
   width: 1150px;
   height: 45px;
   overflow: hidden;
}

#nav ul {
float: left;
}

#nav ul li {
   padding: 0px 15px;
   line-height: 45px;
   float: left;
}

#nav ul li a {
font-size: 14px;
text-align: center;
}

.host {
   color: #0070b6 !important;
}
/*---banner----*/
#divSmallBox {
   overflow: hidden;
   *display: inline;
   *zoom: 1;
   width: 10px;
   height: 10px;
   margin: 0 5px;
   border-radius: 10px;
   background: #ffffff;
}

#playBox {
   width: 1200px;
   height: 409px;
   margin: 0 auto;
   background: #333;
   position: relative;
   overflow: hidden;
}

#playBox .oUlplay {
   width: 99999px;
   position: absolute;
   left: 0;
   top: 0;
}

#playBox .oUlplay li {
float: left;
}

#playBox .pre {
   cursor: pointer;
   width: 45px;
   height: 45px;
   background: url(../images/l.png) no-repeat;
   position: absolute;
   top: 190px;
   left: 10px;
   z-index: 10;
}

......

3.JS

代码如下（节选示例）：

window.οnlοad=function(){$("#btnLocation").click(function(){if($('.store_Province').val()==""||$('.store_City').val()==""||$('.store_Area').val()==""){layer.msg("请选择省市区",{time:1500,icon:5});return;}
if($("#address").val()==""){layer.msg("请填写详细地址",{time:1500,icon:5});return;}
var address=$('.store_Province').find("option:selected").text()+$('.store_City').find("option:selected").text()+$('.store_Area').find("option:selected").text()+$("#address").val();setPlace(address);});$('.store_Area').change(function(obj){if($('.store_Province').val()==""||$('.store_City').val()==""||$('.store_Area').val()==""){alert("请选择省市区");return;}
$(".store_Lng").val("");$(".store_Lat").val("");earth();});function loadData(){}
function loadDefulatMap(callback){var point=new BMap.Point(116.404,39.915);map.centerAndZoom(point,15);map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.setCurrentCity("北京");callback();}
function earth(){var address=$('.store_Province').find("option:selected").text()+$('.store_City').find("option:selected").text()+$('.store_Area').find("option:selected").text();;if(address!=""){var city=$(".store_City").val();myGeo.getPoint(address,function(point){if(point){map.centerAndZoom(point,12);map.clearOverlays();}else{}},city);}}
function Autocomplete(){var ac=new BMap.Autocomplete({"input":"baiduAddress","location":map});ac.addEventListener("onhighlight",function(e){var str="";var _value=e.fromitem.value;var value="";if(e.fromitem.index>-1){value=_value.province+_value.city+_value.district+_value.street+_value.business;}
str="FromItem<br />index = "+e.fromitem.index+"<br />value = "+value;value="";if(e.toitem.index>-1){_value=e.toitem.value;value=_value.province+_value.city+_value.district+_value.street+_value.business;}
str+="<br />ToItem<br />index = "+e.toitem.index+"<br />value = "+value;$(".area_tip").innerHTML=str;});ac.addEventListener("onconfirm",function(e){var _value=e.item.value;var myValue=_value.street+_value.business;$(".area_tip").innerHTML="onconfirm<br />index = "+e.item.index+"<br />myValue = "+myValue;setPlace(myValue);})}
function clickCoordinate(e){var point=e.point;createMarker(point);}
function setPlace(value){function myFun(){if(local.getResults().getPoi(0)){var point=local.getResults().getPoi(0).point;createMarker(point);}else{alert("未搜索到结果，请重新输入");}}
var local=new BMap.LocalSearch(map,{onSearchComplete:myFun});local.search(value);}
var baiduParam={oldPoint:null,Exceed_Error:"定位地址失败，您搜索或定位超出县级范围，请重新选择定位",SelectRegion_Error:"定位地址失败，您搜索或定位超出县级范围，请先选择省市区",Location_Div:"<div id='descConten'>已将坐标定位为<hr/>{address}<br/><small style='color: #858585;line-height: 24px;'>地址：{title}</small><br/><br/><input type='button' value='确定' id='saveLngLat' style=' background: rgb(135,205,208);border: none;color: white;height: 30px;width: 60px;border-radius: 4px;' ></div> ",Location_Sure_Div:"<img style='width:20px;top: 5px;position: relative;' src='images/success.png' />已将坐标定位为<hr/>{address}<br/><small style='color: #858585;line-height: 24px;'>地址：{title}</small><br/><br/>"}
function createMarker(point,isLoad){myGeo.getLocation(point,function(rs){map.clearOverlays();var marker=new BMap.Marker(point);map.addOverlay(marker);marker.enableDragging();marker.addEventListener("dragstart",function(e){baiduParam.oldPoint=e.point;})
marker.addEventListener("dragend",function(e){createMarker(e.point);})
baiduParam.oldPoint=null;var html=baiduParam.Location_Div;if(isLoad==true){map.centerAndZoom(point,map.getZoom());html=baiduParam.Location_Sure_Div;}
if(map.getZoom()<18){map.setZoom(18);}

......