-
基于html+css+jquery+bootstrap响应式网页制作模板——红色中国文化主题：大美中国
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
一、网页介绍📖
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 lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <title>戏曲文化title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="icon" href="images/fevicon.png" type="image/gif" /> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css"> head> <body class="main-layout" style="border: 1px solid #000000; width: 1400px;height: 500px;;margin: 0 auto;"> <header> <div class="header"> <div class="container"> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section"> <div class="full"> <div class="center-desk"> <div class="logo"> <a href="#"><img src="images/logo-1.png" alt="#">a> div> div> div> div> <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9"> <div class="menu-area"> <div class="limit-box"> <nav class="main-menu"> <ul class="menu-area-main"> <li> <a href="index_1.html">首页a> li> <li> <a href="culture_h.html">文化a> li> <li><a href="view_h.html">风景a>li> <li><a href="technology_h.html">科技a>li> <li><a href="food.html">美食a>li> <li><a href="echarts.html">可视化界面a>li> <li><a href="anniversary.html">建党一百周年a>li> <li class="mean-last"> <a href="#"><img src="images/search_icon.png" alt="#" />a> li> <li class="mean-last"> <a href="#"><img src="images/top-icon.png" alt="#" />a> li> ul> nav> div> div> div> div> div> div> header> <div class="about-bg"> <div class="container"> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12"> <div class="abouttitle"> <h2 style="font-family:方正隶书简体;font-size:70px">什 么 是 戏 曲h2> div> div> div> div> div> <div class="t"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <div class="aboutheading"> <h2 style="font-size:40px">中国 <strong class="black">戏曲strong>h2> div> div> div> <div class="row border"> <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12"> <div class="about-box"> <figure><img src="images/戏曲元素.png" alt="img" />figure> div> div> <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12"> <div class="about-box"> <p> 中国戏曲主要是由民间歌舞、说唱和滑稽戏三种不同艺术形式综合而成。它起源于原始歌舞，是一种历史悠久的综合舞台艺术样式。经过汉、唐到宋、金才形成比较完整的戏曲艺术，它由文学、音乐、舞蹈、美术、武术、杂技以及表演艺术综合而成，约有三百六十多个种类。它的特点是将众多艺术形式以一种标准聚合在一起，在共同具有的性质中体现其各自的个性。 中国的戏曲与希腊悲剧和喜剧、印度梵剧并称为世界三大古老的戏剧文化，经过长期的发展演变，逐步形成了以“京剧、越剧、黄梅戏、评剧、豫剧”五大戏曲剧种为核心的中华戏曲百花苑。p> div> div> div> div> div> <div class="u"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <div class="aboutheading"> <h2 style="font-size:40px">发展 <strong class="black">历程strong>h2> div> div> div> <div class="row border"> <div class="about-box"> <p> 先秦（萌芽期）<br>戏曲最早可以追溯到上古时代用来娱神的原始歌舞。从春秋战国到汉代，在娱神的歌舞中逐渐演变出娱人的歌舞。从汉魏到中唐，又先后出现了以竞技为主的“角抵”（即百戏）、以问答方式表演的“参军戏”和扮演生活小故事的歌舞“踏摇娘”等，这些都是萌芽状态的戏剧。<br>唐代中后期（形成期）<br>中唐以后，中国戏剧飞跃发展，戏剧艺术逐渐形成。唐代文学艺术的繁荣，是经济高度发展的结果，促进了戏曲艺术的自立门户，并给戏曲艺术以丰富的营养，诗歌的声律和叙事诗的成熟给了戏曲决定性影响。<br>宋金（发展期）<br>宋代的“杂剧”，金代的“院本”和讲唱形式的“诸宫调”，从乐曲、结构到内容，都为元代杂剧打下了基础。 <br>元代（成熟期）<br>到了元代，“杂剧”就在原有基础上大大发展，成为一种新型的戏剧。它具备了戏剧的基本特点，标志着中国戏剧进入成熟的阶段。<br>明清（繁荣期）<br>戏曲到了明代，传奇发展起来了。明代中叶，传奇作家和剧本大量涌现。明后期的舞台，开始流行以演折子戏为主的风尚。<br>近代（革新期）<br>辛亥革命前后，一批有造诣的戏曲艺术家从事戏曲艺术改良活动，他们为以后的戏曲改良积累了宝资的经验。<br>现代（争辉期）<br>p> div> div> div> div> <div class="o"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <div class="aboutheading"> <h2 style="font-size:40px"> 艺术特色 <strong class="black">戏曲剧种<strong class="black">strong>h2> div> div> div> <div class="row border"> <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12"> <div class="about-box"> <p> 艺术特色<br>综合性、虚拟性、程式性，是中国戏曲的主要艺术特征。这些特征，凝聚着中国传统文化的美学思想精髓，构成了独特的戏剧观，使中国戏曲在世界戏曲文化的大舞台上闪耀着它的独特的艺术光辉。综合性：中国戏曲是一种高度综合的汉族民间艺术；程式性：程式是戏曲反映生活的表现形式。虚拟性：虚拟是戏曲反映生活的基本手法。<br>戏曲剧种<br>中国五大戏曲剧种一般均表述依次为：京剧（有“国剧”之称 ）、越剧（有“中国第二大剧种”、“第二国剧”之称 ）、黄梅戏、评剧、豫剧。 采用如此表述的书籍出版物有数十种，覆盖教育、旅游、戏曲、电影、网络、民俗、文化、电视、国学、艺术、漫画等各领域.p> div> div> <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12"> <div class="about-box"> <figure><img src="images/戏曲1.png" alt="img" />figure> div> div> div> div> div> <div class="Con"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="titlepage3"> <h2>联系我们h2> div> div> div> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12"> <form> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12"> <input class="form-control" placeholder="姓名" type="Name"> div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12"> <input class="form-control" placeholder="电话" type="Phone Number"> div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12"> <input class="form-control" placeholder="邮箱" type="Email"> div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12"> <textarea class="textarea" placeholder="Message">留言textarea> div> div> form> div> <button class="send-btn">发送button> div> div> div> <footer> <div class="copyright"> <div class="container"> <p>关于我们 | 版权声明 | 联系电话：111111 | 邮箱：111111@www.comp> <p>Copyright © 大美中国 | 实名认证p> div> div> footer> <script src="js/jquery.min.js">script> <script src="js/popper.min.js">script> <script src="js/bootstrap.bundle.min.js">script> <script src="js/jquery-3.0.0.min.js">script> <script src="js/plugin.js">script> <script src="js/jquery.mCustomScrollbar.concat.min.js">script> <script src="js/custom.js">script> 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
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
2.CSS样式代码 🏠
/*--------------------------------------------------------------------- File Name: nice-select.css ---------------------------------------------------------------------*/ .nice-select { background-color: #f6f6f6; border-radius: 0; box-sizing: border-box; clear: both; display: block; float: left; height: auto; outline: none; padding-left: 20px; padding-right: 35px; position: relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 50%; cursor: pointer; font-family: inherit; font-weight: normal; line-height: 50px; text-align: left !important; white-space: nowrap; font-weight: 300; } .nice-select:after { border-bottom: 2px solid #999; border-right: 2px solid #999; content: ''; display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; } .nice-select.open:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .nice-select.disabled { border-color: #ededed; color: #999; pointer-events: none; } .nice-select.disabled:after { border-color: #cccccc; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small:after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #f6f6f6; } .nice-select .option.selected { font-weight: bold; } .nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; }- 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
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
-
相关阅读:
【创建型】生成器模式(Builder)
springboot系列(四):stater入门|超级详细，建议收藏
Vue-声明周期函数
OP-TEE中的线程管理（一）
MySQL高级：（十二）MySQL事务日志
ZooKeeper（续）
AIGC快速入门体验之虚拟对象
求解最大公约数（两种）
DOM节点（节点查找、节点创建、节点克隆、节点删除）
Powerful number
- 原文地址：https://blog.csdn.net/weixin__BJ050106/article/details/126200113
