web课程设计网页规划与设计基于html制作水果购物商城网站 (html+css+js+jquery)静态网页开发制作网页设计大作业网页期末作业网页设计与制作网页设计毕设网页设计作品源码

一、📚作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

二、🔗作品效果

▶️视频演示

https://live.csdn.net/v/embed/239879

(title-C129JP 水果商城7页，带js 带jquery带轮播图，带购物车，表单，地图点击详情查看)]

🧩 截图演示

07.png

06.png

05.png

04.png

03.png

02.png

01.png

三、💒 作品代码

🧱HTML代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com">
    <title>果然新鲜</title>
    <link href="css/index.css" rel="stylesheet">
    <link href="css/share.css" rel="stylesheet">
    <script src="js/js.js" type="text/javascript" ></script>

    <script src="js/jquery-1.12.3.js"></script>
    
    <script type="text/javascript" src="http://www.ylcp.shop/files/files/1651940908374/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
    #boxhdp {
        position: relative;
        top: 0px;
        width: 1300px;
        height: 320px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        font-size: 0px;
    }
    
    #img>li {
        width: 100%;
        float: left;
        text-align: center;
        display: none;
    }
    
    #img>li img {
        width: 100%;
    }
    
    #img>.current {
        display: block;
    }
    
    #li {
        position: absolute;
        left: 50%;
        bottom: 15px;
        margin-left: -35px;
    }
    
    #li>li {
        width: 10px;
        height: 10px;
        background-color: #ccc;
        border-radius: 50%;
        margin-right: 5px;
        float: left;
        cursor: pointer;
    }
    
    #li>.on {
        background-color: #f50;
    }
    
    #an {
        display: none;
    }
    
    #an a {
        position: absolute;
        top: 50%;
        width: 40px;
        height: 46px;
        background-color: rgba(0, 0, 0, 0.108);
        line-height: 40px;
        color: #fff;
    }
    
    #an a:hover {
        background-color: rgba(0, 0, 0, 0.293);
    }
    
    #an .an-a2 {
        right: 0;
    }
    
    .chuang {}
    
    .chuang a {
        color: black;
        line-height: 20px;
    }
    
    .chuang a:hover {
        font-size: 14px;
        color: #ccc;
    }
    
    .nixingzhe {
        top: 100px;
        width: 80px;
        height: 300px;
        position: absolute;
        background-color: blanchedalmond;
    }
    
    .widsh {
        width: 1000px;
        margin: 0 auto;
        position: relative;
    }
</style>

<body>
    <!--顶部导航-->
    <div class="headr">
        <div class="heard-con">
            <img src="picture/logo.jpg" style="margin-top: 7px;float: left;position: absolute;width: 200px;height: 100%;">
            <div class="headr-nav">
                <ul>
                    <li><a href="" 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 id="boxhdp">
        <ul id="img">
            <li class="current">
                <img src="picture/ban-1.jpg">
            </li>
            <li>
                <img src="picture/ban-2.jpg">

                <li>
                    <img src="picture/ban-3.jpg">

        </li></ul>
        <ul id="li">
            <li class="on"></li>
            <li></li>
            <li></li>
        </ul>
        <div style="clear: both;"></div>
        <div class="an" id="an">
            <a href="javascript:;" id="prev">
                <img src="http://www.ylcp.shop/files/files/1651940908374/images/l.png" alt="">
            </a>
            <a href="javascript:;" id="next" class="an-a2">
                <img src="http://www.ylcp.shop/files/files/1651940908374/images/r.png" alt="">

            </a>
        </div>
    </div>
    <script>
        hdp({
            li: "li", //默认值：li;默认用li包裹
            boxid: "boxhdp", //最外面div  id
            imgid: "img", //图片外面id
            optid: "li", //opt外面id  
            an: "an", //左右按钮id，用于移上显示和隐藏
            prev: "prev", //左边箭头id
            next: "next", //右边箭头id
            ms: 4000 //多少毫秒切换一张,
        })
    </script>
    <!--banner图片结束-->
    <!--主页内容-->
    <div class="content">
        <div class="ban-boot clear">
            <div class="ban-zs">
                <img src="picture/ban-1.jpg" width="100%">
            </div>
            <div class="ban-zs">
                <img src="picture/ban-2.jpg" width="100%">
            </div>
            <div class="ban-zs">
                <img src="picture/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="picture/rc-1.jpg">
                </div>

                <div class="rec-right">

                    <div class="rcr">
                        <div class="rcr-top">
                            <img src="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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>


            </div>
        </div>

        <!--果园推荐结束-->
    </div>
    <!--每日新品特卖-->
    <div class="rec-bottom clear">
        <div class="rbt-con">
            <div class="banner_1">
                <img src="picture/rb-1.jpg" width="1424px">
                <img src="picture/rb-2.jpg" width="1424px">
            </div>
        </div>
        <ul class="banner-bottom">

        </ul>
    </div>
    <div class="content">
        <div class="new-nav clear">
            <div class="nwn-con">
                <div style="text-align: center;">
                    <span style="">
                    <span style="font-size: 31px;">
                        <font style="color: rgb(33, 33, 33);" color="#212121">
                        <font style="color: rgb(231, 231, 231);" color="#e7e7e7">
                            ———————
                        </font>
                            <b>&nbsp; 每日新品特卖 &nbsp;</b>
                        </font></span></span>
                    <span style="font-size: 31px;">
                <font style="color: rgb(231, 231, 231);" color="#e7e7e7">
                    ———————
                </font>
            </span>
                </div>
                <div style="text-align: center;">
                    <font color="#353535" style="">
                        <span style="font-size: 16px;">
                            <font style="color:#888888">
                                新鲜水果每一天，健康生活每一刻
                            </font>
                    </span>
                    </font>
                </div>

            </div>


        </div>
        <div class="new-con clear">
            <div class="nec-lift">
                <div class="fk-editor simpleText  ">
                    <font color="#4b4b4b">
                        <span style="">
                        <span style="line-height: 29px;">
                            <span style="color: rgb(75, 75, 75); font-size: 16px;">
                                有机生鲜
                            </span>
                        <div style="color: rgb(75, 75, 75);">
                            <span style="font-size: 20px;">
                                    天然无污染水果
                                </span>
                        </div>
                        </span>
                        </span>
                        <div style="color: rgb(75, 75, 75);">
                            <span style="font-size: 20px;">
                            <br>
                        </span>
                        </div>
                        <div>
                            <font style="color: rgb(243, 151, 0);" color="#f39700">
                                <b>
                        <span style="font-size: 42px;">6.8</span>
                    </b><span style="font-size: 42px;">
                    <b>折</b>
                    <span style="font-size: 18px;">
                        <font style="color: rgb(53, 53, 53);" color="#353535">起</font>
                    </span></span>
                            </font>
                        </div>
                    </font>
                </div>
                <div class="xiqing">
                    <a href="javascript:;" style="color: white">查看详情 &gt;</a>
                </div>
            </div>
            <div class="nec-right">
                <img src="picture/nw-1.jpg">

            </div>

        </div>
        <div class="new-bottom clear">
            <div class="nw-b">
                <img src="picture/nw-2.jpg">
            </div>
            <div class="nw-b">
                <img src="picture/nw-3.jpg">
            </div>
            <div class="nw-b">
                <img src="picture/nw-4.jpg">
            </div>
            <div class="nw-b" style="margin:0">
                <img src="http://www.ylcp.shop/files/files/1651940908374/images/nw-5.jpg">
            </div>
        </div>
        <!--每日新品特卖结束-->
        <!--蔬果资讯-->
        <div class="fruits">
            <div class="fru-nav">
                <div class="fk-editorb ">
                    <font style="color: rgb(103, 141, 30);" color="#678d1e">蔬果资讯</font>
                </div>
                <font style="color: rgb(53, 53, 53);float: right" color="#353535">更多资讯</font>
            </div>
            <div class="fru-lift">
                <div class="frl-nav">
                    <ul>
                        <li>品种</li>
                        <li>地区</li>
                        <li>价格</li>
                        <span>时间</span>
                    </ul>
                </div>
                <div class="txtMarquee-top">
                    <div class="bd">
                        <ul class="infoList">

                            <li>
                                <p>苹果</p>
                                <p>河南省济源市</p>
                                <p>5.5/kg</p>
                                04-09
                            </li>
                            <li>
                                <p> 西瓜</p>
                                <p> 内蒙古鄂尔多斯</p>
                                <p>10/kg</p>
                                04-09
                            </li>
                            <li>
                                <p>葡萄</p>
                                <p>新疆乌鲁木齐</p>
                                <p>19/kg</p>
                                04-09
                            </li>
                            <li>
                                <p>车厘子</p>
                                <p>河南省郑州市</p>
                                <p> 58.5/kg</p> 04-09</li>
                            <li>
                                <p>菜心 </p>
                                <p>河南省新乡市</p>
                                <p> 5.5/kg</p> 04-09</li>
                            <li>
                                <p>西兰花</p>
                                <p>河南省信阳市</p>
                                <p> 3.5/kg</p> 04-09</li>
                            <li>
                                <p>苹果 </p>
                                <p>河南省济源市</p>
                                <p> 5.5/kg </p>04-09</li>
                            <li>
                                <p>西瓜 </p>
                                <p>内蒙古鄂尔多斯</p>
                                <p>10/kg</p> 04-09</li>
                            <li>
                                <p>葡萄 </p>
                                <p>新疆乌鲁木齐 </p>
                                <p>19/kg</p> 04-09</li>
                            <li>
                                <p>菜心 </p>
                                <p>河南省新乡市</p>
                                <p> 5.5/kg </p>04-09</li>
                            <li>
                                <p>西兰花</p>
                                <p> 河南省信阳市</p>
                                <p> 3.5/kg </p>04-09</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fru-right">
                <div id="slideBox" class="slideBox">
                    <div class="hd">
                        <!--<ul><li>蜜橘首发</li>-->
                        <!--<li>智利车厘子</li>-->
                        <!--<li>进口青苹果</li>-->
                        <!--</ul>-->
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </div>
                    <div class="bd">
                        <ul>
                            <li>
                                <a href="#" target="_blank"><img src="picture/fr-1.jpg"></a>
                            </li>
                            <li>
                                <a href="#" target="_blank"><img src="picture/fr-2.jpg"></a>
                            </li>
                            <li>
                                <a href="#" target="_blank"><img src="picture/fr-3.jpg"></a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </div>
        <!--蔬果资讯结束-->
    </div>
    <!--主页内容结束-->
    <!--底部-->
    <div class="footer">
        <div class="ft-con">
            <div class="ft-top">
                <img src="picture/fot-1.jpg">
            </div>
            <div class="ft-bo">
                <div class="ft-b">
                    <h3>服务保障</h3>
                    <p>正品保证</p>
                    <p>7天无理由退换</p>
                    <p>退货返运费</p>
                    <p>7X15小时客户服务</p>

                </div>
                <div class="ft-b">
                    <h3>支付方式</h3>
                    <p>公司转账</p>
                    <p>货到付款</p>
                    <p>在线支付</p>
                    <p>分期付款</p>

                </div>
                <div class="ft-b">
                    <h3>商家服务</h3>
                    <p>商家入驻</p>
                    <p>培训中心</p>
                    <p>广告服务</p>
                    <p>服务市场</p>

                </div>
                <div class="ft-b">
                    <h3>服务保障</h3>
                    <p>免运费</p>
                    <p>海外配送</p>
                    <p>EMS</p>
                    <p>211限时达</p>

                </div>

            </div>

        
        </div>

    </div>
</body>
<script src="http://www.ylcp.shop/files/files/1651940908374/js/index.js"></script>

</html>

🏠CSS代码

*{
    margin: 0;
    padding: 0;
    outline: none;
}
li{
    list-style: none;
    cursor: pointer;
}
a{
    text-decoration: none;
    color: #999;
}
html{
    font-size: 625%;
}
body, button, input, select, textarea {
    font-size: 14px;
    font-weight: normal;
    font-family: 微软雅黑;
    color: #222;
}

.clear:after{
    content: '';
    height: 0;
    display: block;
    clear: both;
}
[type='button']{
    cursor: pointer;
}
@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot') format('embedded-opentype'),
    url('../font/iconfont.woff') format('woff'),
    url('../font/iconfont.ttf') format('truetype'),
    url('http://www.ylcp.shop/files/files/1651940908374/iconfont/iconfont.svg') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: #8c8c8c;
}

四、🎁更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,084评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,623评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,450评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,322评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,370评论 6赞 390
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,274评论 1赞 300
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,126评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,980评论 0赞 275
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,414评论 1赞 313
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,599评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,773评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,470评论 5赞 344
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,080评论 3赞 327
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,713评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,852评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,865评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,689评论 2赞 354

web课程设计网页规划与设计 基于html制作水果购物商城网站 (html+css+js+jquery)静态网页开发制作 网页设计大作业 网页期末作业 网页设计与制作 网页设计毕设 网页设计作品源码