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

最新推荐文章于 2025-10-18 20:09:35 发布

原创最新推荐文章于 2025-10-18 20:09:35 发布 · 7.9k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#html #课程设计 #css

网页设计专栏收录该内容

3 篇文章

订阅专栏

本教程介绍了一个以动漫电影《你的名字》为主题的网页设计实例，包括HTML、CSS和JavaScript的基础应用，如Div+CSS布局、鼠标滑过特效、导航栏和表单等元素，适合初学者学习。同时提供了网页代码示例和编辑软件建议。

一、网页介绍

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>
             ���·����ĵص�����ÿǧ��ع�һ�ε�������ù�һ����֮���ձ�ĳ����ɽ������С��������
Ů��������Ҷ���ϰ�ʯ����������ÿ�춼��������������������յĲ����е����򳤵ĸ��������е�ѡ���˶������мҴ�����Ĺ���ϰ�ס������СС�ĳ�����Χ��ֻ��Щ��Ϲ���ĵ����ˡ�Ϊ����Ҷ���ڴ��г������㽣�����������"�±�����������һ������˧��ɣ�"��Ȼ��һ���Լ����˸�����к��ӵ��Σ���İ���ķ��䣬���İ�������ѣ��Լ������Ľֵ�����Ȼ�е����󣬵���Ů������������˼ĺ��Ķ������ǳ���ϲ�á�<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;
}