HTML5期末大作业【红色的电影售票平台网站】web前端 html+css+javascript网页设计实例 企业网站制作
2024-05-10 21:02:34
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 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" />
<title>电影售票系统-首页</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css/jquery.js"></script>
<script language="javascript" type="text/javascript" src="css/yao.js"></script></head>
<body>
<div class="header"><div class="top_img"><div class="logo"><a href="#"><img src="data:images/logo.gif" width="300" height="80" /></a></div><div class="rx"><img src="data:images/topad.gif" width="500" height="100" /></div><div class="top_nav"><p><a href="#"> 快速订票系统入口</a> </p><p><a href="#"> 最新优惠活动中心</a></p></div><div class="clear"></div></div><div class="menu"><ul><li id="a1"><a href="index.html">首 页</a></li><li id="a2"> <a href="websj.html">热门影片</a></li><li id="a3"><a href="case.html">正在热映</a></li><li id="a4"><a href="product.html">即将上映</a></li><li id="a5"><a href="list.html">经典回味</a></li><li id="a6"><a href="tuiguang.html">全球首映</a></li><li id="a7"><a href="#">热门活动</a></li><li id="a8"><a href="sub.html">优惠专区</a></li><li id="a9"><a href="contact.html">放映时刻表</a></li></ul></div>
</div>
<div class="banner"><div id="YFocus"><div id="YImage"><p id="YPhotos"> <a href="#" title="11"><img src="data:images/b5.jpg" alt="11" /></a> <a href="#" title="11"><img src="data:images/b1.jpg" alt="111" /></a> <a href="#" title="11"><img src="data:images/b3.jpg" alt="22" /></a> <a href="#" title="1"><img src="data:images/b4.jpg" alt="22" /></a> </p></div><p id="YSamples"> <a href="#1" class="current" title="2"><img src="data:images/bx5.jpg" alt="22" /></a> <a href="#1" title="2"><img src="data:images/bx1.jpg" alt="2" /></a> <a href="#1" title="2"><img src="data:images/bx3.jpg" alt="2" /></a> <a href="#1" title="2"><img src="data:images/bx4.jpg" alt="2" /></a> </p></div><script language="javascript" type="text/javascript">
<!--YAO.YTabs({tabs: YAO.getEl('YSamples').getElementsByTagName('img'),contents: YAO.getEl('YPhotos').getElementsByTagName('img'),auto: true,scroll: true,scrollId: 'YPhotos'});
//-->
</script>
</div>
<div class="contenter"><div class="left"><div class="left_1"><h2><span><a href="#">更多热映大片</a></span>全球抢先看 >></h2><div class="left_1_con"><div class="left_1_l"><div class="scrolldoorFrame"><ul class="scrollUl"><li class="sd01" id="m01"><a href="#"><dl class="hd_list"><dt><img src="data:images/hd01.jpg" width="81" height="35" /></dt><dd>【青春期3】</dd><dd>7月13日上映>></dd></dl></a></li><li class="sd02" id="m02"><a href="#"><dl style="border-bottom:0px #fff solid;"><dt><img src="data:images/fa3.gif" width="56" height="45" /></dt><dd style=" padding-top:10px;"><select name=""><option selected="selected">请选择场次</option><option>166(2号厅)</option><option>168(3号厅)</option><option>188(4号厅)</option></select></dd><div class="clear"></div></dl><dl><dt><img src="data:images/fa4.gif" width="56" height="45" /></dt><dd style=" padding-top:10px;"><input name="" type="button" class="dgbg" value="立即订购" /></dd><div class="clear"></div></dl><div class="wxpd"><a href="#"><img src="data:images/104.jpg" /></a></div></div></div><div class="right_5 top10px"><h2>热门影片榜 </h2><div class="inner02"><ul class="server_list"><li><a href="#"><span>19888</span>白雪公主与猎人</a></li><li><a href="#"><span>18667</span>三个火枪手</a></li><li><a href="#"><span>17558</span>王者之剑</a></li><li><a href="#"><span>17452</span>南极大冒险</a></li><li><a href="#"><span>9955</span>肖申克的救赎</a></li><li><a href="#"><span>9858</span>无法触碰</a></li><li><a href="#"><span>7522</span>忠犬八公的故事</a></li><li><a href="#"><span>5200</span>惊悚快感</a></li><li><a href="#"><span>2777</span>气场大比拼</a></li></ul></div></div><div class="right_4 top10px"><h2><span><a href="#"> 更多影片 </a></span>今日上映推荐 </h2><div class="inner022"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="135" align="center" width="140"><a href="#"><img src="data:images/index_r_03_seo.gif" width="120" height="100" /></a></td><td><a href="#">超凡蜘蛛侠</a><p>主演:成龙、谢霆锋</p></td></tr><tr><td height="135" align="center" width="140"><a href="#"><img src="data:images/index_r_03_seo2.gif" width="120" height="100" /></a></td><td><a href="#">复仇者联盟</a><p>主演:周星驰、梁朝伟</p></td></tr><tr><td height="135" align="center" width="140"><a href="#"><img src="data:images/index_r_03_seo3.gif" width="120" height="100" /></a></td><td><a href="#">枕边凶灵</a><p>主演:安德鲁·加菲尔德</p></td></tr><tr><td height="135" align="center" width="140"><a href="#"><img src="data:images/index_r_03_seo4.gif" width="120" height="100" /></a></td><td><a href="#">疯魔美女2</a><p>主演:张静初·李冰冰</p></td></tr></table></div></div></div><div class="clear"></div><div class="bottom top10px"><h2>订票帮助中心 >></h2><div class="bottom_con"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"><a href="#"><img src="data:images/20091130101638768.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="data:images/20091130101739119.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="data:images/20091130101911881.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="data:images/20091130102100902.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="data:images/20091130102356804.jpg" width="128" height="35" /></a></th></tr><tr><td><a href="#">如何快速购票</a></td><td><a href="#">购票说明介绍</a></td><td><a href="#">影片信息查询</a></td><td><a href="#">领悟科技公司</a></td><td><a href="#">公司新闻资讯</a></td></tr><tr><td><a href="#">找到欣赏影片</a></td><td><a href="#">支付相关说明</a></td><td><a href="#">联系我们</a></td><td><a href="#">电影订票系统</a></td><td><a href="#">河南影片营销策划</a></td></tr><tr><td><a href="#">今日快速订票说明</a></td><td><a href="#">优惠活动最新折扣</a></td><td><a href="#">电影购票系统说明</a></td><td><a href="#">领悟科技公司介绍</a></td><td><a href="#">领悟精致生活俱乐部</a></td></tr></table></div></div><div class="clear"></div>
</div>
<div class="footer"><div class="footer_nav">领悟科技旗下：电影售票系统 <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="#">公司新闻</a> | <a
</body>
</html>2.CSS代码
@charset "utf-8";
/* CSS Document */
.contenter{ width:972px; margin:0 auto;}
.left{ width:730px; float:left; overflow:hidden;}
.right{ width:230px; float:right;overflow:hidden;}
.left_1{ border:1px solid #ccc; height:352px; overflow:hidden;}
.left_1 h2{ background:#eeeeee; height:32px; margin:1px; font-size:14px; line-height:32px; text-indent:10px; color:#942F3F;}
.left_1 h2 span{ float:right; padding-right:10px; font-weight:normal;}
.left_1_con{ padding:10px;}
.left_1_l{ width:450px; float:left; height:300px; }
.left_1_r{ width:230px; float:right;height:300px;}
.left_1_r h3{ height:24px; line-height:24px; font-size:12px; }
.left_1_r dl{ height:65px; margin-bottom:8px;}
.left_1_r dl dt{ width:82px; height:67px; float:left; margin-right:5px;}
.left_1_r dl dt img{ border:1px solid #ccc;}
.left_1_r dl dd{ line-height:16px;}
.left_1_r dl dd strong{ color:#942F3F;}
.left_1_r ul li{ height:28px; line-height:28px; font-family:"宋体";}
.left_1_r ul li a{height:28px; line-height:28px; background:url(../images/ico.gif) no-repeat left center; padding-left:25px;}
.left_1_r ul li a span{ float:right;}
.left_1_r p{ text-align:right; height:22px; line-height:22px;}
.left_2,.left_3,.left_4,.left_5{ height:215px; overflow:hidden;}
.left_2 h2{ background:url(../images/title05.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_3 h2{ background:url(../images/title06.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_4 h2{ background:url(../images/title07.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_5 h2{ background:url(../images/title07.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_2 h2 a,.left_3 h2 a,.left_4 h2 a,.left_5 h2 a{ color:#fff; text-decoration:underline;}
.left_4 h2 a:hover,.left_5 h2 a:hover{ color:#fff; text-decoration:none;}
.left_2 h2 span,.left_3 h2 span,.left_4 h2 span,.left_5 h2 span{ font-weight:normal;}
.inner{ padding:10px;}
.anli_list{ float:left; width:157px; margin:5px 10px 0px 10px;_margin:0px 7px; overflow:hidden;}
.anli_list dt{ background:url(../images/probg.gif) no-repeat; height:100px; overflow:hidden; width:150px; padding:2px 5px 14px 2px; _padding:2px 4px 14px 2px; }
.anli_list dd { line-height:30px; text-align:center; overflow:hidden;}
.anli_list dd a{ line-height:30px; text-align:center; font-weight:bold;}
.left_5{ background:url(../images/alibg.gif) repeat-x left bottom;}
.anli_list dd p{ line-height:24px; text-align:left; padding-left:3px;}.left_6{ border:1px solid #ccc; overflow:hidden; width:728px;}
.left_6 h2{ background:#eeeeee; height:32px; margin:1px; font-size:12px; line-height:32px; text-indent:10px;}
.left_6 h2 span{ float:right; padding-right:10px; font-weight:normal;}
.left_6_con{ padding:10px 0px 0px 10px;}
.left_6_con strong{color:#942F3F;}
.fx_list{ width:230px; height:67px; float:left; margin-right:9px; margin-bottom:20px; _margin-bottom:10px; overflow:hidden;}
.fx_list dt{ width:65px; height:65px; float:left; margin-right:10px;}
.fx_list dt img{ border:1px solid #ccc;}
.right_1{height:349px; overflow:hidden; width:230px; background:url(../images/last.gif) no-repeat left bottom; padding-bottom:3px;}
.right_1 h2{ background:url(../images/title01.jpg) no-repeat; height:34px; line-height:34px; font-size:12px; text-indent:10px; color:#fff;}
.right_1 h2 span{ float:right; font-weight:normal; padding-right:10px;}
.inner02{ border-left:1px solid #ccc;border-right:1px solid #ccc; padding:2px 0;_padding:2px 0 0 0; }
.inner022{ border-left:1px solid #ccc;border-right:1px solid #ccc; padding:2px 2px 0 0; }
.inner022 a{ line-height:30px; text-decoration:none; font-size:12px; font-weight:bold;}
.inner022 p{ line-height:30px;}
.right_1 dl{ height:45px; border-bottom:1px solid #ccc; padding:1px 30px 1px 0px; overflow:hidden;}
.right_1 dl dt{ height:45px; width:56px; float:left;}
.right_1 dl dd{}
.right_1 dl dd select { width:100px; height:22px; line-height:22px; }
.dgbg{ width:100px; height:26px; border:none; background:url(../images/dgbg.jpg) no-repeat center center; color:#fff; font-size:14px; cursor:pointer;}
.dgbg02{ width:100px; height:26px; border:none; float:right; background:url(../images/dgbg.jpg) no-repeat center center; color:#fff; font-size:14px; cursor:pointer;}
.wxpd{height:104px; width:208px; padding:10px 10px;}.right_2{ border:1px solid #ccc; padding:5px 3px 0px;}
.right_2 h2{ height:25px; line-height:25px; border-bottom:1px dotted #ccc; font-size:12px; text-indent:16px; margin-bottom:5px;}
.right_3 {background:url(../images/last.gif) no-repeat left bottom; padding-bottom:3px; }
.right_4{background:url(../images/last.gif) no-repeat left bottom; padding-bottom:3px; }
.right_3 h2{ background:url(../images/title02.jpg) no-repeat; height:34px; line-height:34px;font-size:12px; text-indent:10px; color:#fff;}
.right_4 h2{ background:url(../images/title01.jpg) no-repeat; height:34px; line-height:34px;font-size:12px; text-indent:10px; color:#fff;}
.right_3 h2 span,.right_4 h2 span,.right_5 h2 span{ float:right; font-weight:normal; padding-right:10px;}.ym_list{ height:87px; padding:10px 0;}
.ym_list dt{ height:68px; padding:2px 11px;}
.ym_list dd{ height:15px; line-height:15px; text-align:center;}.right_5{ }
.right_5 h2{background:url(../images/title04.jpg) no-repeat; height:34px; line-height:34px;font-size:12px; text-indent:10px; color:#000; }
.right_5 .inner02{border-bottom:1px solid #ccc; padding:10px; overflow:hidden;}.server_list{}
.server_list li{ background:url(../images/icon.png) no-repeat left center; height:30px; line-height:30px; _height:31px; _line-height:31px; text-indent:20px;}
.server_list li a span{ float:right;}
.server{ clear:both; border:1px solid #ccc; overflow:hidden; }
.server h2{ background:#eeeeee; height:32px; margin:1px; font-size:12px; line-height:32px; text-indent:10px;}
.bottom{ clear:both; border:1px solid #ccc; overflow:hidden; }
.bottom h2{ background:#eeeeee; height:32px; margin:1px; font-size:12px; line-height:32px; text-indent:10px;}.bottom_con{ padding:10px;}
.bottom_con table th{ padding:3px 0px; text-align:center;}
.bottom_con table td{ height:25px; line-height:25px; text-align:center;}/*滑动门*/
.cls{clear:both;}
.hidden{display:none;}
.scrolldoorFrame{width:450px; height:300px; position:relative; overflow:hidden;z-index:100; }
.scrollUl{width:450px;overflow:hidden;height:103px; position:absolute; top:193px; left:0px; _left:-4px; z-index:80;}
.scrollUl li{float:left; width:112px; text-align:center; height:106px; background:url(../images/hd.gif) no-repeat; }
.scrollUl li a{display:block;height:86px;padding-top:20px;}
.sd01 a{ display:block;cursor:pointer; height:86px; width:112px;color:#666; background:url(../images/hdbg.gif) no-repeat; padding-top:20px; color:#fff; }
.sd02 a{display:block;cursor:pointer; height:106px; width:112px;}.hd_list{ width:87px; margin: 0 auto;}
.hd_list dt{ background:#fff;}
.hd_list dt img{ border:1px solid #ccc; padding:2px;}
.hd_list dd{ line-height:20px; height:20px;}三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
HTML5期末大作业【红色的电影售票平台网站】web前端 html+css+javascript网页设计实例 企业网站制作相关推荐
- HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码 常见网页设计作业题材有 个 ...
- web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
- web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
- HTML5期末大作业：汽车主题网页设计——21 汽车租赁(47页) HTML+CSS+JavaScript web前端期末大作业 html+css+javascript网页设计实例 企业网站制作
HTML5期末大作业:汽车主题网页设计--21 汽车租赁(47页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设 ...
- web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 (绿色植物网站设计)...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
- web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 (绿色植物网站设计)
HTML5期末大作业:绿色植物网站设计--绿色多肉盆栽植物养殖网页(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 1.临近 ...
- 5000套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作【建议收藏】
一.1000套HTML期末学生结课大作业作品(HTML+CSS+JS) 这8年来做了1000多套(HTML+CSS+JS)网页设计的学生期末大作业,都是给学生定制的都符合学校或者学生考试期末作业的水平 ...
- 200套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作
一.200套HTML期末学生结课大作业作品(HTML+CSS+JS) 这五年来做了200多套(HTML+CSS+JS)网页设计的学生期末大作业,都是给学生定制的都符合学校或者学生考试期末作业的水平,都 ...
- 1000套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作【建议收藏】
一.1000套HTML期末学生结课大作业作品(HTML+CSS+JS) 这8年来做了1000多套(HTML+CSS+JS)网页设计的学生期末大作业,都是给学生定制的都符合学校或者学生考试期末作业的水平 ...
最新文章
- 我用YOLOX露了一手，记录一下模型部署、优化及训练的实现全过程
- idea 如何看bytecode_IDEA字节码学习查看神器介绍
- SpringBoot整合Freemarker+Mybatis
- 解决gpg failed to sign the data fatal: failed to write commit object解决方案
- 基于python的游戏设计与实现-python五子棋游戏的设计与实现
- 线性表之链式存储结构
- 加权最小二乘法的原理讲解
- ElasticSearch教程——自定义分词器（转学习使用）
- 25 岁的老 Delphi，还值得程序员入手吗？
- ------更快的搜索储存结构-----平衡二叉树-----------------
- Kubernetes 小白学习笔记（3）--物理机、虚拟化、容器化、云原生
- 破解win7开机密码！
- 一图秒懂！“天使投资、VC、PE、A轮、B轮、C轮融资”的关系
- md5是什么，md5的这些作用你都知道吗
- CityBuilder+DataV制作次世代3D城市大屏，一秒俘获甲方的心！
- 帝国 php 7.0 默认 后台用户名及认证码,帝国CMS忘记后台登陆用户名 密码 认证码 安全提问答案 数据库用户名及密码的解决方法 | 坐倚北风...
- HelloChart框架动态加载数据
- 03 # 网页元素的属性
- MediaPlayer音视频播放
- 时间序列数据机器学习（ICML 2022）