HTML5期末大作业:体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作业成品 学校篮足球网页制作模板 学生简单体育运动网站设计成品
HTML5期末大作業(yè):體育主題網(wǎng)站設(shè)計(jì)——足球(9頁(yè)) HTML+CSS+JavaScrip校園籃球網(wǎng)頁(yè)作業(yè)成品 學(xué)校籃足球網(wǎng)頁(yè)制作模板 學(xué)生簡(jiǎn)單體育運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)成品
常見(jiàn)網(wǎng)頁(yè)設(shè)計(jì)作業(yè)題材有 個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書(shū)籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車(chē)、 其他 等網(wǎng)頁(yè)設(shè)計(jì)題目, A+水平作業(yè), 可滿(mǎn)足大學(xué)生網(wǎng)頁(yè)大作業(yè)網(wǎng)頁(yè)設(shè)計(jì)需求, 喜歡的可以下載!
作品介紹
1.網(wǎng)頁(yè)作品簡(jiǎn)介 :HTML期末大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè) A+水平 ,喜歡的可以下載,文章頁(yè)支持手機(jī)PC響應(yīng)式布局。
2.網(wǎng)頁(yè)作品編輯:作品下載后可使用任意HTML編輯軟件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網(wǎng)頁(yè))。
3.網(wǎng)頁(yè)作品技術(shù):Div+CSS、鼠標(biāo)滑過(guò)特效、Table、導(dǎo)航欄效果、banner、表單、二級(jí)三級(jí)頁(yè)面等,視頻、 音頻元素 、Flash,同時(shí)設(shè)計(jì)了logo(源文件),基本期末作業(yè)所需的知識(shí)點(diǎn)全覆蓋。
文章目錄
- HTML5期末大作業(yè):體育主題網(wǎng)站設(shè)計(jì)——足球(9頁(yè)) HTML+CSS+JavaScrip校園籃球網(wǎng)頁(yè)作業(yè)成品 學(xué)校籃足球網(wǎng)頁(yè)制作模板 學(xué)生簡(jiǎn)單體育運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)成品
- 作品介紹
- 一、作品展示
- 二、文件目錄
- 三、代碼實(shí)現(xiàn)
- 四、學(xué)習(xí)資料
- 五、??????? 👇🏻👇🏻👇🏻更多源碼👇🏻👇🏻👇🏻
一、作品展示
二、文件目錄
三、代碼實(shí)現(xiàn)
<!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"><!--top 整個(gè)頭部--><div id="nav"><!--logo--><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">內(nèi)蒙古</span></td><td class="tdborder"><ul><li><a href="#">呼倫貝爾</a></li><li><a href="#">滿(mǎn)洲里</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="#">休閑時(shí)光</a></li><li><a href="#">極致體驗(yàn)</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="#">朋友聚會(huì)</a></li></ul><script type="text/javascript">cssdropdown.startchrome("navMenu")</script> <!--top 頭部結(jié)束--><!--banner焦點(diǎn)圖內(nèi)部--><div id="focus"><div id="inner"><div class="hot-event"><!--登錄注冊(cè)行--><div class="link"><a href="#">手機(jī)客戶(hù)端</a><a href="#">在線(xiàn)客服</a><!-- <a href="UserInfo/OrderList.html">我的天堂鳥(niǎo)</a>--><a href="Account/Register.html" target="_blank">注冊(cè)</a><a href="Account/Login.html" target="_blank">登錄</a><!--<a href="../index.html">退出</a><div class="username"><a href="UserInfo/OrderList.html">187****9013</a><span>您好,</span></div>--></div><!--浮動(dòng)在焦點(diǎn)圖上的搜索--><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"><!--加一個(gè)背景圖片--><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">臥室數(shù)</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">上一個(gè)</span></a><a href="#" onclick="return false;" class="next"><i class="ico i-next"></i><span class="hide-clip">下一個(gè)</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><!--banner焦點(diǎn)圖內(nèi)部結(jié)束--><!--熱門(mén)城市--><div id="hotcity"><!--標(biāo)題欄--><div class="title"><span class="titlename1">熱門(mén)城市</span></div><!--熱門(mén)城市左側(cè)--><div class="hotcityleft"><!--map地圖--><div class="map"><img src="Images/map.jpg" width="470" height="380" border="0"/></div><!--top城市--><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><!--map地圖右側(cè)--><div class="citydetial"><!--城市圖片--><div class="citydetialimg"><a href="#"><img src="Images/citydetial/citydetial01.jpg" width="150" height="100" border="0"/></a></div><!--城市簡(jiǎn)介--><div class="textdetail"><p><a href="#" class="cityname">上海</a>,是在中國(guó)江南傳統(tǒng)文化(吳文化)的基礎(chǔ)上,與開(kāi)埠后傳入的對(duì)上海影響深遠(yuǎn)的歐美文化等融合而逐步形成,既古老又現(xiàn)代,既傳統(tǒng)又時(shí)尚,區(qū)別于中國(guó)文化,具有開(kāi)放而又自成一體的獨(dú)特風(fēng)格。<a href="#" class="readdetail">查看更多>></a></p></div><!--城市著名景點(diǎn)--><div class="attraction"><a href="#">徐家匯</a><a href="#">陸家嘴</a><a href="#">中山公園</a><a href="#">人民廣場(chǎng)</a></div><div class="clear"></div><!--房屋關(guān)注率排行--><div class="attentionrate"><span class="textatnrate">房屋關(guān)注率排行:</span><table><tr height="30"><td width="20">1.</td><td><a href="#">都是家園圣天地 標(biāo)準(zhǔn)大...</a></td><td width="120"><span class="city-nubroom">1室1廳</span></td><td width="30"><a href="#">評(píng)論</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衛(wèi)</span></td><td><a href="#">評(píng)論</a></td></tr><tr height="30"><td width="20">3.</td><td><a href="#">品尊名致豪華復(fù)式房</a></td><td width="120"><span class="city-nubroom">3室1廳1衛(wèi)1廚</span></td><td><a href="#">評(píng)論</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衛(wèi)</span></td><td><a href="#">評(píng)論</a></td></tr><tr height="30"><td width="20">5.</td><td><a href="#">新港灣酒店公寓普通標(biāo)...</a></td><td width="120"><span class="city-nubroom">1室1廳1衛(wèi)</span></td><td><a href="#">評(píng)論</a></td></tr></table></div></div></div><!--熱門(mén)城市結(jié)束--><!--特色推薦--><div id="recommend"><!--標(biāo)題欄--><div class="title"><span class="titlename2">特色推薦</span></div><!--推薦地點(diǎn)--><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><!--特色推薦結(jié)束--><!--廣告語(yǔ)--><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%真實(shí)房源</a><p>專(zhuān)業(yè)驗(yàn)證員實(shí)地驗(yàn)真,確保每一套房屋真實(shí)有效。</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="#">特色房屋,性?xún)r(jià)比高</a><p>配備家電,可洗衣做飯的一居、多居房全面滿(mǎn)足各種需求。</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="#">到店無(wú)房,賠付首晚</a><p>預(yù)訂成功到店無(wú)房賠付首晚房費(fèi),1000萬(wàn)保障基金先行賠付。</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小時(shí)服務(wù)專(zhuān)線(xiàn)</a><p>400客服專(zhuān)線(xiàn)隨時(shí)解答處理任何問(wèn)題。</p></div></div></div><!--廣告語(yǔ)結(jié)束--> <!--foot--><div id="foot"><a href="#">關(guān)于我們 |</a><a href="#">業(yè)務(wù)介紹 |</a><a href="#">加入天堂鳥(niǎo) |</a><a href="#">幫助中心 |</a><a href="#">網(wǎng)站地圖</a><p>@ Copyright 2013 tiantangniao.com 天堂鳥(niǎo) 版權(quán)所有 不得轉(zhuǎn)載</p><p>京ICP備11043397號(hào)</p></div><!--foot結(jié)束--></div><script type="text/javascript">var test=new Vcity.CitySelector({input:'citySelect'});var test2=new Vcity.CitySelector({input:'citySelect1'});</script> </body> </html>四、學(xué)習(xí)資料
web前端 零基礎(chǔ)-入門(mén)到高級(jí) (視頻+源碼+開(kāi)發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)
適合入門(mén)到高級(jí)的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站
五、??????? 👇🏻👇🏻👇🏻更多源碼👇🏻👇🏻👇🏻
總結(jié)
以上是生活随笔為你收集整理的HTML5期末大作业:体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作业成品 学校篮足球网页制作模板 学生简单体育运动网站设计成品的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: linux搭建虚拟化平台报告,部署KVM
- 下一篇: 前端学习总结——CSS布局方式之传统布局