首页 > 分享 > web网页设计期末课程大作业——电影介绍5页HTML+CSS制作

web网页设计期末课程大作业——电影介绍5页HTML+CSS制作

花匠小妙招
2024-11-13 13:39

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

精彩专栏推荐

❤ 【作者主页——获取更多优质源码】
❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】

文章目录一、网页介绍一、网页效果二、代码展示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><head><meta charset="utf-8" /><title>电影介绍</title><link rel="stylesheet" type="text/css" href="css/index.css" /><link rel="stylesheet" type="text/css" href="css/head.css" /><link rel="stylesheet" type="text/css" href="css/bottom.css" /></head><body><div id="header"><div id="header_con"><p id="logo">电影鉴赏</p><audio id="musicfx" loop="loop" autoplay="autoplay"><source src="./yy.mp3" type="audio/mpeg" id="hhh"></audio><ul><li><a href="index.html">首页</a></li><li><a href="index2.html">你的名字</a></li><li><a href="index3.html">你好世界</a></li><li><a href="index4.html">天气之子</a></li><li><a href="index5.html">帮助反馈</a></li></ul></div></div><div id="content"><div id="content-top"><h3>电影推荐</h3><div class="nr"><div class="img-nr"><img src="img/ndmz.jpg"></div><div class="nr-text"><h4>《你的名字》</h4><p>《你的名字》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影。作品于2016年8月26日在日本上映。中国内地于2016年12月2日上映。作品讲述了男女高中生在梦中相遇，并寻找彼此的故事。中国大陆于2017年8月26日全网首播。</p><button type="button"><a href="index2.html">GO!</a></button></div></div><div class="nr"><div class="img-nr"><img src="img/nhsj.jpg"></div><div class="nr-text"><h4>《你好世界》</h4><p>《你好世界》是由伊藤智彦执导的原创动画电影，北村匠海、松坂桃李、滨边美波、子安武人等人参与配音。影片以2027年的日本京都为舞台，讲述了16岁的高中生直实为了拯救爱人瑠璃而卷入了现实与虚拟交织的记忆世界故事。该片于2019年9月20日在日本上映，2021年6月11日在中国大陆上映。</p><button type="button"><a href="index3.html">GO!</a></button></div></div><div class="nr"><div class="img-nr"><img src="img/tqzj.jpg"></div><div class="nr-text"><h4>《天气之子》</h4><p>《天气之子》是由新海诚执导、Comix WaveFilm负责制作的原创动画电影，该片讲述了少年帆高与拥有操控天气超能力的少女阳菜之间的奇幻爱情故事。影片于2019年7月19日在日本上映，中国香港由安乐影片代理，于2019年8月8日上映；中国台湾由车库娱乐代理，于2019年9月12日上映；中国内地由华夏电影引进，于2019年11月1日上映；中国大陆于2020年7月21日全网首播。</p><button type="button"><a href="index4.html">GO!</a></button></div></div></div></div><div id="bottom"><p>xxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxx</p></div></body> </html>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

2.CSS代码

body{background-image: url(../img/boby.png);color: #FFFFFF; } #content{width: 1200px;margin: auto; } #content-top{margin-top: 50px; } #content-top h3{font-size: 24px; } .nr{margin-top: 30px;overflow: hidden;height: auto;margin-left: 40px;margin-bottom: 50px; } .img-nr{position: relative;width: 500px;height: 300px;overflow: hidden;border: 2px solid #FFFFFF;padding: 0 10px;float: left;cursor: pointer; } .img-nr img{position: absolute;width: 500px;top: -270px; } .nr-text{display: inline-block;width: 500px;padding-left: 80px; } .nr-text h4{padding-top: 10px;font-size: 20px; } .nr-text p{padding-top: 20px;text-indent: 2em;font-size: 16px;line-height: 34px; } .nr-text button{margin-top: 20px;width: 60px;height: 30px; } #bottom{height: 60px;background-color: #333333;text-align: center; } #bottom p{line-height: 30px; }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768

三、个人总结

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

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