HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
- 2.CSS代码
三、个人总结
四、精彩推荐

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>电影速递</title><link rel="stylesheet" type="text/css" href="css/电影速递.css">
</head>
<body>    <audio loop autoplay><source src="music/麻雀.mp3" type="audio/mpeg"></audio><script> $(document).snowfall(); </script><div class="big"><div class="main"><header><div class="nav"><h2><span class="biaoti">电影速递</span><marquee class="gundong" align="left" behavior="scroll" direction="left" height="30" width="600" loop="-1" scrollamount="5" scrolldelay="10" onMouseOut="this.start()" onMouseOver="this.stop()">欢迎来到电影速递，一个推荐好电影的网站</marquee>     <a href="login.html">登录</a><a href="register.html">注册</a>                </h2><div class="fenlei"><ul><li>电影首页</li><li>最新上映</li><li>最新排行</li><li>欧美电影</li><li>韩国电影</li><li>国产电影</li><li>影讯购票</li><li>年度榜单</li></ul></div></div></header><div class="content"><div class="zhutu"><img src="data:image/复联.jpg"></div><div id="list"><h3 class="titles">电影分类</h3><ul>            <li>动作</li><li>科幻</li><li>剧情</li><li>喜剧</li><li>爱情</li><li>悬疑</li><li>恐怖</li><li>犯罪</li><li>战争</li><li>历史</li><li>奇幻</li><li>冒险</li><li>灾难</li><li>传记</li><li>武侠</li></ul></div><div class="tuijian"><p>电影推荐</p><hr/></div><div class="tuijian1"><a href="复仇者联盟4.html"><img src="data:image/复仇者联盟4.jpg"><p>复仇者联盟4</p></a><a href="肖申克的救赎.html"><img src="data:image/肖申克的救赎.jpg"><p>肖申克的救赎</p></a><a href="辛德勒的名单.html"><img src="data:image/辛德勒的名单.jpg"><p>辛德勒的名单</p></a><a href="阿甘正传.html"><img src="data:image/阿甘正传.jpg"><p>阿甘正传</p></a><a href="这个杀手不太冷.html"><img src="data:image/这个杀手不太冷.jpg"><p class="p5">这个杀手不太冷</p></a><a href="千与千寻.html"><img src="data:image/千与千寻.jpg"><p>千与千寻</p></a><a href="泰坦尼克号.html"><img src="data:image/泰坦尼克号.jpg"><p>泰坦尼克号</p></a><a href="盗梦空间.html"><img src="data:image/盗梦空间.jpg"><p>盗梦空间</p></a><a href="霸王别姬.html"><img src="data:image/霸王别姬.jpg"><p>霸王别姬</p></a></div></div><div class="footer"><div class="link"><a href="">关于我们</a>|<a href="">联系我们</a>|<a href="">人才招聘</a>|<a href="">商家入驻</a>|<a href="">广告服务</a>|<a href="">友情链接</a>|<a href="">速递社区</a>|<a href="">速递公益</a>|<a href="">English Site</a></div><div class="copy">Copyright©2019-2020 版权所有</div></div> </div></div>
</body>
</html>

2.CSS代码

*{padding:0;margin:0;
}.big
{width: 100%;height: 1300px;background:url(../image/å¦‡è”.jpg) no-repeat;background-size: 100% 100%;position: relative;
}.main
{width: 1000px;height: 1250px;background-color: white;border:1px white solid;position:absolute;margin-left: 130px;margin-top: 30px;border-radius: 5px;}a{text-decoration: none;
}li{list-style: none;
}header
{height:100px;width:1000px;}.footer .link
{height: 30px;width: 1000px;position: absolute;margin-top: 1190px;margin-left: 180px;color: black;
}.footer .copy
{height: 30px;width: 1000px;position: absolute;margin-top: 1220px;margin-left: 380px;color: black;
}.content img{width: 950px;height: 450px;position: absolute;margin-left: 24px;
}h2 a:nth-of-type(1)
{width:70px;height:30px;line-height:30px;color:#FF9900;border:2px #fad65c solid;margin-left:648px;
}h2 a:nth-of-type(2)
{width:70px;height:30px;line-height:30px;color:#FF9900;border:2px #fad65c solid;margin-left: 12px;margin-bottom: 12px;
}h2 a
{font-size: 15px;text-align:center;display:inline-block;border-radius:35px;
}h2 a:hover
{color:#986b0d;background:#fad65c;
}header .nav h2 .biaoti
{font-family:KaiTi;font-style:oblique;font-size: 30px;margin-left: 25px;color: #8A2BE2;
}header .nav h2 .gundong{width:230px;height: 30px;font-size: 20px;position: absolute;color: #FF33CC;margin-top: 6px;margin-left: 200px;
}header .nav .fenlei li
{list-style: none;float: left;width: 77px;height: 30px;line-height: 30px;text-align: center;margin-right:40px;color: #CC0033; font-size: 12px;border-top: 1px solid #99CCFF;border-bottom: 1px solid #99CCFF;}header .nav .fenlei li:nth-of-type(1){margin-left: 50px;}header .nav .fenlei li:hover
{background: orange;border: 1px solid orange;border-radius:15px;color: #0099CC;font-size: 12px;transition: all 1s ease 0.1s;transform: skew(15deg);
}#list
{   width:190px;border:1px #aacbee solid;padding:1px #aacbee solid; background-color:#f5f9fc;position: absolute;margin-left: 23px;margin-top:470px;
}.titles
{height: 30px;text-indent: 25px;font-weight: bold;color: #663366;background: url(../image/title_icon.gif)  left center no-repeat;
}.content #list ul li
{font-size: 13px;color: #003366;list-style: none;text-decoration: none;height:40px;line-height:40px;text-indent:25px;border-top:1px #cfe2f5 solid;background: url(../image/submenu.gif)  right  center no-repeat;
}h3
{text-indent: 1em;
}hr
{color: #aacbee;size: 1px;margin-top: 16px;width: 731px;
}.content
{position: relative;
}.content .tuijian
{position: absolute;margin-left:240px;margin-top:466px;font-family: STFangsong;font-size: 20px;color: #FF6666;font-style:oblique;font-weight: bolder;
}.content .tuijian1
{height: 1000px;width: 800px;position: absolute;margin-left:240px;margin-top:520px;
}.content .tuijian1 a
{float: left;margin-bottom:203px;margin-right: 250px;
}.content .tuijian1 a img
{height: 153px;width: 230px;border-radius: 8px;
}.content .tuijian1 a img:hover
{border: 5px solid orange;transform: scale(1.2);z-index: 1;}.content .tuijian1 a img:nth-of-type(1)
{position: absolute;margin-left:0px;margin-top: 4px;
}.content .tuijian1 a p
{position: absolute;margin-left: 74px;margin-top: 162px;color: #006633;font-weight:bolder;
}

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、精彩推荐

1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题可以相互学习交流

HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网相关推荐

20个期末作业——学生个人html静态网页制作基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
HTML+CSS大作业: 抗击疫情网页制作作业_疫情防控网页设计模板HTML_ 简单学生网页设_静态HTML+CSS网站制作成品...
HTML+CSS大作业: 抗击疫情网页制作作业_疫情防控网页设计模板HTML_ 简单学生网页设计_静态HTML+CSS网站制作成品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大 ...
26HTML5期末大作业：动漫电网站设计——动漫电影《你的名字》(7页) HTML+CSS大作业_ 动漫电网页制作作业_动漫电网页设计...
HTML5期末大作业:动漫电网站设计--动漫电影<你的名字>(7页) HTML+CSS大作业: 动漫电网页制作作业_动漫电网页设计- 常见网页设计作业题材有个人. 美食. 公司. 学校. ...
HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业_ 网页制作作业_疫情防控网页设计...
HTML5期末大作业:商城网站设计--仿天猫商城(9页) HTML+CSS大作业: 网页制作作业_疫情防控网页设计- 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电 ...
HTML5期末大作业：在线电影网站设计——电影速递网(12页面)含登录注册HTML+CSS+JavaScript
HTML5期末大作业:在线电影网站设计--电影速递网(12页面)含登录注册HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业 ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
带你认识最基本的网页和网站，什么是静态网页和动态网页，有什么区别？
一,网站和网页的认识网页就是一个文件,后缀名通常为HTML,htm,php,aspx,jsp的文件. 其本质就是将文字+图片+超链接以一种和谐,美观的方式排列在页面上: 网站就是由网页及其其他资源文 ...
web网页设计实例作业 ——中国水墨风的小学学校网站(6页) 专题网页设计作业模板学校物静态HTML网页模板下载
web网页设计实例作业 --中国水墨风的小学学校网站(6页) 专题网页设计作业模板学校物静态HTML网页模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器 ...

HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网