當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)

發布時間：2024/3/7 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML期末大作業~節日禮品購物商城網站html模板(HTML+CSS+JavaScript)

臨近期末, 你還在為HTML網頁設計結課作業,老師的作業要求感到頭大？HTML網頁作業無從下手？網頁要求的總數量太多？沒有合適的模板？等等一系列問題。你想要解決的問題，在這篇博文中基本都能滿足你的需求~

原始HTML+CSS+JS頁面設計, web大學生網頁設計作業源碼，~這是一個不錯的網頁制作，畫面精明，非常適合初學者學習使用。

作品介紹

紅色實用的禮品網商城網頁、節日禮品購物網站、通用的禮品網商城模板html下載。主要有：登錄、注冊、禮品詳情頁、禮品列表頁、收貨人信息、訂單詳情頁、支付完成等商城網頁模板。

此作品為學生個人主頁網頁設計題材，代碼為簡單學生水平 html+css 布局制作，作品下載后可使用任意HTML編輯軟件(例如：DW、HBuilder、NotePAD, Vscode 所有編輯器均可使用)

網頁作品布局方面：網頁布局整體為LOGO、導航、輪播圖、主體內容布局。子頁面多種布局，興趣愛好內容使用圖片列表布局，成績頁面插入了表格，聯系我們使用圖片對齊方式設置了左對齊。

網頁作品技術方面：使用CSS制作了網頁背景圖、鼠標經過及選中導航變色效果、下劃線等。首頁制作了留言表單，同時簡單使用JavaScript制作了表單判斷(提交時表單不能為空)
空)

文章目錄

HTML期末大作業~節日禮品購物商城網站html模板(HTML+CSS+JavaScript)
作品介紹
一、作品演示
- - 1.首頁
  - 2. 登錄/注冊
  - 3. 商品詳情
  - 4. 購物車
  - 5.訂單詳情
  - 6. 配送地址
二、代碼目錄
三、代碼實現
四、前端 `零基礎入門到高級 `(視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
六、更多HTML期末大作業文章
七、更多表白源碼

一、作品演示

1.首頁

2. 登錄/注冊

3. 商品詳情

4. 購物車

5.訂單詳情

6. 配送地址

二、代碼目錄

三、代碼實現 <!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Author" content="清心老師"><meta name="Keywords" content="ecshop商城開發"><meta name="Description" content="一個月打造商城-清心主講"><title>Ecshop商城開發詳情頁--清心老師</title><link type="text/css" rel="stylesheet" href="css/basic.css"><link type="text/css" rel="stylesheet" href="css/web.css"></head><body><div id="TopMain"><div id="topAdv"> <a href="#"> <img src="images/adv.jpg" /> </a> <img src="images/close.png" class="close"/></div> <div id="Top"><div class="banner"><a href="#"><img src="images/logo.png" /></a></div><div class="search"><form><input type="text" class="txt"/><input type="submit" class="but" value=""/></form></div><div class="user">您好！wlm123,歡迎你回來 <a href="" class="usertxt">用戶中心</a>｜<a href="" class="usertxt">退出</a><font><span class="iconfont"></span><a href="LoginAndRegister.html">加入購車</a></font></div></div> </div> <div id="Logo" ><ul><li class="first"><span class="iconfont"></span>全部商品分類</li><li><a href="index.html" target="_blank">首頁</a></li><li><a href="Product.html" target="_blank">節日禮物</a></li><li><a href="">生日禮物</a></li><li><a href="">蛋糕</a></li><li><a href="">商務禮物</a></li><li><a href="">個性定制</a></li><li><a href="">鮮花</a></li><li class="last"></li></ul> </div>  <div class="webLogo">當前位置: <a href="">首頁</a> > <a href="">手機類型</a> > <a href="">3G手機</a> > KD876 </div>  <div id="webCon"><div class="web_ProductImg"><div id="box"><div class="simg"><img src="images/xpic1.jpg" width="450" height="450" /><span class="move"></span><span class="shade"></span></div><div class="but"><img src="images/xpic1.jpg" width="60" class="active" dataSrc="images/xpic1.jpg"/><img src="images/xpic2.jpg" width="60" dataSrc="images/xpic2.jpg" /><img src="images/xpic3.jpg" width="60" dataSrc="images/xpic3.jpg" /></div><div class="bimg"> <img src="images/xpic1.jpg" /></div></div></div><div class="web_ProductXq"><ul><li class="title"> 深層水潤+逆天美白，一套全部搞定，24小時水潤透白！韓束墨菊深度</li><li class="two"><p>商品貨號：ECS000000</p><p>庫存：30個</p></li><li class="two"><p>商品品牌：蘋果</p><p>商品重量：30個</p></li><li class="bor"><p>市場價格：市場價格：￥1666元本店售價：￥1388元注冊用戶：￥1388元</p></li><li class="yh"><h3>購買商品達到以下數量區間時可享受的優惠價格：</h3><p class="ti"> <span>數量</span> <span>優惠價格</span> </p><p class="ti money"> <span>3</span> <span>3600</span> </p><p class="ti money"> <span>5</span> <span>5000</span> </p><p class="allmoney"> 商品總價格:<font>3600</font></p></li><li class="two"><p>購買數量 <input type="text" class="txt"/></p><p>購買此商品可獲得積分：119 </p></li><li><p class="sx">顏色：<span> 紅色</span> <span> 黃色</span></p><p class="sx">顏色：<span> 紅色</span> <span> 黃色</span></p></li><li class="but"><a href="dd.html"><img src="images/Webcar.png" /></a><a href=""><img src="images/Websc.png" /></a></li></ul></div> </div> <div id="IntroProduct"><p class="ti">推薦產品</p><ul><li><a href="#"><img src="images/dg_img2.jpg" width="220px" height="220" /></a><p><a href="#">創意節能小夜燈LED聲控</a></p><P class="money"><font>￥19.9</font> <span>389人購買</span></p></li> <li><a href="#"><img src="images/dg_img3.jpg" width="220px" height="220" /></a><p><a href="#">創意節能小夜燈LED聲控</a></p><P class="money"><font>￥19.9</font> <span>389人購買</span></p></li> <li><a href="#"><img src="images/dg_img1.jpg" width="220px" height="220" /></a><p><a href="#">創意節能小夜燈LED聲控</a></p><P class="money"><font>￥19.9</font> <span>389人購買</span></p></li> <li><a href="#"><img src="images/dg_img2.jpg" width="220px" height="220" /></a><p><a href="#">創意節能小夜燈LED聲控</a></p><P class="money"><font>￥19.9</font> <span>389人購買</span></p></li> </ul> </div>  <div id="ProductInfo"><ul class="sel"><li class="active">商品描述<span></span></li><li>商品屬性 <span></span></li><li>用戶評論<span></span></li><li>商品購買記錄<span></span></li></ul><div id="ProductSelect"><div class="selCon" style="display:block;">商品描述</div><div class="selCon">商品屬性</div><div class="selCon">用戶評論</div><div class="selCon">商品購買記錄</div></div></div>  <img src="images/f.jpg" class="fbg"/> <div id="Footer2"><dl class="first"><dt><a href="#">關于我們</a></dt><dd><a href="#">誠聘英才</a></dd><dd><a href="#">品牌入駐</a></dd><dd><a href="#">友情鏈接</a></dd></dl><dl><dt><a href="#">關于我們</a></dt><dd><a href="#">誠聘英才</a></dd><dd><a href="#">品牌入駐</a></dd><dd><a href="#">友情鏈接</a></dd></dl><dl><dt>關于我們</dt><dd>誠聘英才</dd><dd>品牌入駐</dd><dd>友情鏈接</dd></dl><dl><dt>關于我們</dt><dd>誠聘英才</dd><dd>品牌入駐</dd><dd>友情鏈接</dd></dl><dl><dt>關于我們</dt><dd>誠聘英才</dd><dd>品牌入駐</dd><dd>友情鏈接</dd></dl><dl><dt>關于我們</dt><dd>誠聘英才</dd><dd>品牌入駐</dd><dd>友情鏈接</dd></dl><dl class="last"><dt>客服在線</dt><dd>4006-600-000</dd><dd><img src="images/QQ.jpg" /></dd></dl><div style="clear:both"></div> </div><p class="Copy">Copyright ? 2013-2015 www.tanzhouedu.com All Rights Reserved 版權所有：湖南潭州教育咨詢有限公司備案號：備13016338號</p> <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(".but img").mouseover(function(){//鼠標滑動到對圖片按扭，圖片加上紅色邊框，其它去掉邊框$(this).addClass("active").siblings("img").removeClass("active"); var bimg=$(this).attr("dataSrc");//獲取小圖片按扭對應的大圖片地址$(".simg img,.bimg img").attr("src",bimg); //給小圖片和大圖展示賦值 });//鼠標滑動到遮罩層上.shade 時，的操作$("#box .simg .shade").hover(function(){$(".simg span.move,.bimg").show(); //小滑塊和大圖展示顯示},function(){$(".simg span.move,.bimg").hide();//小滑塊和大圖展示隱藏});//當鼠標在遮罩層上.shade 移動時，動態來獲取小滑塊的位置$("#box .simg .shade").mousemove(function(e){var x=e.clientX; //鼠標與瀏覽器窗口左邊距離var y=e.clientY+$(window).scrollTop(); //鼠標與瀏覽器窗口上面距離var l=$(this).offset().left; //獲取.shade與瀏覽器窗口左邊距離var t=$(this).offset().top; //獲取 .shade 與瀏覽器窗口上邊距離var w=$(".simg span.move").width()/2; //獲取小滑塊寬度的一半var h=$(".simg span.move").height()/2; //獲取小滑塊高度的一半var _left=x-l-w; //小滑塊與 .shade 左邊的距離var _top=y-t-h; //小滑塊與 .shade 上面的距離var bigW=$("#box .simg .shade").width()-w*2-2; //滑塊能滑動的最大寬度var bigH=$("#box .simg .shade").height()-h*2-2; //滑塊能滑動的最大高度//document.title=_left+"="+_top;//通過_top判斷，小滑塊在豎直方向不能移出去 if(_top<0){_top=0; }else if(_top>bigH){_top=bigH;}//通_left值判斷，小滑塊在水平方向不能移出去if(_left<0){_left=0;}else if(_left>bigW){_left=bigW;}//給小滑塊賦值 top left$(".simg span.move").css({"left":_left,"top":_top});//獲以滑塊滑動的寬度和高度的比例var wbl=_left/bigW; //滑動寬度和最大滑動的寬度比例var hbl=_top/bigH; //滑動高度和最大滑動的高度比例//document.title=wbl;var bigLeft=($(".bimg img").width()-$(".bimg").width())*wbl; //大圖向左移動距離var bigTop=($(".bimg img").height()-$(".bimg").height())*hbl; //大圖向上移動距離$(".bimg img").css({"left":-bigLeft,"top":-bigTop}); //動態給大圖賦值});</script><script type="text/javascript"> //選項卡效果 $("#ProductInfo ul.sel li").mouseover(function(){var _index=$(this).index();$(this).addClass("active").siblings("li").removeClass("active");$("#ProductSelect .selCon").eq(_index).show().siblings("div").hide();});</script></body> </html>

四、前端零基礎入門到高級(視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)

適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

# 五、源碼獲取 ? ~ 關注我，點贊博文~ 每天帶你漲知識!

?1.看到這里了就 [點贊+好評+收藏] 三連支持下吧，你的「點贊，好評，收藏」是我創作的動力。

? 2.關注我~ 每天帶你學習 :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

?3.以上內容技術相關問題可以相互學習，可關注↓公Z號獲取更多源碼 !

六、更多HTML期末大作業文章

1.HTML期末學生結課大作業~html+css+javascript仿叮當電影在線網站(功能齊全)

2.HTML期末學生作業~html+css+javascript仿貓眼電影在線網站(功能齊全)

3.HTML期末學生大作業(9套)html+css+javascript仿京東、天貓、服裝、各大電商模板(大學畢業設計)

4.HTML期末大作業~海賊王中喬巴專題漫畫學生網頁設置作業源碼(HTML+CSS+JavaScript)

5.HTML期末大作業~基于HTML+CSS+JavaScript的旅游網站設計與實現

6.HTML網頁設計期末課程大作業~仿騰訊游戲官網設計與實現(HTML+CSS+JavaScript)

7.HTML期末大作業~仿小米商城網頁設計模板(HTML+CSS+JavaScript)

8.HTML期末大作業~餐飲文化學生網頁設計作業(HTML+CSS+JavaScript)

9.HTML學生網頁設計作業~餐飲美食漢堡企業網站6頁面帶輪播(HTML+CSS+JavaScript)

10.大學web基礎期末大作業~仿品優購頁面制作(HTML+CSS+JavaScript)

11.HTML網頁設計制作大作業-制作漫畫網頁設計6個頁面(HTML+CSS+JavaScript)

12.web前端大一實訓~制作卡布漫畫網站設計與實現(HTML+CSS+JavaScript)

13.web網頁設計期末課程大作業~超高仿英雄聯盟LOL游戲官網設計與實現(HTML+CSS+JavaScript)

14.HTML期末大作業~酒店網站模板(HTML+CSS+JavaScript)

15.HTML學生網頁設計作業源碼~開心旅游網站設計與實現(HTML期末大作業)

16.HTML奧運網頁5頁面文化 ~ 體育學生網頁設計作業

17.HTML我的家鄉杭州網頁設計作業源碼(div+css)

18.HTML網頁設計期末課程大作業~動漫櫻桃小丸子5頁表格div+css學生網頁設計作業源碼

19.HTML學生網頁設計作業成品~化妝品官方網站設計與實現(HTML+CSS+JS)共8個頁面

20.HTML大學生動漫網頁設計作業源碼 ~ 火影忍者動漫7頁面帶特效帶輪播(HTML+CSS+JavaScript)

21.一套完整仿拉勾網HTML靜態網頁模板(含38個獨立HTML)

22.HTML期末作業課程設計大作業~環境保護學生網頁設計作業源碼(HTML+CSS)

23 Web大學生網頁作業成品~美食餐飲網站設計與實現(HTML+CSS+JavaScript)

24.HTML期末大作業~綠色農產品食品類網站設計與實現(HTML+CSS+JavaScript)

25.HTML期末大作業~花店鮮花商城網站模板設計與實現(HTML+CSS+JavaScript)

26.HTML期末大作業~大學生旅游官網設計作業成品(HTML+CSS+JavaScript)

27.HTML期末大作業 ~ 馬爾代夫旅游網頁設計作業成品

28.HTML期末大作業~我的家鄉(洛陽城)旅游網頁設計作業成品(HTML+CSS+JavaScript)

29.HTML期末大作業 ~ 鳳陽旅游網頁設計作業成品(HTML+CSS+JavaScript)

30.HTML期末大作業 ~ 鳳陽智慧旅游官方旗艦店(我的家鄉)(HTML+CSS+JavaScript)

31.HTML期末大作業課程設計~仿陰陽師游戲官網首頁html模板(HTML+CSS)

32.HTML期末大作業課程設計動漫主題html5網頁~奇恩動漫首頁html模板(HTML+CSS)

33.HTML期末大作業課程設計~動漫游戲官網10個頁面(HTML+CSS+JavaScript)

34.個人設計web前端大作業~響應式游戲網站源碼(HTML+CSS+Bootstrap)

35.HTML期末大作業~個人圖片資源網頁設計共5個頁面(HTML+CSS+JavaScript)

36.web課程設計網頁規劃與設計~在線閱讀小說網頁共6個頁面(HTML+CSS+JavaScript+Bootstrap)

37.HTML期末大作業~清新手工肥皂網站展示4個頁面(HTML+CSS+JavaScript+Bootstrap)

38.學生HTML個人網頁作業作品~蛋糕甜品店鋪共11個頁面(HTML+CSS+JavaScript)

39.HTML期末大作業~棋牌游戲靜態網站(6個頁面) HTML+CSS+JavaScript

40.HTML期末大作業~速鮮站餐飲食品html網頁(共6個頁面)HTML+CSS+JavaScript

41.HTML網頁設計結課作業~仿小米商城網站純HTML模板源碼(8個頁面)(HTML+CSS)

42.HTML網頁設計結課大作業~仿凡客服裝商城主頁純HTML模板源碼(HTML+CSS+JS)

43.HTML網頁設計結課作業~仿蘑菇街商城網站源碼(HTML+CSS+JS)

44.web課程設計網頁規劃與設計~時尚服裝購物商城模板html源碼(HTML+CSS+JS)

[45.web網頁設計期末課程大作業~粉色的服裝購物商城頁面模板(HTML+CSS+JS)])(https://blog.csdn.net/ruan365392777/article/details/118406804)

七、更多表白源碼

?100款表白源碼演示地址

總結

以上是生活随笔為你收集整理的HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：高级过程控制系统实验装置
下一篇：让Android应用程序支持安装到SD卡