一、网页介绍
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;
}