📒 web网页设计期末课程大作业：小黄人网页(6页)
html电影介绍-小黄人网页(6页)
带js,带视频,带轮播图,table表格,表单输入框
此源码带【JavaScript】没学过的不要购买哦, css是内嵌的, 没有单独的css文件
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
该首页代码采用了DIV盒子的布局方法，展示了盒子嵌套、浮动、边距、边框和背景等属性的运用。外部大盒子实现居中，内部布局为左右中结构，底部则是横向浮动排列。代码中涵盖了大学前端学习的知识点和布局技巧，CSS代码量丰富且细致，通过hover效果实现过渡和鼠标滑过效果。此外，页面中使用表格和表单来补充功能，方便新手学习。某些源码页面未使用JS，需者可自行添加。
涵盖个人、电影、美食、动漫、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、摄影、文化、家乡、鲜花、礼品、汽车等多个网页设计主题，能够满足大学生在网页大作业中的需求！
页面结构： 分为页头、菜单导航栏（最好支持下拉）、主要内容区域和页脚四大部分。
页面链接： 所有页面应互相超链接，支持三级页面，整体结构为5-10个页面。
样式统一： 页面样式需统一且布局正常，使用Div+CSS技术确保无错乱。
美观的菜单： 菜单设计应美观且醒目，二级菜单可正常弹出和跳转。
JS特效： 需要有如定时和手动切换的图片轮播等JS特效。
多媒体元素： 页面中应包含多媒体元素，如GIF、视频和音乐，并运用表单技术。
清爽美观： 页面设计应清新、优雅，避免雷同。
整体上，不仅要能展示用户需求的内容，还需确保良好的布局、优雅的界面、恰当的配色以及多样的表现形式。
一、📖 作品介绍
网页作品简介： 该设计达到了HTML网页设计A++水平，部分支持手机和PC的响应式布局。
网页作品编辑： 此作品为学生网页设计类型，代码采用简单的学生水平的HTML+CSS布局制作。下载后可使用任何HTML编辑软件（如：DW、HBuilderX、Vscode、Sublime Text、Webstorm、Notepad++等）进行编辑和修改。
网页作品布局： 整体采用响应式布局，包含LOGO、导航、主体内容等布局。子页面有多种布局方式，兴趣爱好内容使用图片列表展示，成绩页面插入了表格，联系我们页面则使用了左对齐的图片布局。
网页作品技术： 使用DIV+CSS制作网页，包含背景图、音乐、视频、Flash、滚动文字、CSS特效、鼠标悬停效果、导航变色、表单提交及评论留言功能，并通过JavaScript进行表单验证（确保提交时表单不能为空）。
提示：以下是本篇文章正文内容，下面案例可供参考
二、🌐 效果演示
三、🪓 代码实现
🧱 HTML结构代码
代码如下（示例）：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="tzyh">
<script src="js/js.js"></script>
<title>小黄人</title>
</head>
<body style="background:#eee;">
<table border="0" cellpadding="0" cellspacing="0" style="margin:auto; width:980px;">
<tr>
<td colspan="2">
<div id="boxhdp">
<ul id="img">
<li class="current">
<img src="picture/banner_02.jpg">
</li>
<li>
<img src="picture/tmdy_01.jpg">
</li>
<li>
<img src="picture/t3.jpg">
</li>
</ul>
<ul id="li">
<li class="on"></li>
<li></li>
<li></li>
</ul>
<div style="clear: both;"></div>
<div class="an" id="an">
<a href="javascript:;" id="prev">
<img src="http://www.ylcp.shop/files/files/1648883847587/images/l.png" alt="">
</a>
<a href="javascript:;" id="next" class="an-a2">
<img src="http://www.ylcp.shop/files/files/1648883847587/images/r.png" alt="">
</a>
</div>
</div>
<!-- <img src="picture/banner_02.jpg" /> -->
</td>
</tr>
<tr>
<td colspan="2" height="48" background="picture/nav_03.jpg">
<table width="980" height="48" border="0" style="margin-top:-12px;">
<tr>
<td align="center" valign="middle"><a href="" style=" color:#000; text-decoration:none;">黄人介绍</a>
</td>
<td align="center" valign="middle"><a href="about.html" style=" color:#000; text-decoration:none;">人物简介</a>
</td>
<td align="center" valign="middle"><a href="shen.html" style=" color:#000; text-decoration:none;">身份揭秘</a>
</td>
<td align="center" valign="middle"><a href="zuo.html" style=" color:#000; text-decoration:none;">图片欣赏</a>
</td>
<td align="center" valign="middle"><a href="dian.html" style=" color:#000; text-decoration:none;">同名电影</a>
</td>
<td align="center" valign="middle"><a href="ly.html" style=" color:#000; text-decoration:none;">在线留言</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="960" border="0" style="background:#5d9de2; margin:auto; line-height:24px;">
<tr>
<td width="240" align="center" valign="top">
<p> </p>
<p><img src="picture/title.jpg" alt=""></p>
</td>
<td width="710" style="padding-right:20px;">
<p>
小黄人是格鲁和老搭档纳瓦利欧博士用变种DNA、脂肪酸和香蕉泥组成的胶囊状生物，身穿蓝色背带装，听命于格鲁和纳瓦利欧，小黄人主要为纳瓦利欧建造工程、充当格鲁的试验品，或者格鲁三个可爱的女儿表演没人看时，数量庞大的小黄人可以充当观众，小黄人爱闹内讧，如果打起架来，轻则十几个对打，重则动辄火箭筒，小黄人的语言通常为中文之外的各种混杂，但小黄人会说中文（参见《神偷奶爸2》），由于自身是香蕉组成，小黄人酷爱香蕉，《神偷奶爸2》中，小黄人被注射PX-41药剂，不仅变得更加无脑，而且刀枪剑戟无法伤它们分毫，最后纳瓦利欧博士将解药配置在超级难吃的果冻内，将数量庞大的小黄人恢复正常。
</p>
<p>
《卑鄙的我》（国内又译名《神偷奶爸》）于2010年上映，影片中的角色像一个个黄色的小胶囊，受到世界各地影迷的追捧，还被网友戏称为“小黄人”。这些小黄人勤劳勇敢，爱吃香蕉和冰激凌，虽然做事容易分心，仍萌倒一片影迷。2013年7月，电影续集《卑鄙的我2》于美国上映，2014年1月10日于中国上映。
</p>
<p>
不能不提的是，影片里的小黄人。他们的出现让影片在整个动画情节并没有很出彩的情况下，大大的“火”了，使小黄人拥有了一大批粉丝。这些小黄人拥有自己独特的语言，短胳膊短腿的，走起来也显得特别可爱，他们虽然听令于格鲁，却不是没有思想的机器人。小黄人还有个特点，不管是清洁工、消防员、网球手、警察，只要给他们套上特定衣服，就是扮啥像啥。
</p>
<p>
“神偷奶爸”系列的成功要归功于小黄人的表现，他们傻里傻气的，说话永远“叽叽喳喳”，很容易满足，还很听主人的话，这对人类来说，根本就是完美的宠物。</p>
<table border="0" cellspacing="20" cellpadding="0">
<tr>
<td><img src="picture/t1.jpg" alt=""></td>
<td><img src="picture/t2.jpg" alt=""></td>
<td><img src="picture/t3.jpg" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="980" border="0" style="margin:auto;">
<tr>
<td align="center" valign="top">
<p style="color:#868686; font-size:12px; font-family:'新宋体'; font-weight:100;">小黄人网站 </p>
</td>
</tr>
</table>
</body>
</html>
<script>
hdp({
li: "li", //默认值：li;默认用li包裹
boxid: "boxhdp", //最外面div id
imgid: "img", //图片外面id
optid: "li", //opt外面id
an: "an", //左右按钮id，用于移上显示和隐藏
prev: "prev", //左边箭头id
next: "next", //右边箭头id
ms: 4000 //多少毫秒切换一张,
})
</script>
🏠 CSS样式代码
代码如下（示例）：
body,
td,
th {
font-family: 微软雅黑;
font-size: 14px;
font-weight: bold;
color: #FFF;
}
a:visited {
color: #000;
text-decoration: underline;
}
a:hover {
color: #000;
text-decoration: underline;
}
@charset "utf-8";
/* CSS Document */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body { font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text- align:left; background:#faf0e3;}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover {TEXT-DECORATION: underline;color: #ffffff;}
ul,li{list-style-type:none;}
.clearit{clear:both;}
.wrapper{width:1100px;
margin:0 auto;
padding:10px 20px;
background:#FFF;}
.wrapper p{width:1100px;
height:8px;
background:#85190d;}
.nav{width:1100px;
height:30px;
background:#fff;
margin-top:10px;}
.nav li{width:216px;
text-align:center;
line-height:30px;
float:left;
font-size:14px;
font-weight:bold;
margin-bottom:5px;}
.nav li a:hover{color:#F60;}
四、📁 目录结构
├── about.html
├── dian.html
├── file
│ └── shipin.mp4
├── index.html
├── js
│ └── js.js
├── ly.html
├── picture
│ ├── banner_02.jpg
│ ├── cc1.jpg
│ ├── cc2.jpg
│ ├── cc3.jpg
│ ├── cc4.jpg
│ ├── cc5.jpg
│ ├── cc6.jpg
│ ├── h1.jpg
│ ├── h2.jpg
│ ├── h3.jpg
│ ├── jm_01.jpg
│ ├── nav_03.jpg
│ ├── t1.jpg
│ ├── t2.jpg
│ ├── t3.jpg
│ ├── title.jpg
│ └── tmdy_01.jpg
├── shen.html
└── zuo.html
五、💡 博主建议
第一，明确学习目标
在进行学习时，无论是通过阅读、参加课程还是参与线下活动，都要设定清晰的目标。思考你想要解决的问题或希望实现的具体目标，这样能够更有针对性地进行学习。
第二，从实战中学习
单纯的理论学习往往难以记忆和应用，因此实践是关键。初学者可以通过模仿和重写已有的代码来加深理解。实战经验不仅能巩固基础，还能快速提升技能。
第三，建立个人知识体系
知识无穷无尽，面对浩瀚的书籍和信息，我们需要理清思路，避免迷失。每一个知识点都有其特定的背景和边界，通过归纳和整理，可以形成自己的知识体系，帮助更好地理解和应用。
第四，将所学应用于实践
学到的知识必须与实际工作和生活结合起来。每天学习的新知识应当与现实情况联系，通过实践来验证和深化理解。热爱学习是值得赞扬的，但能有效应用知识的人才是真正有价值的。
六、🎁 更多作品
如果我的博客对你有所帮助，或者你喜欢我的内容，请别忘了“👍点赞”、“✍️评论”和“❤️收藏”，支持我一下哦！
关注我获取更多源码，这里有丰富的前端插件、炫酷的3D效果、图片展示、文字效果，以及整站模板、大学生毕业HTML模板、期末大作业模板等！在这里，许多前端开发者聚集在一起，共同探讨前端和Node知识，互相学习！
扫一扫
5280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
