-
大学生HTML CSS动漫主题网页制作——刀剑神域(6页) dreamweaver作业静态HTML网页设计
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
@[TOC](文章目录🌰)网页介绍📖
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
网页效果🌌
# 代码展示😈
## 1.HTML代码结构 🧱 代码如下（示例）：以下仅展示部分代码供参考~<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigationspan> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> button> <a class="navbar-brand" href="#"> <img src="images/小电视.jpg" id="xiao" alt="" style="width:100px;height:50px;" /> a> div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a class="active" href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true">span>首页<span class="sr-only">(current)span>a>li> <li><a href="xingpanbiao.html"><span class="glyphicon glyphicon-time" aria-hidden="true">span>新番时间表a>li> <li><a href="jiesao.html"><span class="glyphicon glyphicon-list-alt" aria-hidden="true">span>动漫介绍a>li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-expand" aria-hidden="true">span>番剧<span class="caret">span> a> <ul class="dropdown-menu"> <li><a href="#">番剧分类a>li> <li><a href="#">连载动画a>li> <li><a href="#">完结动画a>li> <li><a href="#">番剧索引a>li> <li><a href="#">历史记录a>li> <li role="separator" class="divider">li> <li><a href="#">官方延伸a>li> ul> li> <li> <a data-toggle="modal" href='#modal-id'><span class="glyphicon glyphicon-eye-open" aria-hidden="true">span>关于a> li> ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> div> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true">span>搜索button> form> <ul class="nav navbar-nav navbar-right"> <li><a href="denglu.html">登录a>li> <button type="注册" class="btn btn-default zhuces"><a href="zhuce.html">注册a>button> ul> div> div> nav><hr> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li> <li data-target="#carousel-example-generic" data-slide-to="1">li> <li data-target="#carousel-example-generic" data-slide-to="2">li> <li data-target="#carousel-example-generic" data-slide-to="3">li> <li data-target="#carousel-example-generic" data-slide-to="4">li> ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/刀剑.jpg" alt="刀剑神域3"> <div class="carousel-caption"> <h1>刀剑神域3h1> div> div> <div class="item"> <img src="images/盾.jpg" alt="盾"> <div class="carousel-caption"> <h1>盾之勇者成名录h1> div> div> <div class="item"> <img src="images/进击的巨人3.JPG" alt="进击的巨人3"> <div class="carousel-caption"> <h1>进击的巨人3h1> div> div> <div class="item"> <img src="images/魔法禁书目录3.jpg" alt="魔法禁书目录3"> <div class="carousel-caption"> <h1>魔法禁书目录3h1> div> div> <div class="item"> <img src="images/妖神记之影妖篇.jpg" alt="妖神记之影妖篇"> <div class="carousel-caption"> <h1>妖神记之影妖篇h1> div> div> div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span> <span class="sr-only">Previousspan> a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span> <span class="sr-only">Nextspan> a> div> <hr> <div id="row1" class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <img class="img-circle" src="images/国创.png" alt="Generic placeholder image" width="140" height="140"> <h2>国创动漫h2> <p><a class="btn btn-success" href="guochan.html" role="button">点击进入 »a>p> div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <img class="img-circle" src="images/日本.jpg" alt="Generic placeholder image" width="140" height="140"> <h2>日本动漫h2> <p><a class="btn btn-success" href="riben.html" role="button">点击进入 »a>p> div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <img class="img-circle" src="images/timg.jpg" alt="Generic placeholder image" width="140" height="140"> <h2>动漫电影h2> <p><a class="btn btn-success" href="dianying.html" role="button">点击进入 »a>p> div> div> <div class="row" id="row2"> <h3 class="h3">强势推鉴作品<a id="gengduo" class="btn btn-success btn-sm" href="#" role="button">更多 »a>h3> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"> <div class="in-anishe-text"> <img alt="刀剑神域" src="images/刀剑3.png"> <a target="_blank" href="#" class="mod-cover-list-mask" title="刀剑神域"> <span class="mod-cover-list-text">更新至14话span> a> <h5> <a target="_blank" href="#" class="mod-cover-list-name">刀剑神域3a> h5> <p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »a>p> <p> <a target="_blank" href="#" class="mod-tag-item">热血a> <a target="_blank" href="#" class="mod-tag-item">日本a> p> div> div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"> <div class="in-anishe-text"> <img alt="斗罗大陆" src="images/斗罗大陆.jpg"> <a target="_blank" href="#" class="mod-cover-list-mask" title="斗罗大陆"> <span class="mod-cover-list-text">更新至32话span> a> <h5> <a target="_blank" href="#" class="mod-cover-list-name">斗罗大陆3a> h5> <p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »a>p> <p> <a target="_blank" href="#" class="mod-tag-item">热血a> <a target="_blank" href="#" class="mod-tag-item">xxa> p> div> div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"> <div class="in-anishe-text"> <img alt="妖神记" src="images/妖神记推荐.jpg"> <a target="_blank" href="#" class="mod-cover-list-mask" title="妖神记"> <span class="mod-cover-list-text">更新至113话span> a> <h5> <a target="_blank" href="#" class="mod-cover-list-name">妖神记之影妖篇a> h5> <p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »a>p> <p> <a target="_blank" href="#" class="mod-tag-item">热血a> <a target="_blank" href="#" class="mod-tag-item">xxa> p> div> div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"> <div class="in-anishe-text"> <img alt="工作细胞" src="images/工作细胞.jpg"> <a target="_blank" href="#" class="mod-cover-list-mask" title="工作细胞"> <span class="mod-cover-list-text">更新至14话span> a> <h5> <a target="_blank" href="#" class="mod-cover-list-name">工作细胞a> h5> <p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »a>p> <p> <a target="_blank" href="#" class="mod-tag-item">日常 搞笑a> <a target="_blank" href="#" class="mod-tag-item">日本a> p> div> div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"> <div class="in-anishe-text"> <img alt="斩兽之刃" src="images/斩兽之刃.jpg"> <a target="_blank" href="#" class="mod-cover-list-mask" title="斩兽之刃"> <span class="mod-cover-list-text">更新至4话span> a> <h5> <a target="_blank" href="#" class="mod-cover-list-name">斩兽之刃a> h5> <p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »a>p> <p> <a target="_blank" href="#" class="mod-tag-item">战斗 奇幻a> <a target="_blank" href="#" class="mod-tag-item">xxa> p> div> div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2" id="tui"> <div class="in-anishe-text"> <img alt="fate系列" src="images/FATE.jpg"> <a target="_blank" href="#" class="mod-cover-list-mask" title="fate系列"> <span class="mod-cover-list-text">连载中span> a> <h5> <a target="_blank" href="#" class="mod-cover-list-name">fate系列a> h5> <p><a class="btn btn-info btn-xs" href="#" role="button">点击播放 »a>p> <p> <a target="_blank" href="#" class="mod-tag-item">热血 战斗 奇幻a> <a target="_blank" href="#" class="mod-tag-item">日本a> p> div> div> div> <hr width="980px"> <div id="foot"> <img src="images/二维码.jpg" alt="微信二维码" /><img src="images/收款码.png" alt="微信收款码" /> <p>Copyright©2018-2050 DONGMANZIJIAcom,CAIJIAHAN ALL right reserved.p> <p>2018-2040,版权所有 85CP 备 p> div> <div class="modal fade" id="modal-id"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button> <h4 class="modal-title">关于h4> div> <div class="modal-body"> <p>本网站隶属于广东环境保护工程职业学院机电工程系。<br>版权所有归属于，是一个从事互联网网站开发的爱好者。秉承“开拓、创新、积极向上、努力拼搏”的精神， 将互联网网站特性以网站形式全面的展现出来，致力于为网站事业及爱好学者奉献出自己的力量。 p> div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">了解了/关闭button> div> div> div> div> 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
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.以上内容技术相关问题😈欢迎一起交流学习🔥
-
相关阅读:
电脑更换硬盘的时候怎么迁移系统？
2022陕西清北录取人数排名，西工大附中遥遥领先，高新一中40人
Java注解学习与实战
快乐组队赛XD（2017 Chinese Multi-University Training, BeihangU Contest）
2023.11.19 hadoop之MapReduce
使用Xshell远程访问工具连接到Linux
软件测试工程师成长记：职场人的职业探寻之路
在Thymeleaf中使用th:href标记构建 URL
ZOOM 2023校招 第3题(C++并查集)
ASEMI整流桥UD6KB100，UD6KB100尺寸，UD6KB100特征
- 原文地址：https://blog.csdn.net/p305114466/article/details/126652506