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

javascript

大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript)

發布時間：2023/12/18 javascript 36 豆豆

生活随笔收集整理的這篇文章主要介紹了大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML網頁設計期末課程大作業~~仿品優購頁面制作(HTML+CSS+JavaScript)

關于HTML期末網頁制作，大作業A+水平 ~仿品優購網頁作業HTML+CSS+JavaScript實現，共有登錄 /注冊首頁商品列表商品詳情等4頁面!

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

此次課程設計的題目是網頁規劃與設計(html+css+js+image)確定每個頁面將使用的頁面布局技術(如結合使用CSS及表格、DIV、框架等技術)，完成各頁面的布局設計。

作品演示

1.品優購首頁

2.登錄/注冊

3.商品列表

4.商品詳情

代碼實現 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>列表頁-手機頁面！</title><meta name="description" content="品優購JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" /><meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,品優購" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css"> </head><body><div class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您！ </li><li> <a href="#">請登錄</a><a href="#" class="style-red">免費注冊</a></li></ul></div><div class="fr"><ul><li><a href="#">我的訂單</a></li><li class="spacer"></li><li><a href="#">我的品優購</a><i class="icomoon">?</i></li><li class="spacer"></li><li><a href="#">品優購會員</a></li><li class="spacer"></li><li><a href="#">企業采購</a></li><li class="spacer"></li><li><a href="#">關注品優購</a> <i class="icomoon">?</i></li><li class="spacer"></li><li><a href="#">客戶服務</a> <i class="icomoon">?</i></li><li class="spacer"></li><li><a href="#">網站導航</a> <i class="icomoon">?</i></li></ul></div></div></div><div class="header w"><div class="logo"><h1><a href="index.html" title="品優購">品優購</a></h1></div><div class="sk"><img src="upload/sk.png" alt=""></div><div class="search"><input type="text" class="text" value="請搜索內容..."><button class="btn">搜索</button></div><div class="hotwrods"><a href="#" class="style-red">優惠購首發</a><a href="#">億元優惠</a><a href="#">9.9元團購</a><a href="#">美滿99減30</a><a href="#">辦公用品</a><a href="#">電腦</a><a href="#">通信</a> </div><div class="shopcar"><i class="car">? </i>我的購物車 <i class="arrow"> ? </i> <i class="count">80</i></div></div><div class="nav"><div class="w"><div class="sk_list fl"><ul><li><a href="#">品優秒殺</a></li><li><a href="">即將售罄</a></li><li><a href="">超值低價</a></li></ul></div><div class="sk_con fl"><ul><li><a href="#">女裝</a></li><li><a href="#" class="style-red">女鞋</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><a href="#">運動戶外</a></li><li><a href="#">更多分類?</a></li></ul></div></div></div><div class="sk_container w"><div class="sk_hd"><img src="upload/bg_03.png" alt=""></div><div class="sk_bd clearfix"><ul><li class="sk_goods"><a href="detail.html"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5></a><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li><li class="sk_goods"><img src="upload/mobile.jpg" alt=""><h5 class="sk_goods_title">Apple蘋果iPhone 6s Plus(A1699)32G 金色移動聯通電信4G手機</h5><p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p><div class="sk_goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="sk_goods_buy">立即搶購</a></li></ul></div><div class="page"><span class="page_num"><a href="#" class="pn_prev"><<上一頁 </a><a href="#">1</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#" class="dotted">...</a><a href="#" class="pn_next">下一頁>></a></span><span class="page_skip">共10頁到第<input type="text">頁<button>確定</button></span></div></div><div class="footer"><div class="w"><div class="mod_service"><ul><li><i class="mod-service-icon mod_service_zheng"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_kuai"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li><li><i class="mod-service-icon mod_service_bao"></i><div class="mod_service_tit"><h5>正品保障</h5><p>正品保障，提供發票</p></div></li> </ul></div><div class="mod_help"><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item"><dt>購物指南</dt><dd> <a href="#">購物流程 </a></dd><dd> <a href="#">會員介紹 </a></dd><dd> <a href="#">生活旅行/團購 </a></dd><dd> <a href="#">常見問題 </a></dd><dd> <a href="#">大家電 </a></dd><dd> <a href="#">聯系客服 </a></dd></dl><dl class="mod_help_item mod_help_app"><dt>幫助中心</dt><dd> <img src="upload/erweima.png" alt=""><p>品優購客戶端</p></dd> </dl></div><div class="mod_copyright"><p class="mod_copyright_links">關于我們 | 聯系我們 | 聯系客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 | 品優購社區 | 品優購公益 | English Site | Contact U</p><p class="mod_copyright_info">地址：北京市昌平區建材城西路金燕龍辦公樓一層郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br>京ICP備08001421號京公網安備110108007702</p></div></div></div></body> </html>

做好的網頁效果,如何通過發鏈接給別人看?

1.1解決部署上線~> 部署上線工具(永久免費使用)

1.不需要買服務器就能部署線上,全世界都能訪問你的連接啦, 這里給大家推薦一個程序員必備神器~
插件集成了超級多好用的插件，免費下載安裝，簡單易懂, 簡直神器 ~ 需要可在文章 ↓ 下方公Z號獲取

2.就是把你的代碼效果做好了以后, 部署到線上, 把鏈接發給別人, 就可以讓對方通過你的連接點擊進去, 就能看到你的網頁效果啦, 電腦端和手機端都可以噢! (不然別人看你的網頁都要發文件過去,體驗感不太好哦~)

1.1部署流程

1.2 哇~ 部署成功

哇~ 部署成功! 將你寫好的頁面部署上線后, 全世界的人都可以通過鏈接訪問到你的網頁了(永久免費使用哦)~

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

適合入門到高級的童鞋們入手~送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)

更多表白源碼

?100款表白源碼演示地址

總結

以上是生活随笔為你收集整理的大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： springmvc ResponseEn
下一篇： gradle idea java ssm