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

HTML

HTML5期末大作业：体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作业成品学校篮足球网页制作模板学生简单体育运动网站设计成品

發布時間：2023/12/10 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5期末大作业：体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作业成品学校篮足球网页制作模板学生简单体育运动网站设计成品小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5期末大作業：體育主題網站設計——足球(9頁) HTML+CSS+JavaScrip校園籃球網頁作業成品學校籃足球網頁制作模板學生簡單體育運動網站設計成品

常見網頁設計作業題材有個人、美食、公司、學校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、明星、服裝、體育、化妝品、物流、環保、書籍、婚紗、軍事、游戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!

作品介紹

1.網頁作品簡介 ：HTML期末大學生網頁設計作業 A+水平 ,喜歡的可以下載，文章頁支持手機PC響應式布局。

2.網頁作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網頁）。

3.網頁作品技術：Div+CSS、鼠標滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視頻、音頻元素、Flash，同時設計了logo（源文件），基本期末作業所需的知識點全覆蓋。

文章目錄

HTML5期末大作業：體育主題網站設計——足球(9頁) HTML+CSS+JavaScrip校園籃球網頁作業成品學?；@足球網頁制作模板學生簡單體育運動網站設計成品
作品介紹
一、作品展示
二、文件目錄
三、代碼實現
四、學習資料
五、??????? 👇🏻👇🏻👇🏻更多源碼👇🏻👇🏻👇🏻

一、作品展示

二、文件目錄

三、代碼實現

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/Home.css" rel="stylesheet" type="text/css" /> <link href="css/common/head.css" rel="stylesheet" type="text/css" /> <link href="css/common/foot.css" rel="stylesheet" type="text/css" /><script type='text/javascript' src="Js/head.js"></script><script type="text/javascript" src="Js/ThemeFocus/jquery-1.9.1.min.js"></script><script type="text/javascript" src="Js/ThemeFocus/jquery.nav.js"></script><script type="text/javascript" src="Js/DestinationSearch/citySelector.js"></script> <script type="text/javascript" src="Js/My97DatePicker/WdatePicker.js"></script> </head><body><div id="container"><div id="nav"><div class="logo"> <img src="Common/images/logo.png" width="120" height="80" border="0"/> </div><td class="tdborder"><span class="province">河北</span></td><td class="tdborder"><ul><li><a href="#">承德</a></li><li><a href="#">秦皇島</a></li><li><a href="#">張家口</a></li></ul></td></tr><tr><td class="tdborder"><span class="province">西北</span></td><td class="tdborder"><ul><li><a href="#">蘭州</a></li></ul></td></tr><tr><td class="tdborder"><span class="province">內蒙古</span></td><td class="tdborder"><ul><li><a href="#">呼倫貝爾</a></li><li><a href="#">滿洲里</a></li></ul></td></tr></table></div><ul id="dropmenu2" class="dropMenu"><li><a href="#">相約海島</a></li><li><a href="Theme/SpecialTopic.html" target="_blank">海濱漫步</a></li><li><a href="#">休閑時光</a></li><li><a href="#">極致體驗</a></li><li><a href="#">賞花踏青</a></li></ul><ul id="dropmenu3" class="dropMenu"><li><a href="#">浪漫之旅</a></li><li><a href="#">家庭出游</a></li><li><a href="#">朋友聚會</a></li></ul><script type="text/javascript">cssdropdown.startchrome("navMenu")</script> <div id="focus"><div id="inner"><div class="hot-event"><div class="link"><a href="#">手機客戶端</a><a href="#">在線客服</a><a href="Account/Register.html" target="_blank">注冊</a><a href="Account/Login.html" target="_blank">登錄</a></div><div class="searching"><table><tr height="40"><td align="right" width="100"><span class="q1">目的地</span> </td><td width="20"> </td><td width="258" align="left"><div class="selectBox2"><div class="textbg"><input type="text" class="cityinput" id="citySelect1" value="城市名" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;"></div></div> </td></tr><tr height="40"><td align="right"><span class="q1">入住日期</span> </td><td width="20"> </td><td valign="middle"><div class="textbg"><input name="text2" type="text" class="Wdate" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;" onclick="WdatePicker()" /></div></td></tr><tr height="40"><td align="right"><span class="q1">退房日期</span> </td><td width="20"> </td><td><div class="textbg"><input name="text2" type="text" class="Wdate" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;" onclick="WdatePicker()" /></div> </td></tr><tr height="40"><td align="right"><span class="q1">臥室數</span> </td><td width="20"> </td><td class="nubroom"><a href="#" class="nubroom1">一室</a><a href="#" class="nubroom2">二室</a><a href="#" class="nubroom3">三室</a><a href="#" class="nubroom4">不限</a> </td></tr><tr align="center" height="50"><td colspan="3"><input type="submit" value="搜索" id="btn" /></td></tr></table></div><div class="switch-nav"><a href="#" onclick="return false;" class="prev"><i class="ico i-prev"></i><span class="hide-clip">上一個</span></a><a href="#" onclick="return false;" class="next"><i class="ico i-next"></i><span class="hide-clip">下一個</span></a></div><div class="event-item" style="display: block;"><span class="event-item" style="display: block;"><a href="#" class="banner"><img src="Images/focus/banner01.jpg" class="photo" style="width: 960px; height: 350px;" /></a></span></div><div class="event-item" style="display: none;"><a href="#" class="banner"><img src="Images/focus/banner02.jpg" class="photo" style="width: 960px; height: 350px;"/></a></div><div class="event-item" style="display: none;"><a href="#" class="banner"><img src="Images/focus/banner03.jpg" class="photo" style="width: 960px; height: 350px;" /></a></div><div class="event-item" style="display: none;"><a href="#" class="banner"><img src="Images/focus/banner04.jpg" class="photo" style="width: 960px; height: 350px;" /></a></div><div class="event-item" style="display: none;"><a href="#" class="banner"><img src="Images/focus/banner05.jpg" class="photo" style="width: 960px; height: 350px;" /></a></div><div class="switch-tab"><a href="#" onclick="return false;" class="current">1</a><a href="#" onclick="return false;">2</a><a href="#" onclick="return false;">3</a><a href="#" onclick="return false;">4</a><a href="#" onclick="return false;">5</a></div></div></div><script type="text/javascript">$('#inner').nav({ t: 3000, a: 1000 });</script></div><div id="hotcity"><div class="title"><span class="titlename1">熱門城市</span></div><div class="hotcityleft"><div class="map"><img src="Images/map.jpg" width="470" height="380" border="0"/></div><div class="Topcity"><span class="topct">Top城市：</span>1.<a href="#">青島 </a>2.<a href="#">北京 </a>4.<a href="#">上海 </a>5.<a href="#">成都 </a>6.<a href="#">杭州 </a>7.<a href="#">大連 </a>8.<a href="#">廣州 </a>9.<a href="#">深圳 </a>10.<a href="#">南京 </a></div></div><div class="citydetial"><div class="citydetialimg"><a href="#"><img src="Images/citydetial/citydetial01.jpg" width="150" height="100" border="0"/></a></div><div class="textdetail"><p><a href="#" class="cityname">上海</a>,是在中國江南傳統文化（吳文化）的基礎上，與開埠后傳入的對上海影響深遠的歐美文化等融合而逐步形成，既古老又現代，既傳統又時尚，區別于中國文化，具有開放而又自成一體的獨特風格。<a href="#" class="readdetail">查看更多>></a></p></div><div class="attraction"><a href="#">徐家匯</a><a href="#">陸家嘴</a><a href="#">中山公園</a><a href="#">人民廣場</a></div><div class="clear"></div><div class="attentionrate"><span class="textatnrate">房屋關注率排行：</span><table><tr height="30"><td width="20">1.</td><td><a href="#">都是家園圣天地標準大...</a></td><td width="120"><span class="city-nubroom">1室1廳</span></td><td width="30"><a href="#">評論</a></td></tr><tr height="30"><td width="20">2.</td><td width="160"><a href="#">徽苑酒店公寓外灘店家...</a></td><td width="120"><span class="city-nubroom">1室1廳1衛</span></td><td><a href="#">評論</a></td></tr><tr height="30"><td width="20">3.</td><td><a href="#">品尊名致豪華復式房</a></td><td width="120"><span class="city-nubroom">3室1廳1衛1廚</span></td><td><a href="#">評論</a></td></tr><tr height="30"><td width="20">4.</td><td><a href="#">新港灣酒店公寓普通大...</a></td><td width="120"><span class="city-nubroom">2室1廳1衛</span></td><td><a href="#">評論</a></td></tr><tr height="30"><td width="20">5.</td><td><a href="#">新港灣酒店公寓普通標...</a></td><td width="120"><span class="city-nubroom">1室1廳1衛</span></td><td><a href="#">評論</a></td></tr></table></div></div></div><div id="recommend"><div class="title"><span class="titlename2">特色推薦</span></div><div class="rmdcity"><a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity01.jpg" width="234" height="160" border="0"/></a><a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity03.jpg" width="234" height="160" border="0"/></a><a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity02.jpg" width="234" height="160" border="0"/></a><a href="#"><img src="Images/rmdcity/rmdcity04.jpg" width="234" height="160" border="0"/></a> </div></div><div id="slogan"><div id="slogan1"><div class="sloganimg"><a href="#"><img src="Images/sloganimg1.jpg" width="40" height="40" border="0"/></a></div><div class="textslogan"><a href="#">100%真實房源</a><p>專業驗證員實地驗真，確保每一套房屋真實有效。</p></div></div><div id="slogan1"><div class="sloganimg"><a href="#"><img src="Images/sloganimg2.jpg" width="40" height="40" border="0"/></a></div><div class="textslogan"><a href="#">特色房屋，性價比高</a><p>配備家電，可洗衣做飯的一居、多居房全面滿足各種需求。</p></div></div><div id="slogan1"><div class="sloganimg"><a href="#"><img src="Images/sloganimg3.jpg" width="40" height="40" border="0" /></a></div><div class="textslogan"><a href="#">到店無房，賠付首晚</a><p>預訂成功到店無房賠付首晚房費，1000萬保障基金先行賠付。</p></div></div><div id="slogan2"><div class="sloganimg"><a href="#"><img src="Images/sloganimg4.jpg" width="40" height="40" border="0"/></a></div><div class="textslogan"><a href="#">7×24小時服務專線</a><p>400客服專線隨時解答處理任何問題。</p></div></div></div> <div id="foot"><a href="#">關于我們 |</a><a href="#">業務介紹 |</a><a href="#">加入天堂鳥 |</a><a href="#">幫助中心 |</a><a href="#">網站地圖</a><p>@ Copyright 2013 tiantangniao.com 天堂鳥版權所有不得轉載</p><p>京ICP備11043397號</p></div></div><script type="text/javascript">var test=new Vcity.CitySelector({input:'citySelect'});var test2=new Vcity.CitySelector({input:'citySelect1'});</script> </body> </html>

四、學習資料

web前端零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

五、??????? 👇🏻👇🏻👇🏻更多源碼👇🏻👇🏻👇🏻

總結

以上是生活随笔為你收集整理的HTML5期末大作业：体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作业成品学校篮足球网页制作模板学生简单体育运动网站设计成品的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： linux搭建虚拟化平台报告,部署KVM
下一篇： java mask_Java 三大属性：

HTML

HTML5期末大作业：体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作业成品 学校篮足球网页制作模板 学生简单体育运动网站设计成品

HTML5期末大作業：體育主題網站設計——足球(9頁) HTML+CSS+JavaScrip校園籃球網頁作業成品 學校籃足球網頁制作模板 學生簡單體育運動網站設計成品