-
HTML5期末大作业【红色的电影售票平台网站】web前端 html+css+javascript网页设计实例 企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
一、网页介绍
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="images/logo.gif" width="300" height="80" />a>div> <div class="rx"><img src="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="images/b5.jpg" alt="11" />a> <a href="#" title="11"><img src="images/b1.jpg" alt="111" />a> <a href="#" title="11"><img src="images/b3.jpg" alt="22" />a> <a href="#" title="1"><img src="images/b4.jpg" alt="22" />a> p> div> <p id="YSamples"> <a href="#1" class="current" title="2"><img src="images/bx5.jpg" alt="22" />a> <a href="#1" title="2"><img src="images/bx1.jpg" alt="2" />a> <a href="#1" title="2"><img src="images/bx3.jpg" alt="2" />a> <a href="#1" title="2"><img src="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="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="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="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="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>19888span>白雪公主与猎人a>li> <li><a href="#"><span>18667span>三个火枪手a>li> <li><a href="#"><span>17558span>王者之剑a>li> <li><a href="#"><span>17452span>南极大冒险a>li> <li><a href="#"><span>9955span>肖申克的救赎a>li> <li><a href="#"><span>9858span>无法触碰a>li> <li><a href="#"><span>7522span>忠犬八公的故事a>li> <li><a href="#"><span>5200span>惊悚快感a>li> <li><a href="#"><span>2777span>气场大比拼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="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="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="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="images/index_r_03_seo4.gif" width="120" height="100" />a>td> <td><a href="#">疯魔美女2a><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="images/20091130101638768.jpg" width="128" height="35" />a>th> <th scope="col"><a href="#"><img src="images/20091130101739119.jpg" width="128" height="35" />a>th> <th scope="col"><a href="#"><img src="images/20091130101911881.jpg" width="128" height="35" />a>th> <th scope="col"><a href="#"><img src="images/20091130102100902.jpg" width="128" height="35" />a>th> <th scope="col"><a href="#"><img src="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> | body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就
【点赞收藏博文】三连支持下吧，你的支持是我创作的动力,【观注作者 |获取更多源码| 优质文章】。2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
-
相关阅读:
【Go入门】编程语言比较：Golang VS Python
IDEA 2023git提交和拉数据都出现问题，分支名一直有感叹号Rebasing
R语言空间插值/R语言离散数据网格化/R语言空间点插值/R语言nc日均转月均、日期转换
2022-10-19 mysql列存储引擎-exists子查询错误-问题定位分析
速看！湖北省首例落地专利开放许可有关内容解读
【前端精进之路】JS篇：第1期 数据类型总结
系统性能分析工具
SpringBoot统一返回值与actuator的矛盾
【MyBatis源码分析】六、MyBatis Plugins(拦截器)
flutter 嵌套 StatefulWidget 不刷新
- 原文地址：https://blog.csdn.net/wx_365392777/article/details/128170190