大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
2024-05-18 20:48:54
国漫大鱼海棠主题，本套大作业共计10个页面，页面美观度较高，网页在细节设计上花了很大功夫，如边框、阴影，鼠标滑过效果等，运用的知识点有：Div+CSS、JS轮播图、Table、下拉菜单栏、视频、表单、二级页面，LOGO设计，基本期末作业所需的知识点都有覆盖~ 戳下方视频预览页面详情
大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
部分代码片段：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大鱼海棠</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<style type="text/css">body {margin-left: 0px;margin-top: 0px;
}</style></head><body>
<div class="top"><div class="logo"><a href="index.html"><img src="data:images/logo.png" width="140" height="51"></a></div>
</div>
<!-- 横向导航开始 -->
<div class="bar-h42">
<div id="bar" class="clear"><ul><li><a href="index.html">回到首页</a></li><li><a href="article1.html">电影简介</a></li><li><a href="article2.html">获得奖项</a></li><li><a href="#">电影周边 <img src="data:images/down.svg" width="10" height="10"></a><ul><li><a href="others1.html">经典语录</a></li><li><a href="others2.html">电影角色</a></li><li><a href="news.html">新闻资讯</a></li></ul></li><li><a href="photos.html">图片印象</a></li><li><a href="#">更多相关 <img src="data:images/down.svg" width="10" height="10"></a><ul><li><a href="page.html">影评</a></li><li><a href="video.html">视频</a></li></ul></li><li><a href="message.html">给我留言</a></li></ul><div class="search"><input type="text" value=" 搜索"></div>
</div>
</div>
<!-- 横向导航END --><!-- 轮播banner开始 -->
<div id="banner1"><div id="picbox"><div id="pic1" class="pics"></div><div id="pic2" class="pics"></div><div id="pic3" class="pics"></div><div id="pic4" class="pics"></div><div id="pic5" class="pics"></div></div><div id="nav"><li id="navli1" class="anvli navnow" value="1"></li><li id="navli2" class="anvli" value="2"></li><li id="navli3" class="anvli" value="3"></li><li id="navli4" class="anvli" value="4"></li><li id="navli5" class="anvli" value="5"></li></div><div id="pre" class="hbut"></div><div id="next" class="hbut"></div>
</div><!-- 轮播banner 结束 --> <div class="main"><div class="video"><div class="video-img"><a href="video.html"><img src="data:images/main01.jpg" alt="" width="581" height="339"></a></div><div id="video-icon"><a href="video.html" class="white">Click to play video</a></div></div><div class="main-text"><span class="abigyahei2">关 / 于 / 大 / 鱼 / 海 / 棠</span><br>在天空与人类世界的大海相连的海洋深处，生活着掌管着人类世界万物运行规律的“其他人”。居住在“神之围楼”里的女孩“椿”，十六岁生日那天变作一条海豚到人间巡礼，被大海中的一张网困住，一个人类男孩因为救她而落入深海死去。为了报恩，她需要在自己的世界里帮助男孩的灵魂——一条拇指那么大的小鱼...</div>
</div>
<div id="index-iamges"><table width="100%" border="0"><tr><td height="349" align="center"><a href="index.html"><img src="data:images/logo1.png" alt="" width="207" height="75"></a><br><input type="text" id="clock" size="50" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock(){var t=new Date()document.getElementById("clock").value=t}
</script>
</form></td></tr>
</table>
</div>
<div class="d-x-3"><div class="d-x-3-1"><span class="abigyahei2">四十五亿年前</span><br><br><span class="abigyahei3">这个星球上，只有一片汪洋大海，和一群古老的大鱼。在与人类世界平行的空间里，生活着一个规规矩矩、遵守秩序的族群，他们为神工作，掌管世界万物运行规律，也掌管人类的灵魂。他们的天空与人类世界的大海相连...</span></div><div class="gotop"><a href="#top"><img src="data:images/gotop.png" width="114" height="35"></a></div>
</div>
<div class="footer"><div class="down"><table width="100%" border="0"><tr><td width="17%" height="161"><a href="index.html"><img src="data:images/logo1.png" alt="" width="140" height="51"></a></td><td width="20%"><a href="#top" class="white">返回顶部</a></td><td width="32%" align="center">Copyright © 版权所有 ICP备0000000号 </td><td width="14%"> </td><td width="17%"><a href="#"><img src="data:images/douyin.png" alt="" width="31" height="31"></a> <a href="#"><img src="data:images/weibo.png" alt="" width="31" height="31"></a> <a href="#"><img src="data:images/weixin.png" alt="" width="31" height="31"></a></td></tr>
</table>
</div>
</div>
</body>
</html>
大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS相关推荐
- 公司产品移动端网页-前端网页设计技术精美网站源码HTML+CSS+JS
微信公众号:创享日记 发送:产品网页 获取完整源码(打开即可用) 效果①主页首页 /*========================================================= ...
- web前端网页设计与制作——华夏第一县HTML+CSS+JavaScript
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- N01web网页设计实例作大作业（div+css） ——中国茶文化(6页) 茶文化网页制作作业_中国化(网页设计...
web网页设计实例作业 --中国茶文化(6页) 茶文化网页制作作业_中国化(网页设计- 文章目录 web网页设计实例作业 --中国茶文化(6页) 茶文化网页制作作业_中国化(网页设计... 一.作品展 ...
- 免费乒乓球主题静态html网页设计成品
- 个人电影网站web网页设计制作—— 影视公司5页 DIV+CSS制作 浮动布局
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- div+css静态网页设计—全球旅游私人订制(6页) HTML+CSS+JS网页设计期末课程大作业
HTML5期末大作业:全球旅游网站设计--全球旅游私人订制(6页) 文章目录 HTML5期末大作业:全球旅游网站设计--全球旅游私人订制(6页) 一.作品展示 二.文件目录 三.代码实现 四.获取更多 ...
- HTML5期末大作业：汽车主题网页设计——21 汽车租赁(47页) HTML+CSS+JavaScript web前端期末大作业 html+css+javascript网页设计实例 企业网站制作
HTML5期末大作业:汽车主题网页设计--21 汽车租赁(47页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设 ...
- 网页设计成品DW静态网页Html5响应式css3 ——响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述
HTML5期末大作业:游戏网站设计--响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
最新文章
- php把excel变成数组,PHP excel读取excel文件转换为数组
- 如何在运行时使用SAP Commerce Cloud backoffice直接给类型增添新属性
- activemq安全设置 设置admin的用户名和密码
- Android API 中文（77）——AdapterView.OnItemSelectedListener
- pt-online-schema-change 修改主键导致数据删除失败的问题调查
- 矩阵计算的理论与方法_基于微带线的相位补偿方法分析
- 高级恶意软件技术新挑战——突破主动防御
- 全网首发：JDK绘制文字：七、使用字体图像进行绘制
- json文件简介及借助于python解析json文件
- DedeCMS顽固木马后门专杀工具V2.0实现方式研究
- 做一个视频通话给自己用吧
- Unity3D for VR 学习(7): 360°全景照片
- 判断某整数是否既是5又是7的整数倍
- 产品狗观世界：谈装修
- 电商系统开发实战-用户微服务基础模块开发
- VUEJS项目实践六之No PostCSS Config found in
- 小学如何开展创客教育教学工作
- js点击事件在苹果ios端失效的解决方法
- Windows密码凭证获取学习
- 【活动】请注意：一大批Q币正在来袭