web课程设计网页规划与设计基于html制作水果购物商城网站 (html+css+js+jquery)

最新推荐文章于 2024-06-23 10:07:21 发布

web网站建设

最新推荐文章于 2024-06-23 10:07:21 发布

阅读量974

点赞数 5

分类专栏：网页设计与制作文章标签： css javascript html web 网页设计

本文链接：https://blog.csdn.net/qq_38512571/article/details/127191371

版权

网页设计与制作专栏收录该内容

1187 篇文章 97 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

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

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱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;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web网站建设

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
3
评论
web课程设计网页规划与设计基于html制作水果购物商城网站 (html+css+js+jquery)

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫