HTML静态网页设计_期末大作业_《你的名字》7页面带音乐特效（附源码）

最新推荐文章于 2023-05-15 16:54:11 发布
最新推荐文章于 2023-05-15 16:54:11 发布
阅读量7.7k 收藏 16
点赞数 2
分类专栏： 网页设计 文章标签： html 课程设计 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suli77/article/details/128876987
版权

一、网页介绍

1、作品介绍：本作品的主题是动漫电影系列—《你的名字》，整个页面的风格都和电影主题十分契合，是一个审美非常在线的作品。该实例包含的HTML、CSS和js，非常适合初学HTML的同学来学习。

2、网页编辑：网页代码非常简单，可以使用市面上任何HTML编辑软件进行修改，Dreamweaver、Notepad++等等。

3、网页技术：技术主要采用了Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash等，基本覆盖期末大作业需要的知识点。

二、界面展示

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、核心代码展示

1、主页

<!doctype html>
<html>
<head>
<meta charset="GB2312">
<meta name="keywords" content="tzyh" />
<title>Resume</title>
<link href="css/style.css"  rel="stylesheet"></head>
<SCRIPT language=JavaScript>
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
</SCRIPT>
<script type="text/javascript" src="../../chengpin/tzyh.js" ></script> 

<body >
<embed src="966205028.mp3" width="32" height="32"></embed>
<!-- Copyright ?2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<!-- /Copyright ?2005. Spidersoft Ltd -->
<center>
<table width="960" border="0" class="main"  cellspacing="0" cellpadding="0" style=" margin-bottom:20px;"  >
  <tr>
    <td height="76" colspan="3" class="branding">
  	<center><a href="index.html"  >
    		<img src="images/logo.png"  alt="Horus" /></center>
    </a> </td> 
  </tr>
  <tr>
<td height="125" colspan="3">
 <table width="960" border="0" align="center" cellspacing="0" class="nav">
     
      <tr><td></td>
        <td width="120"  height="125" ><a class="active" href="index.html" >��ҳ</a></td>
        <td width="120" ><a href="x.html" >��ְԱ��</a></td>
        <td width="120" ><a href="c.html" >��ɫ����</a></td>
        <td width="120"><a href="r.html" >ӰƬ����</a></td>
        <td width="120"><a href="d.html" >ӰƬ����</a></td>
        <td width="120"><a href="z.html" >�������</a></td>
        <td width="120"><a href="k.html" >��������</a></td>
         <td></td>
      </tr>
    </table>
</td>
  </tr>


 <tr>
    <td height="870" colspan="3"   >
 <table width="960" border="0" align="center" cellspacing="0">
 <tr>
<td width="960" height="1270" style=" background:#fff;opacity: 0.8">
<div class="t1"><br>

<h1 style="font-size:24px; line-height:50px; color:#000; text-indent:1em;">��������֡�</h1>
<table border="0" cellspacing="0" cellpadding="0" style="padding:30px; line-height:30px; font-size:14px;">
  <tr>
    <td><img src="images/index.png"  width="300" /></td>
    <td><p style="padding-left:26px; font-size:14px; color:#f07a8b;">��������֡��������º���ִ��������ľ¡֮�顢�ϰ�ʯ����������Ҫ������һ��ԭ���ձ�������Ӱ��<br>��Ʒ��2016��8��26�����ձ���ӳ���й��ڵ���2016��12��2����ӳ����Ʒ��������Ů������������������
��Ѱ�ұ˴˵Ĺ��¡�
        ����ʱ��2017��8��26��������й���½��PPTV��bilibili�������ա��ſ������ײ���<br>
             ���·����ĵص�����ÿǧ��ع�һ�ε�������ù�һ����֮���ձ�ij����ɽ������С��������
Ů��������Ҷ���ϰ�ʯ����������ÿ�춼��������������������յIJ����е����򳤵ĸ��������е�ѡ���˶������мҴ�����Ĺ���ϰ�ס������СС�ij�����Χ��ֻ��Щ��Ϲ���ĵ����ˡ�Ϊ����Ҷ���ڴ��г������㽣�����������"�±�����������һ������˧��ɣ�"��Ȼ��һ���Լ����˸�����к��ӵ��Σ���İ���ķ��䣬���İ�������ѣ��Լ������Ľֵ�����Ȼ�е����󣬵���Ů������������˼ĺ��Ķ������dz���ϲ�á�<br>
        ���ͬʱ�������ڶ������и�������������ľ¡֮�� ������Ҳ���˸���ֵ��Σ�����һ����δȥ������ɽС���У������Ů��������������Ů�����������������˱˴ˣ�������"������������η���һ����ȥ����"������ȥѰ�ұ˴ˡ�</p></td>
 </tr>
</table>


</div>

<div class="t2" style="padding-left:30px;">
<h1 style="font-size:24px; line-height:50px; color:#000; text-align:center;">��������֡�</h1>
<table border="0" cellspacing="12" cellpadding="0">
   <tr>
     <td><img src="images/1.gif"width="372" height="209"></td>
    <td><img src="images/3.gif" width="372" height="209"></td>
    <td><img src="images/4.gif" width="372" height="209"></td>
  </tr>
  <tr>
    <td><img src="images/a1.jpg"width="372" height="209"></td>
    <td><img src="images/a2.jpg"width="372" height="209"></td>
    <td><img src="images/a3.jpg"width="372" height="209"></td>
  </tr>
  <tr>
    <td><img src="images/a4.jpg"width="372" height="209"></td>
    <td><img src="images/a8.jpg"width="372" height="209"></td>
    <td><img src="images/a6.jpg"width="372" height="209"></td>
  </tr>
  <tr>
     <td><img src="images/a7.jpg"width="372" height="209"></td>
     <td><img src="images/a5.jpg"width="372" height="209"></td>
     <td><img src="images/a9.jpg"width="372" height="209"></td>
  </tr>
  
</table>




</div>

</td>
</tr>
</table>
</td> 
  </tr>


  <tr>
    <td height="60" colspan="3" id="footer" >
   <center><font color="white">��������֡�</font></center>
</td> 
  </tr>
</table>
</center>

</body>
</html>

2、CSS

*{
	margin:30;
	padding:30;
}

body {
	font-family:Arial, '微软雅黑', sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	margin:0;
	padding:0;
	background-image: url(../images/bj.jpg);
	background-repeat: no-repeat;
	background-color: #F0F0F0;
}
.nav{

}
.nav tr{text-align:center;}

.nav tr td a {
	color:#F0F0F0;
	padding:9px 26px;
	font-size:15px;
	font-weight: bold;
	text-decoration: none;
}
.nav tr td a:hover,.nav tr td a.active{
	background:pink;
}

.branding {
position: relative;
z-index: 9999;
}
#footer{
	height:60px;
	color:#F0F0F0;
	font-weight: bold;
	background: url("../images/border-yellow.png") repeat-x left top;
}

.t1{
	clear: left;
	padding-bottom: 20px;
	margin-bottom: 20px;
	background: url("../images/hr2.png") no-repeat bottom center
}
.main tr td table tr td br {
	color: #F0F0F0;
}
.main tr td table tr td p {
	font-weight: bold;
}
.main tr td table tr td p {
	font-weight: normal;
}
.main tr td table tr td .t1 table tr td p {
	font-size: large;
}
.main tr td table tr td .t1 table tr td p {
	font-size: xx-small;
}
.main tr td table tr td .t1 table tr td p {
	font-size: x-small;
}
.main tr td table tr td .t1 table tr td p {
	font-size: small;
}
.main tr td table tr td .t1 table tr td p {
	font-size: medium;
}
.main tr td table tr td .t1 table tr td p {
	font-size: large;
}
.main tr td table tr td .t1 table tr td p {
	font-size: x-large;
}
.main tr td table tr td .t1 table tr td p {
	font-size: xx-large;
}
.main tr td table tr td .t1 table tr td p {
	font-size: larger;
}
.main tr td table tr td .t1 table tr td p {
	font-size: smaller;
}
.main tr td table tr td .t1 table tr td p {
	font-size: medium;
}
.main tr td table tr td .t1 table tr td p {

}
.main tr td table tr td table tr td p {
	font-size: 24px;
}
.main tr td table tr td table tr td p {
	font-size: 24px;
}

四、资源链接

https://download.csdn.net/download/suli77/87415477

suli77
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5期末大作业：动漫电网站设计——动漫电影《你的名字》(7页) HTML+CSS大作业: 动漫电网页制作作业_动漫电网页设计...
11-03 9960
HTML5期末大作业：动漫电网站设计——动漫电影《你的名字》(7页) HTML+CSS大作业: 动漫电网页制作作业_动漫电网页设计… 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
div+css网页html成品学生作业包含10个html页面——动漫主题海贼王
QQ_____365392777的博客
08-10 4983
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
【HTML+CSS】静态网页设计期末大作业——我的家乡美丽青岛
网页设计与制作 | HTML+CSS+JS
10-08 747
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
静态网页设计期末作业
06-28
dreamweaver的静态网页设计较为简单 智慧校园为主题的网页制作
html静态网站设计-旅游网（期末大作业）
12-09
用html做的静态旅游网站，一共有十几个页面，三级结构，添加flash和javascript效果。特别适合当做期末大作业。希望对大家有用。
简单DIV+CSS学生网页设计——电影请以你的名字呼唤我(4页)带音乐特效
08-10
- **项目背景**: 该项目是专为学生设计的HTML5期末考核大作业源码。它不仅适用于个人网页的设计，还能应用于多种场景，如美食、公司、学校、旅游、电商等众多主题。 - **技术栈**: 主要使用HTML、CSS以及简单的...
HTML5期末大作业：动漫网站设计—— 动漫电影《你的名字》(7页)带音乐特效 HTML+CSS+JavaScript
qq___365392777的博客
10-20 3059
HTML5期末大作业：动漫网站设计—— 动漫电影《你的名字》(7页)带音乐特效 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设计源码HTML 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、
HTML静态网页作业——电影介绍-你的名字 5页 无js 带音乐
QQ_____365392777的博客
08-12 1509
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
个人简介网页设计作业 静态HTML个人介绍网页作业 DW个人网站模板下载 WEB静态大学生简单网页 个人网页作品代码 个人网页制作 学生个人网页
qq_3200628753的博客
08-14 614
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大........
大一学生HTML个人网页作业作品——火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)
专注于dreamweaver网页设计制作
08-16 691
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
大学生静态网页设计期末作业
12-28
网页设计期末作业，静态网页，HTML，大学生期末必过，90分以上，部分代码含有注释
网页设计期末作业（一个静态网站）
04-07
网页设计期末作业，一个关于个人主页的个人网站。
网页设计期末作业范例
09-03
该网页是静态网页，涉及HTML/CSS基础知识，以及Ｈ５一些新特性 附：网站规划书
信息专业期末大作业HTML网页设计
06-10
该资源仅供网页设计者参考。。大家好好学习。。
网页制作的期末作业 五个静态页面
06-19
学生的 网页期末作业 五个静态页面 大神不要来
动漫电影《你的名字》网页html源码 期末大作业 课程设计
最新发布
m0_37916936的博客
05-15 573
开发语言：html布局方式：div页面数量：7页项目页面截图 ：
div+css静态网页设计——动漫电影《你的名字》(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页设计期末大作业_网页设计平时作业
qq_524614081的博客
06-17 791
HTML5期末大作业：动漫网站设计——动漫电影《你的名字》(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页设计期末大作业_网页设计平时作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
【HTML+CSS】静态网页设计期末大作业——艺术官网17页
qq_365392777
10-10 219
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suli77

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值