HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
精彩专栏推荐
❤ 【作者主页——获取更多优质源码】
❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】
1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。
代码如下(示例):以下仅展示部分代码供参考~
<!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>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071body{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、视频、音乐,表单技术的使用;页面清爽、美观、大方,不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。1.看到这里了就 【点赞收藏博文】 三连支持下吧,你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.以上内容技术相关问题可以相互学习交流
相关知识
HTML+CSS网页设计期末课程大作——篮球网页设计(6页) 学校篮球网页制作模板 学生简单体育运动网站设计成品
HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
Web前端期末大作业
150.大学生HTML期末大作业 —【鲜花主题网页】 Web前端网页制作 html+css
HTML5期末大作业:网上花店/鲜花网站设计——大气的鲜花预订商城(6页) HTML+CSS+JavaScript
html5期末大作业鲜花花卉主题网页设计html网页模板源码?
web前端期末大作业:美食文化网页设计与实现——美食餐厅三级(HTML+CSS+JavaScript) (2)
大学生网页设计作业 html+css+js网上鲜花售卖网站(期末网页设计作业)
HTML5期末大作业:鲜花超市网站设计——鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品
用DIV+CSS技术设计的鲜花网站(web前端网页制作课作业)
网址: web网页设计期末课程大作业——电影介绍5页HTML+CSS制作 https://m.huajiangbk.com/newsview539853.html
上一篇: 花的UI图片 |
下一篇: HTML+CSS+JavaScr |