网页期末作业制作一个简单HTML电影网页设计（HTML+CSS）
2024-05-09 20:55:02
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><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>电影网站</title><link rel="stylesheet" href="css/main.css" /><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/icofont.css" /><link rel="stylesheet" href="css/mian_style.css" /><script src='./js/jquery.js'></script></head><body><!--头部开始 --><header class="header"><div class="container"><div class="header_area"><div class="logo"><a href="index.html"><img src="picture/logo.png" alt="logo"/></a></div> <div class="meau"><ul><li><a class="active" href="index.html">首页</a></li><li><a href="movies.html">电影</a></li><li><a href="celebrities.html">明星</a></li><li><a href="hot.html">热点</a></li><li><a href="news.html">新闻</a></li><li style="width: 120px;"><a href="###" class="theme-btn"><i class="icofont icofont-ticket"></i> 订票 </a></li></ul></div></div></div><!--头部结束--> </header><!--内容部分开始--><section id="content"><!--banner开始--><div class="banner"><ul class="list"><li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li><li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li><li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li><li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li><li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li></ul><ul class="btn"><li class="on">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><a href="javascript:;" class="arrow left"><</a><a href="javascript:;" class="arrow right">></a></div><!--近期热播--><div class="con_area"><div class="container"><div class="recent_con"><div class="con_top"><h1><i class="icofont icofont-movie" ></i>近期热播</h1><a href="index.html" class="more">MORE>></a></div><div class="con_main"><ul style="overflow:hidden;margin-bottom: 20px;"><li class="img_right"><img src="picture/portfolio1.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><div class="portfolio-content"><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></div></li><li class="img_right"><img src="picture/portfolio2.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></li><li class="img_right"><img src="picture/portfolio2.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></li><li><img src="picture/portfolio4.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></li> </ul><ul><li class="img_right"><img src="picture/portfolio5.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></li><li class="img_right"><img src="picture/portfolio6.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></li><li class="img_right"><img src="picture/portfolio2.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></li><li><img src="picture/portfolio4.png" alt="1" /><a><i class="icofont icofont-ui-play"></i></a><h2>Boyz II Men</h2><div class="review"><div class="author-review"><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b><b class="icofont icofont-star"></b></div><h4>180k voters</h4></div></li> </ul></div></div></div></div><!--经典电影--><div class="con_area"><div class="container"><div class="jd_con"><div class="con_top"><h1><i class="icofont icofont-film" ></i>经典电影</h1><a href="index.html" class="more">MORE>></a></div><div class="row" style="overflow: hidden; width: 100%;"><div class="col-md-9"><div class="video-area"><img src="picture/video1.png" alt="video" /><a href="###" class="popup-youtube"><i class="icofont icofont-ui-play"></i></a><div class="video-text"><h2>Angle of Death</h2><div class="review"><div class="author-review"><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i></div><h4>180k voters</h4></div></div></div><div class="video-area"><img src="picture/video1.png" alt="video" /><a href="###" class="popup-youtube"><i class="icofont icofont-ui-play"></i></a><div class="video-text"><h2>Angle of Death</h2><div class="review"><div class="author-review"><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i></div><h4>180k voters</h4></div></div></div><div class="video-area"><img src="picture/video1.png" alt="video" /><a href="###" class="popup-youtube"><i class="icofont icofont-ui-play"></i></a><div class="video-text"><h2>Angle of Death</h2><div class="review"><div class="author-review"><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i></div><h4>180k voters</h4></div></div></div><div class="video-area"><img src="picture/video1.png" alt="video" /><a href="###" class="popup-youtube"><i class="icofont icofont-ui-play"></i></a><div class="video-text"><h2>Angle of Death</h2><div class="review"><div class="author-review"><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i><i class="icofont icofont-star"></i></div><h4>180k voters</h4></div></div></div></div></div></div></div></div><!-- 最新电影--><div class="con_area"><div class="container"><div class="jd_con"><div class="con_top"><h1><i class="icofont icofont-coffee-cup" ></i>最新电影</h1><a href="index.html" class="more">MORE>></a></div></div><div class="news-slide-area"><div class="news-slider"><div class="single-news"><div class="news-bg-1"></div><div class="news-date"><h2><span>NOV</span> 25</h2><h1>2017</h1></div><div class="news-content"><h2>The Witch Queen</h2><p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p></div><a href="#">Read More</a></div><div class="single-news"><div class="news-bg-2"></div><div class="news-date"><h2><span>NOV</span> 25</h2><h1>2017</h1></div><div class="news-content"><h2>The Witch Queen</h2><p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p></div><a href="#">Read More</a></div><div class="single-news"><div class="news-bg-3"></div><div class="news-date"><h2><span>NOV</span> 25</h2><h1>2017</h1></div><div class="news-content"><h2>The Witch Queen</h2><p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p></div><a href="#">Read More</a></div></div></div></div></div></section><!--end start--><footer id="end"><div class="container"><span class="company">北京时代国际影业有限公司</span></div></footer></body><script type="text/javascript" src="js/main.js"></script>
</html>2.CSS代码
body{line-height: 24px;font-size: 14px;color: #b6b7b9;background: #13151f;font-family: 'Poppins', sans-serif;font-weight: 400;position: relative;
/* height: 5000px;*/
}
.header{padding: 18px 0;width: 100%;border-bottom: 1px solid #252838;z-index: 99;
}
.header_area{overflow: hidden;
}
.container{max-width: 1140px;margin: 0 auto;
}
.logo{float: left;
}
.logo a{display: inline-block;
}
.meau{float: right;padding-top: 34px;
}
.meau li{float: left;width: 90px;text-align: center;
}
.meau li a{font-family: "微软雅黑";font-size: 14px;color: #ffffff;text-decoration: none;
}
.meau li a:hover{color: #eb315a;
}
.meau li .active{color: #eb315a;
}
.meau li .theme-btn{background: #eb315a;border: 1px solid #eb315a;color: #fff;border-radius: 35px;padding: 5px 25px;display: inline-block;font-size: 15px;cursor: pointer;font-weight: 500;
}
.meau li .theme-btn:hover{color: #eb315a;border: 1px solid #eb315a;background: rgba(235,49,90,0.2);
}
/*banner*/
.banner{width: 100%;height: 450px;margin: 0px auto;overflow: hidden;position: relative;
}.list li{position: absolute;width: 100%;text-align: center;}.btn{font:14px/2.5em "微软雅黑";text-align: center;position: absolute;left: 50%;transform: translateX(-55%); bottom:40px; z-index: 2; }.btn li{float: left;width: 30px;line-height: 30px;border-radius: 50%;background: salmon;margin: 0 5px;color: #fff;cursor: pointer;}.btn .on{background: slateblue;}.list .on{z-index: 1;}.arrow{position: absolute;top: 50%;transform: translateY(-40%);width: 30px;text-align: center;line-height: 60px;background: rgba(0,0,0,0.3);color: #fff;text-decoration: none;font-size: 20px;z-index: 2;}.right{right: 14%;}.left{left:14%;}.arrow:hover{background: rgba(0,0,0,0.5);font-weight: bold;text-decoration: none;}
/*近期热播*/
.con_area{padding-top: 30px;
}
.recent_con{overflow: hidden;
}
.con_top{height: 54px;padding:8px 0;border-bottom: 1px solid #ffffff;
}
.con_top h1{float: left;
}
.con_top h1 i{color: #fece50;font-size: 40px;margin-right: 5px;
}
h1{font-size: 36px;color: #ffffff;
}
.more{float: right;line-height: 74px;color: #eb315a;
}
.con_main{margin-top: 50px;
}
.con_main li{float: left;display: block;position: relative;cursor: pointer;width: 255px;
}
.con_main li:hover img{width: 102%;height: 102%;
}
.con_main li img{transition: 0.9s
}
.con_main .img_right{margin-right: 2.2%;
}
.con_main li a{display: block;position: absolute; top: 42%;margin-top: -30px;margin: auto;left: 50%;margin-left: -30px;
}
.con_main li i{width: 60px;height: 60px;line-height: 60px;color: #fff;border: 2px solid #fff;border-radius: 50%;text-align: center;font-size: 18px;display: inline-block; transition: all 0.4s; }
.con_main li i:hover{color: orange;border-color: orange;
}
/*底部*/
#end{margin-top: 30px;background:#202334;
}
.company{width: 100%;display: inline-block;padding: 20px 0px;text-align: center;
}
/*详情页标题*/
.breadcrumb-area-content h2{margin-top: 30px;
}三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、心得体会
许多开发人员认为揽长设计是一种天生的能力，而创造力是与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。你不必天生就可以创建一个漂亮的网站的艺术家，这需要实践，熟不知局限太大，自己想要的内容板式也要跟着思路走，越往后看着自己的站点越不顺眼，没有一点成就感。
①在人群中脱颖而出。许多开发都喜欢搬运其它站点页面，很容易看出它不是自己设计的。如果个人网站的目的是展示你的能力，那么使用模板可能会降低别人对你的肯定，自己设计的独特风格，让你站点在众多的站点中脱颍而出。
②练习技巧。设计它会帮助你练习设计原则，工具，HTML和CSS。你将更容易开发用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。
以前接私活的时侯，不会设计页面，搬运其它站点页面，导致自己修改图片和部分页面的时候，不会使用工具，设计出来的页面死板不灵活，客户不满意，自己看了也觉得很普通，没有给你心意的感觉。
③更好的应用程序性能。你的网站将是轻量级的，并且使用自定义CSS会具有更好的性能。如果要包括U库或模板，则它可能包含大量代码，以涵盖您未使用的各种可能的自定义。如果未使用的代码发送给用户，则会对你网站的性能产生负面影响。加载慢，打开网页慢，被很多人不接受。
④发展职业技能。在Wb开发角色中，你可能不必从头开始实现完整的网站设计，但是你应该能够制作与现代设计一致的外观精美的界面。成为“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架，同时能够熟悉设计，产品方面的知识。全栈开发人员应具有些基本的设计知识，并能够为用户提供一致的体验。当然从中学习到很多的技能知识，这是毋雨置疑的。
⑤可能会很有趣。创造出令自己感到骄做的东西是一种有趣的经历。如果您花一些时间练习它，琢磨它，打迄础厢自君胸乘学矫录更好，生活中发现美是一件很美好的事，但我觉得创造美更让人觉得骄傲。
五、精彩推荐
看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。
网页期末作业制作一个简单HTML电影网页设计（HTML+CSS）相关推荐
- 制作一个简单HTML电影网页设计（HTML+CSS）
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 制作一个简单HTML电影网页设计（HTML+CSS）---电影主题网站 6页带
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | ...
- 使用HBuilder制作一个简单的HTML5网页
使用HBuilder制作一个简单的HTML5网页 写在前面:开始入门网页制作,写下第一篇博文作为记录.纯纯小白一个,如有阅览者,欢迎批评指正!❤ 先放上效果图: 使用HBuilderX编辑器创建一个& ...
- 制作一个简单HTML个人网页网页（HTML+CSS）源码
一个简单的HTML网页,可用于大学html期末作业,照片都是网上找的 看一下成品图: 主页代码,这里的<link href="images/css.css" rel=&quo ...
- 如何制作一个简单的html网页
1.新建一个记事本 2.开始写html代码 制作一个简单的网页<html><head><title>网页的名字</title></head> ...
- HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码 学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码 学生个人html静态网页制作成品代码...
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 制作一个简单HTML游戏网页（HTML+CSS）_英雄联盟 lol 7页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站的 ...
最新文章
- 解析Spring IOC原理——工厂模式与反射机制的综合应用
- svm 支持向量机 回归 预测_机器学习：简单理解支持向量机SVM
- C# - JSON详解
- 阿里程序员受邀去华为面试，却因这点没被录取。
- 基于JAVA+SpringMVC+Mybatis+MYSQL的个人记账管理系统
- ROS学习笔记3（创建一个ROS Package）
- ROS-Kinetic安装turtlebot-3并仿真
- 小程序开发中遇到的坑
- php 去除 ufeff,PHP去掉诡异的BOM \ufeff
- 上海大华条码称代码_大华条码秤设置方法
- 屌丝网，上线了 哈哈，
- Java常用集合排序
- add as library是什么？有什么用？如何打开？
- git 撤销提交 撤销暂存区 取消操作
- let const var 区别详解
- 部署github上的代码到本地pycharm
- NET开源 .NET Open Source Developer Projects
- python换脸教程_教你如何用200行Python代码“换脸”教程
- oracle povit,oracle pivot 和 unpivot 函数的使用
- 2022-7月-日报