学生网页设计成品展示 静态HTML网页设计HTML5 dreamweaver作品展示2022.08期
2024-06-01 22:59:38
一套合格的作业应该包含：
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="data: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="data:images/01.jpg" alt=""></li></a><a href="#"><li class="item"><img src="data:images/02.jpg" alt=""></li></a><a href="#"><li class="item"><img src="data:images/03.jpg" alt=""></li></a><a href="#"><li class="item"><img src="data:images/04.jpg" alt=""></li></a><a href="#"><li class="item"><img src="data: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="data:images/left.png" width="20" height="20"></button><button class="btn" id="right"><img src="data: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="data: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="data: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="data: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="data: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"); //整个divvar 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>
学生网页设计成品展示 静态HTML网页设计HTML5 dreamweaver作品展示2022.08期相关推荐
- 校园网页设计成品 学校班级网页制作模板 dreamweaver网页作业 简单网页课程成品 大学生静态HTML网页源码
- div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 文章目录 HTML5期末大作业:电商购物网站设计- ...
- HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学 ...
- HTML+CSS大作业——旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板 常见网页设计作业题材有 个人. 美 ...
- B8HTML5期末大作业：漫画网站设计——二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板
HTML5期末大作业:漫画网站设计--二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...
- HTML5期末大作业：漫画网站设计——二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板
HTML5期末大作业:漫画网站设计--二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...
- HTML5期末大作业：动漫网站设计——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作 简单静态HTML网页作品 漫画作业成品 学生影视网站模板
HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 动漫网页设计制作 简单静态HTML网页作品 漫画作业成品 学生影视网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- HTML5期末大作业：甜品蛋糕网站设计——甜品蛋糕网页设计(5页) 甜品网页设计制作 简单静态HTML网页作品 美食网页作业成品 学生水果生鲜网站模板
HTML5期末大作业:甜品蛋糕网站设计--甜品蛋糕网页设计(5页) 甜品网页设计制作 简单静态HTML网页作品 美食网页作业成品 学生水果生鲜网站模板 常见网页设计作业题材有 个人. 美食. 公司. ...
- 学生DW静态网页设计 旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML 文章目录 HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含 ...
最新文章
- Swift 中使用 SQLite——修改和删除数据
- Linux socket学习
- nginx利用referer指令实现防盗链配置
- macOS Mojave Version 10.14 新系统字体问题和修改MAC中Launchpad启动器图标行列的数量
- Windows server 2008R2本地组与本地用户的创建和管理
- 价值12万汽车网上售价1万？老哥拍下后4S店不认账：标错价了
- Delphi天气预报查询
- ubuntu下安装matlab及配置vot-toolkit
- [nlp] 双三次插值（BiCubic插值）
- 使用WPS邮件合并功能和文档部件插入图片制作准考证
- 《美人天下》颠覆小公主之死 李治掌控全局_0
- PowerManagerService第五讲之常见问题
- 智慧城市构建的核心问题：数据信息的安全性与隐私性
- python圆形代码_python圆形函数
- 荣耀畅玩8C生猛来袭夺C位，红米Note5看了只能默默躲角落
- Linux 根目录与路径
- 什么触控笔好用又便宜？口碑超好的触控笔推荐
- Android提示“很抱歉，xxx已停止运行“，adb命令连接模拟器并查看安卓日志
- 科技的发展让隐私保护成空谈
- 两栏布局与三栏布局(圣杯布局与双飞翼布局)