一套合格的作业应该包含：
1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
5. 要有JS特效，如定时切换和手动切换图片新闻；
6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
7. 页面清爽、美观、大方，不雷同。
这套作业呢就是一套合格的前端网页作业，请看近期作品截图~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原神</title>
<style type="text/css">
body {
background-color: #ededed;
margin-left: 0px;
margin-top: 0px;
}
</style>
<link rel=stylesheet type=text/css href="css/style.css">
<link rel=stylesheet type=text/css href="css/banner.css">
</head>
<body>
<div class="father">
<div class="top"><a href="index.html"><img src="images/logo.jpg" width="1000" height="120"></a></div>
<header>
<div class="nav">
<div class="title">
<a href="index.html">网站首页</a>
<a href="more.html">了解更多</a>
<a href="list.html">精彩图集</a>
<a href="video.html">在线视频</a>
<a href="message.html">给我留言</a>
</div>
</div>
</header>
<!-- banner代码开始 -->
<div class="banner">
<ul class="list">
<a href="#">
<li class="item active"><img src="images/01.jpg" alt=""></li>
</a>
<a href="#">
<li class="item"><img src="images/02.jpg" alt=""></li>
</a>
<a href="#">
<li class="item"><img src="images/03.jpg" alt=""></li>
</a>
<a href="#">
<li class="item"><img src="images/04.jpg" alt=""></li>
</a>
<a href="#">
<li class="item"><img src="images/05.jpg" alt=""></li>
</a>
</ul>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
<button class="btn" id="left"><img src="images/left.png" width="20" height="20"></button>
<button class="btn" id="right"><img src="images/right.png" width="20" height="20"></button>
</div>
<script type="text/javascript" src="js/banner.js"></script>
<!-- banner代码END -->
<div class="text01">
<div class="left">
<div class="image230"><img src="images/img01.jpg" width="230" height="195"></div>
<div class="image232">上海米哈游制作</div>
</div>
<div class="main1">
<span class="dabiaoti">关于原神</span><br>
<br>
《原神》是由上海米哈游制作发行的一款开放世界冒险游戏，于2017年1月底立项 ，原初测试于2019年6月21日开启 ，再临测试于2020年3月19日开启 ，启程测试于2020年6月11日开启 ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
<div id="right">
<div id = "tab">
<ul>
<li class="on">资料</li>
<li class="off">简介</li>
</ul>
<div id="firstPage" class="show">
<table width="100%" border="0">
<tr>
<td align="center"><img src="images/tx.png" width="80" height="80"></td>
</tr>
<tr>
<td align="center">游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神...</td>
</tr>
</table>
</div>
<div id="secondPage" class="hide">
这里是七种元素交汇的幻想世界“提瓦特”。
在遥远的过去，人们藉由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。
五百年前，古国的覆灭却使得天地变异……
如今，席卷大陆的灾难已经停息，和平却仍未如期光临。
作为故事的主人公...
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="news">
<div id="news1">
<div class="titlenews"> <span class="dabiaoti"> <img src="images/right1.png" width="18" height="18"> 新闻</span> <span class="dabiaoti">更多></span></div>
<div class="news11"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神琴圣遗物怎么搭配 原神琴圣遗物搭配攻略</a> </td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神追忆套适合谁 原神追忆套推荐详解</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神找到最后的遗迹在哪里 原神找到最后的...</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%">原神:教你轻松拿满50级纪行奖励</td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神荒泷极上盛世豪鼓大祭典开启,手残玩家...</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神 荒泷一斗培养材料收集指南</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
</div>
<div id="news2">
<div class="titlenews"> <span class="dabiaoti"> <img src="images/right1.png" width="18" height="18"> 热点</span> <span class="dabiaoti">更多></span></div>
<div class="news11"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神玩家画了一张正在被业障折磨的魈图...</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神琴圣遗物怎么搭配 原神琴圣遗物搭配攻略</a> </td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神 荒泷一斗培养材料收集指南</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神荒泷极上盛世豪鼓大祭典开启,手残玩家...</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神找到最后的遗迹在哪里 原神找到最后的...</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
<div class="news12"><table width="100%" border="0">
<tr>
<td width="68%"><a href="#" class="black">原神追忆套适合谁 原神追忆套推荐详解</a></td>
<td width="32%" align="right"><span class="t145-2">2022-06</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer"><table width="100%" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="25" align="center">版权声明 | 联系方法 | 刊登广告 | 关于我们 | 服务条款 </td>
</tr>
<tr>
<td height="29" align="center">版权所有：原神</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function(){
var myTab = document.getElementById("tab"); //整个div
var myUl = myTab.getElementsByTagName("ul")[0];//一个节点
var myLi = myUl.getElementsByTagName("li"); //数组
var myDiv = myTab.getElementsByTagName("div"); //数组
for(var i = 0; i<myLi.length;i++){
myLi[i].index = i;
myLi[i].onclick = function(){
for(var j = 0; j < myLi.length; j++){
myLi[j].className="off";
myDiv[j].className = "hide";
}
this.className = "on";
myDiv[this.index].className = "show";
}
}
}
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
