HTML5期末大作业
文章目录
HTML5期末大作业一、作品展示二、文件目录三、代码实现四、获取更多源码一、作品展示
二、文件目录
三、代码实现
<!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/index.css" rel="stylesheet" type="text/css" /><link href="css/base.css" rel="stylesheet" type="text/css" /><link href="css/reset.css" rel="stylesheet" type="text/css" /><script src="js/jquery-1.8.3.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$('#nav ul li').hover(function() {//加载所需鼠标悬浮时间元素$('#nav ul li').removeClass('li_1'); //去掉加载标签里的class名$(this).addClass('li_1'); //给当前所有元素加li_1这个class名字}, function() {$('#nav ul li').removeClass('li_1'); //去掉加载标签里的class名});})//轮播图开始//轮播图结束</script><title>我的网站</title></head><body><div id="body1"><div id="nav" name="nav"><!---nav开始-------------------------------------><div class="nav_inner"><ul class="ul_1"><li class="li_1"><a href="#">官网首页</a></li><li class="li_2"><a href="#">下载中心</a></li><li><a href="#">游戏充值</a></li><li><a href="#">新手指南</a></li><li><a href="#">游戏公告</a></li><li><a href="#">企业招聘</a></li><li><a href="#">联系我们</a></li><li class="li_3"><a href="#">玩家论坛</a></li></ul></div><!---inner内部------------------------------------></div><!---nav结束-------------------------------------><div id="content"><div class="content_1"><div class="xiazai01"><ul class="ul_1"><li class="li_1"><a class="a1" href=":88/%E4%B8%89%E4%B9%85%E4%B9%85%E9%AD%94%E5%9F%9F.rar"></a></li><li class="li_2"><a class="a2" href="#">游戏注册</a></li><li class="li_3"><a class="a3" href="#">新手礼包</a></li></ul></div><!-- 轮播图代码 开始 --><div id="playBox"><div class="pre"></div><div class="next"></div><div class="smalltitle"><ul><li class="thistitle"></li><li></li><li></li><li></li><li></li><li></li></ul></div><ul class="oUlplay"><li><a href="#" target="_blank"><img src="images/lunbotu01.jpg"/></a></li><li><a href="#" target="_blank"><img src="images/lunbotu02.jpg"/></a></li><li><a href="#" target="_blank"><img src="images/lunbotu01.jpg"/></a></li><li><a href="#" target="_blank"><img src="images/lunbotu01.jpg"/></a></li><li><a href="#" target="_blank"><img src="images/lunbotu01.jpg"/></a></li><li><a href="#" target="_blank"><img src="images/lunbotu01.jpg"/></a></li></ul></div><!-- 轮播图代码 结束 --><div class="xinwen1"><div class="xinwen2"><!-- 代码部分begin-----------------------><div class="lanrenzhijia"><div class="tab"><a href="javascript:;" class="on">公告</a><a href="javascript:;">最新咨询</a><a href="javascript:;">活动</a></div><div class="content"><ul><li style="display:block;"><p><a href="#">魔域1区</a></p> <a class="a11" href="#"> 新区11月23日 20点30开放 </a></li><li><a class="a2" href="#">新区11月23日 20点30开放</a></li><li><a class="a3" href="#">新区11月23日 20点30开放</a></li></ul></div></div></div><script>$(function() {$(".lanrenzhijia .tab a").mouseover(function() {$(this).addClass('on').siblings().removeClass('on');var index = $(this).index();number = index;$('.lanrenzhijia .content li').hide();$('.lanrenzhijia .content li:eq(' + index + ')').show();});var auto = 1; //等于1则自动切换，其他任意数字则不自动切换if (auto == 1) {var number = 0;var maxNumber = $('.lanrenzhijia .tab a').length;function autotab() {number++;number == maxNumber ? number = 0 : number;$('.lanrenzhijia .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');$('.lanrenzhijia .content ul li:eq(' + number + ')').show().siblings().hide();}var tabChange = setInterval(autotab, 3000);//鼠标悬停暂停切换$('.lanrenzhijia').mouseover(function() {clearInterval(tabChange);});$('.lanrenzhijia').mouseout(function() {tabChange = setInterval(autotab, 3000);});}});</script><!-- 代码部分end -------------------------><a class="a1" href="#">新手推荐</a></div><!-- 可关闭公告-1 --><div id="t" class="c2"><div id="say-1"><span onclick="document.getElementById('say-1').style.display='none'">关闭</span><b>更新通告</b><p>新增VIP普通玩家蜘蛛王地图，每5分钟狂刷35个蜘蛛王！绝对真实！[只限VIP7玩家进入，玩家的福音]</p></div><!-- 可关闭公告-2 --><div id="say-2"><span onclick="document.getElementById('say-2').style.display='none'">关闭</span><b>更新通告</b><p>新增迷宫蜘蛛点地图，每5分钟狂刷35个蜘蛛王！绝对真实！[只限VIP7以上进入，会员的福音]</p></div><!-- 可关闭公告-3 --><div id="say-3"><span onclick="document.getElementById('say-3').style.display='none'">关闭</span><b>更新通告</b><p>新增打属性奖励：雷鸣门口每5分钟刷新3个恶魔王子随机爆一件全属性装备【普通玩家的福音】</p></div><!-- 可关闭公告-4 --><div id="say-4"><span onclick="document.getElementById('say-4').style.display='none'">关闭</span><b>更新通告</b><p>正式开放六大副本、恶魔城，爆龙珠换外套、特球阳光包、月光宝盒，各种高级宝石【普通玩家的福音】</p></div><!-- 可关闭公告-5 --><div id="say-5"><span onclick="document.getElementById('say-5').style.display='none'">关闭</span><b>更新通告</b><p><b><font color="#FF00FF">【</font><big><font size="3" color="#FF00FF">独家五职业。无漏洞．不变态．宝宝要搭配好．你们绝对没有玩过的版本！超好玩，人气多</font></big><font color="#FF00FF">】</font></b></p></div></div><div id="totop" style="display: block;"><a href="#nav">返回头部</a></div><!--------返回头部---------------><div id="footer"><div class="footer_1"><h4 class="h5_1">合作站点</h4></div><div class="footer_2"><a class="footer-link-a" href="" target="_blank">苹果助手</a><a class="footer-link-a" href="" target="_blank">酷狗</a><a class="footer-link-a" href="/ruanjian" target="_blank">软件下载</a><a class="footer-link-a" href="/" target="_blank">京东网</a><a class="footer-link-a" href="/" target="_blank">专题栏电脑软件</a><a class="footer-link-a" href="/" target="_blank">4399小游戏</a><a class="footer-link-a" href="" target="_blank">万能免费WiFi</a></div><div class="footer_3"><ul class="ul_1"><li class="li_1"> <a href="" target="_blank">网站空间由梓童IDC()免费赞助提供</a> </li><li class="li_1">© XXXXXXX科技有限公司 </li><li class="li_1">违法和不良信息举报电话：400-520520-8888 举报邮箱：418657940@</li><li class="li_1">京ICP证123456号， 京公网安备123456789987654号， 广播电视节目制作发行许可证：（京）字第123号 </li></ul></div></div><!---id="footer"结束-------------------------------------></body></html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
学生网站模板——魔域私服游戏(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html实训大作业
