期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页
生活随笔
收集整理的這篇文章主要介紹了
期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
常見網頁設計作業題材有 個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 游戲、 節日、 戒煙、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網頁設計作業源碼，畫面精明，排版整潔，內容豐富，主題鮮明，非常適合初學者學習使用。
?精彩專欄推薦👇🏻👇🏻👇🏻
? 【作者主頁——🔥獲取更多優質源碼】
? 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】
文章目錄🌰
- 一、網頁介紹📖
- 一、網頁效果🌌
- 二、代碼展示😈
- 1.HTML結構代碼 🧱
- 2.CSS樣式代碼 🏠
- 三、個人總結😊
- 四、更多干貨🚀
一、網頁介紹📖
1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設計了Logo（源文件）所需的知識點。
一、網頁效果🌌
二、代碼展示😈
1.HTML結構代碼 🧱
代碼如下（示例）：以下僅展示部分代碼供參考~
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title></head><body><div id="dangdang"><div id="logo"><div id="logo_left"><a href="#"><img src="img/logo.svg" width="158" height="75"></a></div><div id="logo_right"><table width="100%" border="0"><tr><td height="30" align="center">尾品會</td><td align="center">當當優品</td><td align="center">數字館</td><td align="center">都看閱讀</td></tr> </table> </div></div><div id="daohang"><table width="100%" border="0"><tr><td width="6%" height="34" align="center" valign="middle"><a href="#" class="white">首頁</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">圖書</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">音像</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">童裝</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">服裝</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">鞋靴</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">運動</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">箱包</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">美妝</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">珠寶</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">家居</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">食品</a></td><td width="5%" align="center" valign="middle"><a href="#" class="white">酒</a></td><td width="5%" align="center" valign="middle"><a href="#" class="white">手機</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">數碼</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">電腦</a></td><td width="6%" align="center" valign="middle"><a href="#" class="white">家電</a></td></tr> </table> </div><div id="toutu"><img src="img/banner.jpg" width="960" height="130"></div><div id="main"><div id="m_left"><div id="l_up"><div id="title_up"> 分類瀏覽</div><div id="body_up"> ? <a href="#" class="black">數碼影音</a><br> ? <a href="#" class="black">家居裝飾</a><br> ? <a href="#" class="black">母嬰用品</a><br> ? <a href="#" class="black">美妝個護</a><br> ? <a href="#" class="black">食品保健</a><br> ? <a href="#" class="black">潮流服裝</a><br> ? <a href="#" class="black">家具裝飾</a><br> ? <a href="#" class="black">手表飾品</a><br> ? <a href="#" class="black">鞋包皮具</a><br> ? <a href="#" class="black">家用電器</a><br> ? <a href="#" class="black">電腦辦公</a><br> ? <a href="#" class="black">玩具文具</a><br> ? <a href="#" class="black">汽車用品</a><br> ? <a href="#" class="black">手機通訊</a><br> ? <a href="#" class="black">流行飾品</a><br> </div></div><div id="l_down"><div id="title_down"> 推薦榜單</div><div id="body_down"> ? <a href="#" class="black">圖書暢銷榜</a><br> ? <a href="#" class="black">音樂暢銷榜</a><br> ? 影視暢銷榜<a href="#" class="black"></a><br> ? <a href="#" class="black">百貨暢銷榜</a><br> ? <a href="#" class="black">圖書飆升榜</a><br> ? <a href="#" class="black">新書熱賣榜</a><br></div></div></div><div id="m-ringht"><div id="fenlan"><div id="biaoti"><table width="100%" border="0"><div id="w123_123"><div id="img"><a href="#"><img src="img/home-5.jpg" width="120" height="120" border="0"></a></div><div id="div40"><img src="img/item_5.gif" width="40" height="40"></div></div><div id="wenzi"><table width="100%" border="0"><tr><td class="ablue"><a href="#" class="bluea">[當當自營]LOCK&LOCK樂扣 水杯</a></td></tr><tr><td class="a_huise">￥149.00</td></tr><tr><td height="26" class="a_red">￥89.00</td></tr></table></div></div></div><div id="fenlan"><div id="biaoti"><table width="100%" border="0"><tr><td width="6%" height="40" align="right" valign="middle"> <img src="img/titleDot.jpg" alt="" width="28" height="21"></td><td width="94%" valign="middle">流行飾品 </td></tr></table></div><div id="w145_210"><div id="w123_123"><div id="img"><a href="#"><img src="img/beauty-1.jpg" width="120" height="120" border="0"></a></div><div id="div40"><img src="img/item_1.gif" width="40" height="40"></div></div><div id="wenzi"><table width="100%" border="0"><tr><td class="ablue"><a href="#" class="bluea">詩蔓 【原創正品 獨家首發】專柜正品 純</a></td></tr><tr><td class="a_huise">￥568.00</td></tr><tr><td height="26" class="a_red">￥128.00</td></tr></table></div></div><div id="w145_210"><div id="w123_123"><div id="img"><a href="#"><img src="img/beauty-2.jpg" width="120" height="120" border="0"></a></div><div id="div40"><img src="img/item_2.gif" width="40" height="40"></div></div><div id="wenzi"><table width="100%" border="0"><tr><td class="ablue"><a href="#" class="bluea">鼎順 29.9秒殺 天然紅檀木 佛珠手鏈手</a></td></tr><tr><td class="a_huise">￥99.00</td></tr><tr><td height="26" class="a_red">￥29.00</td></tr></table></div></div><div id="w145_210"><div id="w123_123"><div id="img"><a href="#"><img src="img/beauty-3.jpg" width="120" height="120" border="0"></a></div><div id="div40"><img src="img/item_3.gif" width="40" height="40"></div></div><div id="wenzi"><table width="100%" border="0"><tr><td class="ablue"><a href="#" class="bluea">KASSIA卡希雅正品 9-10mm天然珍珠項鏈</a></td></tr><tr><td class="a_huise">￥1280.00</td></tr><tr><td height="26" class="a_red">￥258.00</td></tr></table></div></div><div id="w145_210"><div id="w123_123"><div id="img"><a href="#"><img src="img/beauty-4.jpg" width="120" height="120" border="0"></a></div><div id="div40"><img src="img/item_4.gif" width="40" height="40"></div></div><div id="wenzi"><table width="100%" border="0"><tr><td class="ablue"><a href="#" class="bluea">歐炫 最愛四葉草奧地利元素 水晶材質項</a></td></tr><tr><td class="a_huise">￥299.00<br></td></tr><tr><td height="26" class="a_red">￥68.00</td></tr></table></div></div><div id="w145_210"><div id="w123_123"><div id="img"><a href="#"><img src="img/beauty-5.jpg" width="120" height="120" border="0"></a></div><div id="div40"><img src="img/item_5.gif" width="40" height="40"></div></div><div id="wenzi"><table width="100%" border="0"><tr><td class="ablue"><a href="#" class="bluea">鳳凰涅磐項鏈 女 手鏈 天然水晶干青手串</a></td></tr><tr><td class="a_huise">￥398.00</td></tr><tr><td height="26" class="a_red">￥198.00<br></td></tr></table></div></div></div></div></div><div id="down"><table width="100%" border="0"><tr><td align="center">Copyright (?) 當當網 2004-2013，ALL Rights Reserved <img src="img/validate.gif" width="40" height="48" alt=""/> 京ICP證041189號 出版物經營許可證 新出發京批字第直0673號</td></tr></table> </div></div> </body> </html>2.CSS樣式代碼 🏠
<style type="text/css"> #dangdang {position: absolute;width: 100%;height: 1216px;z-index: 1;left: 0px;top: 0px; } #dangdang #logo {height: 85px;width: 960px;margin-right: auto;margin-left: auto;padding-top: 10px; } #dangdang #logo #logo_right {float: right;height: 33px;width: 253px;margin-top: 50px;background-color: #eafffa;border: 1px solid #bfebe0;font-family: "微軟雅黑";font-size: 12px;color: #666; } #dangdang #daohang {height: 37px;width: 960px;margin-right: auto;margin-left: auto;margin-top: 2px;font-size: 13px;color: #FFF;background-image: url(img/menuBg.jpg); } #dangdang #logo #logo_left {float: left;height: 75px;width: 158px; }#dangdang #toutu {height: 130px;width: 960px;margin-right: auto;margin-left: auto;margin-top: 10px; } #dangdang #main {height: 860px;width: 960px;margin-top: 8px;margin-right: auto;margin-left: auto;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #a8a8a8; } #dangdang #main #m_left {float: left;height: 620px;width: 183px; } #dangdang #main #m_left #l_up {height: 413px;line-height:25px;border: 2px solid #c68400; } #dangdang #main #m_left #l_up #title_up {background-image: url(img/navTitleBg.jpg);height: 25px;font-family: "微軟雅黑";font-size: 14px;color: #FFF;font-weight: bold; } #dangdang #main #m_left #l_up #body_up {height: 388px;font-family: "微軟雅黑";font-size: 12px;color: #78766a;background-color: #fcf9ea; } #dangdang #main #m_left #l_down {height: 182px;line-height:25px;border: 2px solid #c68400;margin-top: 15px; } #dangdang #main #m_left #l_down #title_down {background-image: url(img/navTitleBg.jpg);height: 25px;font-family: "微軟雅黑";font-size: 14px;color: #FFF;font-weight: bold; } #dangdang #main #m_left #l_down #body_down {height: 157px;font-family: "微軟雅黑";font-size: 12px;color: #78766a;background-color: #fcf9ea; } #dangdang #main #m-ringht {width: 775px;float: left;margin-left: 2px;height: 790px; } #dangdang #main #m-ringht #fenlan {height: 270px; } #dangdang #main #m-ringht #fenlan #biaoti {height: 42px;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #ca8000;font-family: "微軟雅黑";color: #d98433; } #dangdang #main #m-ringht #fenlan #w145_210 {height: 220px;width: 145px;margin-left: 8px;float: left; } #dangdang #main #m-ringht #fenlan #w145_210 #w123_123 {height: 123px;width: 123px;margin-left: 12px;margin-top: 9px;border: 1px solid #a5a5a5; } #dangdang #main #m-ringht #fenlan #w145_210 #wenzi {height: 75px;margin-top: 4px; } #dangdang #main #m-ringht #fenlan #w145_210 #w123_123 #img {height: 123px;width: 123px;float: left;margin-top: 0px; } #dangdang #main #m-ringht #fenlan #w145_210 #w123_123 #div40 {height: 40px;width: 40px;float: left;margin-top: -123px;margin-left: 0px;z-index: 5; } .ablue {font-family: "微軟雅黑";font-size: 12px;color: #155cb4; } .a_huise {font-family: "微軟雅黑";color: #958a88;font-size: 13px;text-decoration: line-through; } .a_red {font-family: "微軟雅黑";color: #bf0100;font-size: 14px;font-weight: bolder; } #dangdang #down {height: 60px;width: 960px;margin-top: 5px;margin-right: auto;margin-left: auto;color: #BFBFBF;font-family: "微軟雅黑";font-size: 13px; } a.white:link {color: #FFF;text-decoration: none; } a.white:visited {text-decoration: none;color: #FFF; } a.white:hover {text-decoration: none;color: #000000; } a.white:active {text-decoration: none; } a.black:link {color: #847f83;text-decoration: none; } a.black:visited {text-decoration: none;color: #847f83; } a.black:hover {text-decoration: none;color: #f75e00; } a.black:active {text-decoration: none; } a.bluea:link {color: #155cb4;text-decoration: none; } a.bluea:visited {text-decoration: none;color: #155cb4; } a.bluea:hover {text-decoration: none;color: #f75e00; } a.bluea:active {text-decoration: none; } </style>三、個人總結😊
一套合格的網頁應該包含(具體可根據個人要求而定)
四、更多干貨🚀
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習🔥
總結
以上是生活随笔為你收集整理的期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： fpga开发教程 labview_Lab
- 下一篇： HTML当当图书馆作业介绍