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><!-- 廣告結束--> <!--Top開始--><div id="Top"><div class="banner"><a href="#"><img src="images/logo.png" /></a></div><!--search begin--><div class="search"><form><input type="text" class="txt"/><input type="submit" class="but" value=""/></form></div><!--search end--><div class="user"><!--用戶登錄前狀態<font><span class="iconfont"></span><a href="">登錄</a></font><font><span class="iconfont"></span><a href="">注冊</a></font>--><!--用戶登錄后狀態-->您好!wlm123,歡迎你回來 <a href="" class="usertxt">用戶中心</a>|<a href="" class="usertxt">退出</a><font><span class="iconfont"></span><a href="LoginAndRegister.html">加入購車</a></font></div></div><!--Top結束--> </div><!--網站導航開始 滾動到一定高,給他加上 class="gd"--> <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"><!--小圖展示 start--><div class="simg"><img src="images/xpic1.jpg" width="450" height="450" /><span class="move"></span><span class="shade"></span></div><!--小圖展示 end--><!--按扭 start--><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><!--按扭 end--><!--大圖 start--><div class="bimg"> <img src="images/xpic1.jpg" /></div><!--大圖 end--></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><!--1、在News大盒子里面,構建兩個一樣大小的長方形,一個用來設背景透明,一個利用絕定位,蓋在透明圖層上面,用來放內容2、利用 h3標簽來制作標題部分(顏色,大小,字體類型,豎直居中,首行縮進text-indent:20px;)3、利用 ul來制作新聞列表,文字豎直間距利用行高 line-height:30px; 給 ul添加對應的內邊距,使文字與上右下左產生一定的間距。4、給文字加上了 a標簽超鏈接,如何優化我們代碼,代碼的性能,如果把常用樣式,統一初始化,我們選擇的是用標簽來表達,而不是用 * --></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卡