-
Dreamweaver网页设计与制作100例——HTML5期末考核大作业——票务网站整套网页
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代码
代码如下（示例）：以下仅展示部分代码供参考~
<div id="index_focus"> <span class="tu"> <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" />p>a> <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" />p>a> <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" />p>a> <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" />p>a> <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" />p>a> span> div> <div class="index_jrtj"> <div class="content"> <p class="titlestyle1"><strong class="yahei">今日推荐strong><span>Recommendedspan><b><a href="#">七夕中国a>|<a href="#">林俊杰a>|<a href="#">音乐节a>|<a href="#">S.H.Ea>|<a href="#">蔡健雅a>|<a href="#">任贤齐a>b>p> <div id="carousel_container"> <div id="carousel_inners"> <ul id="carousel_ul" class="clearfix artist_l"> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a><span class="but_gp">span>li> ul> div> div> div> <div id="left_scroll">11div> <div id="right_scroll">22div> div> <div class="hot_tours"> <p><img src="images/back01.gif" width="1008" height="11" />p> <div class="content"> <div class="left_focus floatl"> <p class="titlestyle1"><strong class="yahei">热门巡演strong><span>Hot toursspan>p> <div id="slide1" class="slide-panel"> <div> <img src="images/simg_02.jpg" width="231" height="319" style="display:block;"/> <img src="images/simg_02.jpg" width="231" height="319" /> <img src="images/simg_02.jpg" width="231" height="319" /> div> div> <div id="trigger1" class="slide-trigger">div> <script type="text/javascript"> $(function(){ $("#trigger1").switchable("#slide1 > div > img", { effect: "fade", speed:.5,circular:true }).autoplay(); }); script> div> <div class="tours_imgshow floatl"> <div class="left floatl"> <ul class="artist_l"> <li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" />a><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>场 馆： 万事达中心p>a>li> <li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" />a><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>场 馆： 万事达中心p>a>li> <li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" />a><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>场 馆： 万事达中心p>a>li> ul> div> <div class="right floatl"> <ul class="artist_l"> <li><img src="images/simg_04.jpg" width="210" height="182" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>场 馆： 万事达中心p>a>li> <li><img src="images/simg_04.jpg" width="210" height="182" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>场 馆： 万事达中心p>a>li> ul> div> div> <div class="tours_rfocus floatl"> <div id="carousel"> <div id="buttons"> <a href="#" id="prev">preva> <a href="#" id="next">nexta> <div class="clear">div> div> <div class="clear">div> <div id="slides"> <ul> <li><img src="images/pp_zlj.png" width="307" height="299" />li> <li><img src="images/pp_zlj.png" width="307" height="299" />li> <li><img src="images/pp_zlj.png" width="307" height="299" />li> ul> <div class="clear">div> div> div> div> <div class="clear">div> div> div> <div class="index_1f"> <p class="cl_title"><span><a href="#">进入话剧歌剧频道a>span><strong><a href="#">首都剧场a><a href="#">孟京辉a><a href="#">开心麻花a><a href="#">赖声川a><a href="#">繁星戏剧村a>strong>p> <div class="index_lcbox"> <div class="f1_left"> <div class="left_ad"> <ul class="artist_l"> <li><img src="images/simg_05.jpg" width="296" height="300" /><a href="#" target="_blank" class="ib"><h4>张震岳h4><p>时 间：2013.07.01p><p>场 馆： 万事达中心p>a>li> ul> div> <ul class="left_news"> <li><a href="#">中国国家话剧院话剧《活着》a>li> <li><a href="#">田沁鑫青春爱情三部曲 《夜店之天生绝配》a>li> <li><a href="#">25周年戏剧季《最后14堂星期二的课》a>li> <li><a href="#">第一届两岸三地青年戏剧节 话剧《最后晚餐》a>li> ul> <div class="sm_ad"> <a href="#"><img src="images/simg_06.jpg" width="296" height="96" />a> div> div>- 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
2.CSS代码
#index_focus {height: 451px; position: relative;overflow: hidden;margin-right: auto;margin-left: auto; background:#515151; z-index:100;} #index_focus .tu {text-align: center;display: block;margin-right: auto;margin-left: auto;} #index_focus #hao .xu {display: inline;float: left;height: 15px;width: 15px;line-height: 15px;color: #FFFFFF;font-size: 12px;font-weight: bolder;cursor:pointer;background:#666;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px; border-left-width: 0px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;text-align:center; font-family:Arial;margin:0 2px;} #index_focus #hao {position: absolute;right: 10px;height: 15px;width: 330px;z-index: 3;bottom: 0px;} #index_focus #hao a:hover{ text-decoration:none;} #index_focus .txt {display: block;position: absolute;top: 423px;height: 53px;width: 385px;right: 50px;z-index:3;} #index_focus .tu .lianjie {display: block;height: 530px; overflow:hidden;} #index_focus .tu { text-align:center;} #index_focus .tu p{ float:left; margin-left:50%; display:inline;} #index_focus .tu img{ position:relative; left:-50%;} .nav_post{ position:relative; width:1002px; margin:0 auto;} .nav_menu{ position:absolute; left:0; top:40px; width:202px; border:2px solid #e20d82; z-index:999; height:444px; background:url(../images/leftmenu.gif) repeat-y #FFF;} #site_nav .nav_menu dl{ line-height:22px; margin-left:7px; word-break:break-all;} #site_nav .nav_menu dl a{ color:#626262; margin:0 5px;} #site_nav .nav_menu dl dt{ font-size:14px; font-weight:bold;} #site_nav .nav_menu dl dt a{ color:#3c3c3c;} #site_nav .nav_menu dl a:hover{ color:#e20d82; text-decoration:underline;} #site_nav .nav_menu .ych{ background:url(../images/menu_ico.gif) no-repeat 0 0; padding-left:25px; padding-bottom:5px; padding-top:15px;} #site_nav .nav_menu .hj{ background:url(../images/menu_ico.gif) no-repeat 0 -55px; padding-left:25px; padding-bottom:5px; padding-top:15px;} #site_nav .nav_menu .yyh{ background:url(../images/menu_ico.gif) no-repeat 0 -135px; padding-left:25px; padding-bottom:5px; padding-top:15px;} #site_nav .nav_menu .ty{ background:url(../images/menu_ico.gif) no-repeat 0 -202px; padding-left:25px; padding-bottom:5px; padding-top:15px;} #site_nav .nav_menu .qyzt{ background:url(../images/menu_ico.gif) no-repeat 0 -279px; padding-left:25px; padding-bottom:5px; padding-top:15px;} #site_nav .nav_menu .etqz{ background:url(../images/menu_ico.gif) no-repeat 0 -355px; padding-left:25px; padding-bottom:5px; padding-top:15px;} #site_nav .nav_menu dl dd{ margin-left:25px; white-space:nowrap} #site_nav .nav_menu dl dd a{ display:block; min-width:30px; float:left;} .index_jrtj{ width:1000px; margin:0 auto; background:url(../images/back_01.gif) repeat; height:383px; padding-bottom:5px; margin-top:11px; padding-right:6px; position:relative;} .index_jrtj .content{ width:1000px; background:#FFF; border:1px solid #e2e2e2; height:383px;} .titlestyle1{ margin-top:17px; margin-left:22px;} .titlestyle1 strong{ font-size:20px; font-weight:100;} .titlestyle1 span{ background:#e20d82; color:#FFF; padding:6px 3px; margin-left:6px; font-family:Arial;} .titlestyle1 b{ font-weight:100; margin-left:10px; color:#dadada;} .titlestyle1 b a{ color:#666666; margin:0 3px;} .index_jrtj ul { margin-top:20px; } .index_jrtj ul li{ float:left; position:relative; width:224px; margin:0 7px; display:inline; overflow:hidden; height:302px; } .index_jrtj ul li img{ width:206px; height:285px; padding:7px; border:1px solid #e2e2e2;} .but_gp{ position:absolute; width:59px; height:65px; right:-2px; bottom:0; background:url(../images/but_gp.png) no-repeat left top; display:block;} .but_gp a{ display:block; width:59px; height:65px;} #carousel_container{OVERFLOW: hidden; ZOOM: 1; POSITION: relative; width:938px; height:327px; overflow:hidden; margin-left:35px;} #carousel_inner{ OVERFLOW: hidden; WIDTH: 990px; overflow: hidden; position:absolute;left:25px; top:5px;} #left_scroll{position: absolute;left:10px;top:180px;width:24px;height:32px; cursor:pointer; z-index:999; background:url(../images/icon.gif) -80px -39px no-repeat; text-indent:-9999px;} #right_scroll{position: absolute;top:180px;right:10px; width:23px; height:32px;cursor: pointer;cursor: hand; background:url(../images/icon.gif) -9px -39px no-repeat; text-indent:-9999px;} #carousel_ul{width:9999px; height:95px; position:relative;} .hot_tours{ width:1008px; margin:0 auto; height:408px; background:#e7e7e7;} .hot_tours .content{ background:#ffffff; border:1px solid #e2e2e2; height:395px; width:1000px;} .hot_tours .left_focus{ width:255px; height:395px; border-right:1px dashed #d0d0d0; position:relative;} .hot_tours #slide1{ margin-left:13px; margin-top:16px;} .hot_tours .slide-trigger{ position:absolute; right:20px; bottom:20px; } .hot_tours .slide-trigger a{ background:#8f9493; padding:2px 5px; margin:0 1px; color:#ffffff;} .hot_tours .slide-trigger .current{ background:#e6208e;} .index_jrtj .but_gp{ right:-1px; bottom:0px;}- 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
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就
【点赞收藏博文】三连支持下吧，你的支持是我创作的动力,【观注作者 |获取更多源码| 优质文章】。2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
-
相关阅读:
spring的Task定时任务与事务
微信聊天内容可以被监听吗
【关于Java:认识异常】
Rust 解决循环引用
数据结构 —— 堆（超详细图解 & 接口函数实现）
Treap 学习笔记
Unity Spine 指定导入新Spine动画的默认材质
ProcessEngineEndpoint
HTML案例-3.表格练习
HashMap略解
- 原文地址：https://blog.csdn.net/stu_365392777/article/details/126188641
