目录
一、前言
水果商城网页设计实例，应用html+css+js，适用于农副产品、水果等商城网页设计、大学生网页课程作业设计等，供大家参考。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>果然新鲜</title>
<link href="css/index.css"rel="stylesheet">
<link href="css/share.css"rel="stylesheet">
<script src="js/jquery-1.12.3.js"></script>
</script><script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<!--顶部导航-->
<div class="headr">
<div class="heard-con">
<img src="images/logo.jpg" style="margin-top: 7px;float: left;position: absolute">
<div class="headr-nav">
<ul>
<li><a href="index.html"style="color: #4AB344"><span style="color: #4AB344">首页</span></a> </li>
<li><a href="hot.html">蔬果热卖</a> </li>
<li><a href="produ.html">全部产品</a> </li>
<li><a href="consult.html">最新资讯</a></li>
<li><a href="touch.html">联系我们</a> </li>
</ul>
<div class="sptopfoot">
<div class="spbottom" >
</div>
</div>
</div>
<div class="headr-right">
<i class="iconfont" style="font-size: 16px;margin-right: 10px"></i>
我的购物车 ∨
<div class="hr-car">
<i class="iconfont"style="font-size: 40px;margin-right: 10px"></i>
您的购物车内暂时没有任何产品。
</div>
</div>
</div>
</div>
<!--顶部导航结束-->
<!--banner图片-->
<div class="her-banner">
</div>
<!--banner图片结束-->
<!--主页内容-->
<div class="content">
<div class="ban-boot clear">
<div class="ban-zs">
<img src="images/ban-1.jpg" width="100%">
</div>
<div class="ban-zs">
<img src="images/ban-2.jpg" width="100%">
</div>
<div class="ban-zs">
<img src="images/ban-3.jpg" width="100%">
</div>
</div>
<!--果园推荐开始-->
<div class="recommand clear">
<div class="rec-nav clear">
<h2>果园推荐 <span>RECOMMAND</span></h2>
</div>
<div class="rec-cont clear">
<div class="rec-left">
<img src="images/rc-1.jpg">
</div>
<div class="rec-right">
<div class="rcr">
<div class="rcr-top">
<img src="images/rc-2.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
南非进口黄柠檬 6个装
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">29
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy" href="orange.html">
<span style="color: white;">购买</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="images/rc-3.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
智利进口新鲜蓝莓 4盒
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">99
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">购买</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="images/rc-4.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
美国进口红啤梨 6个
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">48
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">购买</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="images/rc-5.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
美国进口无籽红提 1kg
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">39
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">购买</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="images/rc-6.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
国产绿奇异果 16颗
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">49
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">购买</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="images/rc-2.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
浙江涌泉蜜桔无核桔子5斤
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">39
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">购买</span>
</a>
</div>
</div>
</div>
</div>
......
2.CSS
代码如下（节选示例）：
/*顶部导航*/
.headr{
width: 100%;
height: 107px;
}
.heard-con{
position: relative;
width: 1200px;
margin: 0 auto;
height: 107px;
}
.headr-nav{
float: left;
position: absolute;
width: 600px;
height: 107px;
left: 25%;
}
.headr-nav li{
float: left;
width: 90px;
height: 50px;
line-height: 50px;
text-align: center;
margin-left: 20px;
font-size: 16px;
margin-top: 25px;
}
.headr-nav li a{
color: #222222;
}
.sptopfoot {
clear: both;
background:#ffffff;
height: 2px;
position: relative;
}
.spbottom {
background:#4AB344;
height: 2px;
width:90px;
position: absolute;
top: 0;
left: 20px;
overflow: hidden;
transition: all 1s;
}
.headr-right{
position: relative;
float: right;
width: 154px;
height:42px;
margin-top: 30px;
text-align: center;
line-height: 42px;
overflow: hidden;
border: 1px solid #E6E6E6;
}
.hr-car{
position: absolute;
width: 300px;
height: 140px;
right:-1px;
line-height: 140px;
background-color: white;
color: #c6c6c6;
border: 1px solid #E6E6E6;
}
/*顶部导航结束*/
.her-banner{
width: 100%;
height: 550px;
overflow: hidden;
margin: 0px auto;
background-image:url("../images/banner.jpg");
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
}
/*主页内容*/
.content{
position: relative;
width: 1200px;
margin: 0 auto;
}
.ban-boot{
float: left;
margin-top: 60px;
width: 100%;
height: 196px;
}
.ban-zs{
left: 3px;
width: 390px;
height: 196px;
float: left;
margin: 0 5px;
}
/*果园推荐开始*/
.recommand{
float: left;
width: 100%;
}
.rec-nav{
float: left;
margin-top: 60px;
width: 100%;
left: -1px;
height: 48px;
line-height: 48px;
background: url("../images/rec-n.jpg");
color: #48900F;
border-bottom: 1px solid #48900F;
}
.rec-nav span{
font-size: 12px;
margin-left: 10px;
color:#999999 ;
}
.rec-cont{
float: left;
width:100%;
height: 660px;
margin-top: 40px;
}
.rec-left{
float: left;
width: 320px;
height: 660px;
}
.rec-right{
float: left;
width:880px;
height: 660px;
}
.rcr{
float: left;
width: 270px;
height: 330px;
margin-left: 23px;
}
.rcr-top{
width: 260px;
height: 200px;
margin-left: 10px;
transition: all 0.5s;
}
.rcr-bot {
width: 260px;
height: 130px;
margin: 0 5px;
}
.rb-top{
width: 260px;
height: 30px;
text-align: center;
font-size: 16px;
border-bottom:1px dashed #999999;
}
.second_P{
padding-top: 15px;
width: 260px;
height: 20px;
text-align:center;
}
.fk-prop,.fk-prop-p{
font-size: 12px;
color: #4AB344;
}
.fk-prop-price{
color: #4AB344;
font-size: 18px;
}
.second_Marketprice {
color: #767676;
font-size: 12px;
text-decoration: line-through;
}
.buy{
float: left;
width: 100%;
margin-top: 15px;
height: 33px;
line-height: 33px;
text-align: center;
}
.second_mallBuy{
display: inline-block;
height: 33px;
width: 80%;
line-height: 33px;
border-radius: 3px;
text-decoration: none;
text-align: center;
padding: 0;
......
3.JS
代码如下（节选示例）：
/**
* Created by Administrator on 2017/5/11.
*/
//顶部导航
var navarr=['20px','130px','240px','350px','460px']
$('.headr-nav li').mouseover(function(){
$('.headr-nav li a').eq($(this).index('li')).css('color','#4AB344')
$('.spbottom:eq(0)').css('left',navarr[$(this).index()])
}).mouseout(function(){
$('.headr-nav li a').eq($(this).index('li')).css('color','')
$('.spbottom:eq(0)').css('left','20px')
})
$('.headr-right:eq(0)').mouseover(function(){
$(this).css('overflow','visible')
}).mouseout(function(){
$(this).css('overflow','hidden')
})
//顶部导航结束
$('.coll').mousemove(function(){
$('.coll').eq($(this).index('.coll')).css('color','#4AB344')
}).mouseout(function(){
$('.coll').eq($(this).index('.coll')).css('color','#666')
})
$('.coll:eq(1)').mouseover(function(){
$(this).css({'overflow':'visible','border':'1px solid #D1D1D1'})
}).mouseout(function(){
$(this).css({'overflow':'hidden','border':'1px solid #ffffff'})
})
$('.nt').mousemove(function(){
$('.nt').eq($(this).index('.nt')).css('color','#4AB344')
}).mouseout(function(){
$('.nt').eq($(this).index('.nt')).css('color','#666')
})
$('.webSiteQrCode:eq(0)').mouseover(function(){
$(this).css('overflow','visible')
}).mouseout(function(){
$(this).css('overflow','hidden')
})
var ainp =document.getElementsByClassName('f-countBtn')
var sel =document.getElementsByClassName('g_itext')[0]
ainp[0].onclick = function () {
var num1=parseInt(sel.value)
num1= num1 + 1
ainp[1].disabled =false;
ainp[1].style.cursor = 'auto';
sel.value=num1
};
ainp[1].onclick = function () {
var num1=parseInt(sel.value)
num1= num1 - 1
if(num1 < 1){
num1 = 1;
this.disabled = true;
this.style.cursor ='not-allowed'
}
sel.value=num1
}
//切换菜单
$('.hd li').click(function(){
$('.bd1').css('display','none')
$('.hd li').removeClass('active')
$('.hd1').removeClass('acti')
$('.bd1 ').eq($(this).index()).css('display','block')
$('.hd li').eq($(this).index()).addClass('active')
$('.hd1').eq($(this).index()).addClass('acti')
})
var navarrl=['70px','130px']
$('.lhd li').click(function(){
$('.lbd1').css('display','none')
$('.lhd li').removeClass('active')
$('.lbd1 ').eq($(this).index()).css('display','block')
$('.lhd li').eq($(this).index()).addClass('active')
$('.lhdbottom:eq(0)').css('left',navarrl[$(this).index()])
})
//弹窗
$('.buttn').click(function(){
$('.popup:eq(0)').css('display','block')
})
$('.del:eq(0)').click(function(){
$('.popup:eq(0)').css('display','none')
})
......
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。