200字范文 > HTML5期末大作业：体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作

HTML5期末大作业：体育主题网站设计——足球(9页) HTML+CSS+JavaScrip校园篮球网页作

时间：2020-09-26 15:25:33

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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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 天堂鸟版权所有 </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>