HTML靜态網頁作業html+css+javascript+jquery水果商城7頁

常見網頁設計作業題材有個人、美食、公司、學校、旅遊、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、服裝、體育、化妝品、物流、環保、書籍、婚紗、遊戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他等網頁設計題目, A+水準作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網頁設計作業源碼，畫面精明，排版整潔，内容豐富，主題鮮明，非常适合初學者學習使用。

文章目錄🌰

一、網頁介紹📖
一、網頁效果🌌
二、代碼展示😈

1.HTML結構代碼 🧱
2.js代碼 🏠

三、個人總結😊
四、更多幹貨🚀

一、網頁介紹📖

1 網頁簡介：此作品為學生個人首頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水準, 非常适合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟體進行運作及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、滑鼠滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視訊、音頻元素、Flash，同時設計了Logo（源檔案）所需的知識點。

一、網頁效果🌌

HTML靜态網頁作業html+css+javascript+jquery水果商城7頁

二、代碼展示😈

1.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>  每日新品特賣  </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">檢視詳情 ">></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>

2.js代碼 🏠

//擷取id，tagName
function getIdName(id, tagName) {

    if (tagName != 0) {
        return document.getElementById(id).getElementsByTagName(tagName);
    } else {
        return document.getElementById(id);
    }
}

function hdp(json) {
    var tiemr = null;
    var pd = 0;
    var index = 0;
    var that;
    var option = {
        li: "li", //預設值：預設用li包裹
        boxid: "", //最外面div  id
        imgid: "", //圖檔外面id
        optid: "", //opt外面id    
        an: "", //左右按鈕id，用于移上顯示和隐藏
        prev: "", //左邊箭頭id
        next: "", //右邊箭頭id
        ms: 1500 //多少毫秒切換一張
    }
    for (var i in option) {
        if (json[i] != undefined) {
            option[i] = json[i];
        }
    }

    var div = getIdName(option.boxid, 0);
    var imgs = getIdName(option.imgid, option.li);
    var lis = getIdName(option.optid, option.li);
    var an = getIdName(option.an, 0);
    var prev = getIdName(option.prev, 0);
    var next = getIdName(option.next, 0);
    var ms = option.ms;

    function lbt(that) {
        if (that >= 0) {
            index = that;
        } else {
            if (pd == 0) {
                index++;
            } else {
                index--;
                pd = 0;
            }
        }
        if (index >= lis.length) index = 0;
        if (index < 0) index = lis.length - 1;
        for (var j = 0; j < lis.length; j++) {
            lis[j].className = "";
            imgs[j].className = "";
        }
        lis[index].className = "on";
        imgs[index].className = "current";
    }
    imgs[index].className = "current";
    lis[index].className = "on";
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function() {
            that = this.index;
            lbt(that);
        }
    }
    timer = setInterval(lbt, ms);


    div.onmouseover = function() {
        clearInterval(timer);
        an.style.display = "block";
    }
    div.onmouseout = function() {
        timer = setInterval(lbt, ms);
        an.style.display = "none";
    }
    prev.onclick = function() {
        pd = 1;
        lbt();
    }
    next.onclick = function() {
        pd = 0;
        lbt();
    }
}

三、個人總結😊

一套合格的網頁應該包含(具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
菜單美觀、醒目，二級菜單可正常彈出與跳轉；
要有JS特效，如定時切換和手動切換圖檔新聞；
頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
頁面清爽、美觀、大方，不雷同。
網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

四、更多幹貨🚀

1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，

請 “👍點贊” “✍️評論” “💙收藏”

一鍵三連哦！

❤️【關注我| 擷取更多源碼 | 優質文章】

帶您學習各種前端插件、3D炫酷效果、圖檔展示、文字效果、以及整站模闆、大學生畢業HTML模闆、期末大作業模闆、等! 「在這裡有好多前端開發者，一起探讨前端 Node 知識，互相學習」！

HTML靜态網頁作業html+css+javascript+jquery水果商城7頁

文章目錄🌰

一、網頁介紹📖

一、網頁效果🌌

二、代碼展示😈

1.HTML結構代碼 🧱

2.js代碼 🏠

三、個人總結😊

四、更多幹貨🚀

繼續閱讀

Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動

HTML addEventListener() 方法和attachEvent()差別分析

web前端布局練手項目

Django之驗證碼（十七）驗證碼

Vue項目 - 單檔案元件和Vue中的路由

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden