期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页
生活随笔
收集整理的這篇文章主要介紹了
期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
常見網(wǎng)頁設(shè)計作業(yè)題材有 個人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁設(shè)計題目, A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計需求都能滿足你的需求。原始HTML+CSS+JS頁面設(shè)計, web大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用。
?精彩專欄推薦👇🏻👇🏻👇🏻
? 【作者主頁——🔥獲取更多優(yōu)質(zhì)源碼】
? 【web前端期末大作業(yè)——🔥🔥畢設(shè)項目精品實戰(zhàn)案例(1000套)】
文章目錄🌰
- 一、網(wǎng)頁介紹📖
- 一、網(wǎng)頁效果🌌
- 二、代碼展示😈
- 1.HTML結(jié)構(gòu)代碼 🧱
- 2.CSS樣式代碼 🏠
- 三、個人總結(jié)😊
- 四、更多干貨🚀
一、網(wǎng)頁介紹📖
1 網(wǎng)頁簡介：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點。
一、網(wǎng)頁效果🌌
二、代碼展示😈
1.HTML結(jié)構(gòu)代碼 🧱
代碼如下（示例）：以下僅展示部分代碼供參考~
<!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">當(dāng)當(dāng)優(yōu)品</td><td align="center">數(shù)字館</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">數(shù)碼</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">數(shù)碼影音</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">[當(dāng)當(dāng)自營]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">詩蔓 【原創(chuàng)正品 獨家首發(fā)】專柜正品 純</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秒殺 天然紅檀木 佛珠手鏈?zhǔn)?span id="vt6mr5x" class="token tag"></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">歐炫 最愛四葉草奧地利元素 水晶材質(zhì)項</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 (?) 當(dāng)當(dāng)網(wǎng) 2004-2013，ALL Rights Reserved <img src="img/validate.gif" width="40" height="48" alt=""/> 京ICP證041189號 出版物經(jīng)營許可證 新出發(fā)京批字第直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>三、個人總結(jié)😊
一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定)
四、更多干貨🚀
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題😈歡迎一起交流學(xué)習(xí)🔥
總結(jié)
以上是生活随笔為你收集整理的期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： fpga开发教程 labview_Lab
- 下一篇： UG NX 12 草图环境中使用鼠标的说