-
利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人主页
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【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"> <title>黑夜主权(Night)title> <script type="text/javascript"> //设定rem值 document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px'; script> head> <body> <header class="head"> <div class="head_logo_div"> <img class="logo_img" src="images/upload/head.jpg">a> div> <div class="head_nav_div"> <nav class="head_nav"> <ul id="nav_ul"> <li class="nav_li_on nav_ul_li">Homeli> <li class="nav_ul_li">Skillli> <li class="nav_ul_li">Experienceli> <li class="nav_ul_li">Hobbyli> <li class="nav_ul_li">Contactli> ul> nav> div> <div class="clear">div> header> <ul class="float_btn" id="float_btn"> <li class="btn_on">li> <li>li> <li>li> <li>li> ul> <div class="wrapBox" id="wrapBox"> <div class="box"> <img class="box_bg" src="images/upload/pic_1.jpg"> <div class="box01_content"> <div class="head_div"> <div class="cycle_item"> <a href="https://yoomeili.cn" class="github_a" id="github_a" target="_blank"> <span class="github_icon">span> <span class="github_text"><p class="item_name">GitHubp>span> a> <a href="http://blog.yoomeili.cn" class="weibo_a" id="weibo_a" target="_blank"> <span class="weibo_icon">span> <span class="weibo_text"><p class="item_name">微博p> span> a> <a href="http://blog.yoomeili.cn" class="blog_a" id="blog_a" target="_blank"> <span class="blog_icon">span> <span class="blog_text"><p class="item_name"> 博客p>span> a> <div class="green_cycle"> <img class="green_cycle_img" src="images/icon/green_cycle.svg"> <div class="yellow_cycle"> <img class="yellow_cycle_img" src="images/icon/yellow_cycle.svg"> <div class="blue_cycle"> <img class="blue_cycle_img" src="images/icon/blue_cycle.svg"> <div class="head_img_div"> <img class="head_img" src="images/upload/head.jpg"> div> div> div> div> div> div> <h1 class="title">黑夜h1> <h2 class="title_h2">千里之行，始于足下h2> <div id="box01_text"> <p class="box01_p">不久前还只是一个失业农民工.p> <p class="box01_p">现在还只是一只喜欢动漫和文学的学生党.p> <p class="box01_p">不久以后将是又一个人生迷茫的旅行者.p> div> div> <div class="arrow_div"> <img class="arrow_img" src="images/icon/arrowhead.png"> div> div> <div class="box"> <img class="box_bg" src="images/upload/pic_2.jpg"> <div class="box02_content box_content"> <div id='bar_container' class="bar_container"> <div class='bar mint' data-percent='70' data-skill='HTML5+CSS3'>div> <div class='bar red' data-percent='50' data-skill='JavaScript'>div> <div class='bar lila' data-percent='50' data-skill='前端工程化'>div> <div class='bar orange' data-percent='50' data-skill='Node.js'>div> <div class='bar gray' data-percent='30' data-skill='Java || C++'>div> <div class="bar blue" data-percent='50' data-skill='PS&AE&PR&AI'>div> <div class="bar green" data-percent='60' data-skill='绘画'>div> div> <div id="box02_text"> <h1>About Skillh1> <div class="overline">div> <p>2012,第一次接触是C/C++,在拥挤的实验室p> <p>2013,三月份在寝室迷上了网络游戏p> <p>九月份开始学习到Javap> <p>2014,年初的时候摸了摸Android，觉得稀奇有趣p> <p>剩下的月份我在看JavaWebp> <p>2015,接触到WordPress,兴趣开始转到前端和脚本语言p> <p>上半年插科打诨p> <p>下半年开始学习H5,CSS3,JSp> <p>现在正在学习前端工程化技术p> <p>喜欢UI,交互设计,觉得UED是我坚持精确1个像素的动力p> <p>而未来...p> <p>想成为一名全栈工程师p> div> <div class="clear">div> div> <div class="arrow_div"> <img class="arrow_img" src="images/icon/arrowhead.png"> div> div> <div class="box"> <img class="box_bg" src="images/upload/pic_3.jpg"> <div class="box_content box03_content"> <ul id="timeUl" class="timeUl"> <li> <div> <h1>2012-Nowh1> <p>淄博职业学院p> <p>专业：机械制造与自动化p> <p>在风气不佳的考试战场中险些挂科(poi~)p> <p>最喜欢的科目是LOL <p> <p>现在正在愁于毕业设计p> div> li> <li> <div> <h1>2015.7-2015.8h1> <p>青花瓷酒店p> <p>服务员p> <p>没学到什么东西p> <p>前途多艰p> div> li> <li> <div> <h1>2016.3-2016.4h1> <p>小菜馆p> <p>传菜生p> <p>前途多艰p> div> li> <li> <div> <h1>Futureh1> <p>...p> div> li> ul> <div class="left_div" id="left_div"> <img class="left_arrow" src="images/icon/arrowleft.png"> div> <div class="right_div" id="right_div"> <img class="right_arrow" src="images/icon/arrowright.png"> div> div> <div class="arrow_div"> <img class="arrow_img" src="images/icon/arrowhead.png"> div> div> <div class="box"> <img class="box_bg" src="images/upload/pic_4.jpg"> <div class="box_content box04_content"> <h1 class="box04_title">Something Of Hobbyh1> <ul class="hobby_content"> <li class="hobby_01"> <div class="hobby_img_div"> <div class="spinner spinner_01">div> <div class="hobby_img"> <img src="images/upload/kapok.jpg"> div> <div class="hobby_img_info"> <h1>绘画h1> <h2>手绘&CGh2> div> div> <div class="hobby_text_div"> <div class="hobby_img_info_mob"> <h1>绘画/<a>手绘&CGa>h1> div> <p class="about_p"> 对于绘画的热爱一部分来自于对ACG的热爱,小学时就开始拿着笔头被要烂的铅笔瞎画, 可惜父母和我都没发现这是个值得培养的爱好,以至于现在发展为一个手残. p> <p> 比较擅长铅笔手绘动漫人物,SAI动漫人物的绘制(我是手残，上色渣渣).喜欢的画师是樋上至. a> p> div> li> <li class="hobby_02"> <div class="hobby_img_div"> <div class="spinner spinner_02">div> <div class="hobby_img"> <img src="images/upload/acg.png"> div> <div class="hobby_img_info"> <h1>ACGh1> <h2>动漫&视频&lolh2> div> div> <div class="hobby_text_div"> <div class="hobby_img_info_mob"> <h1>ACG/<a>动漫&视频&lola>h1> div> <p class="about_p"> 入宅作《犬夜叉》,看完《Angle Beats!》深陷泥潭,最喜欢K社的作品(包括Galgame), 崇拜麻枝准,喜欢的歌手是ClariS.是个典型的萝莉控重度患者. p> <p> 动漫对我而言是和文学一样的文化,最具感染力的抒情方式,将来希望自己工作在二次元的领域. p> div> li> <li class="hobby_03"> <div class="hobby_img_div"> <div class="spinner spinner_03">div> <div class="hobby_img"> <img src="images/upload/reading.jpg"> div> <div class="hobby_img_info"> <h1>文学h1> <h2>历史&写作h2> div> div> <div class="hobby_text_div"> <div class="hobby_img_info_mob"> <h1>文学/<a>历史&写作a>h1> div> <p class="about_p"> 和大多数人一样曾经也在可当上捧着一本小说看,以前喜欢小四韩寒马尔克斯村上春树,现在的兴趣 转移到历史上去了,屌丝只有多读书才能提高自己的内涵. p> <p> 此外也会写点东西,就是毅力不够，仍需磨砺. p> div> li> <div class="clear">div> ul> div> <div class="arrow_div"> <img class="arrow_img" src="images/icon/arrowhead.png"> div> div> <foot id="foot" class="foot"> <h1 class="foot_title">Contact With Meh1> <div class="foot_info_main"> <ul> <li class="github_items"> <a href="http://blog.yoomeili.cn" target="_blank">GitHuba> li> <li class="google_items"> <a href="http://blog.yoomeili.cn" target="_blank">Google+a> li> <li class="twitter_items"> <a href="http://blog.yoomeili.cn" target="_blank">Twittera> li> <li class="facebook_items"> <a href="http://blog.yoomeili.cn" target="_blank">FaceBooka> li> <li class="weibo_items"> <a href="http://blog.yoomeili.cn" target="_blank">微博a> li> <li class="zhihu_items"> <a href="http://blog.yoomeili.cn" target="_blank">知乎a> li> <li class="blog_items"> <a href="http://blog.yoomeili.cn" target="_blank">博客a> li> <li class="email_items"> <a href="mailto:min@coolecho.net" target="_blank">邮箱a> li> <div class="clear">div> ul> <div class="qrcode_div"> <span class="weixin"> <a class="weixin_icon">a> <img class="weixin_img" src="images/upload/weixin_qr.png"> span> <span class="dingding"> <a class="dingding_icon">a> <img class="dingding_img" src="images/upload/dingding_qr.png"> span> <span class="qq"> <a class="qq_icon">a> <img class="qq_img" src="images/upload/qq_qr.jpg"> span> div> div> <div class="foot_power"> <h3>©2016 Pwoerd <a href="http://yoomeili.cn" title="Night" target="_blank"> Night'sa> <a href="https://blog.yoomeili.cn" title="IceEnd">黑夜主权a> <a href="http://www.miitbeian.gov.cn/" title="beian" target="_blank">浙ICP备14039906号-1a> h3> div> foot> div> <script type="text/javascript" src="js/main.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
- 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
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
2.CSS样式代码 🏠
body { background-color: #ffffff; width: 100%; } .head { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; background-color: #f3f7fa; height: 70px; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; -khtml-opacity: 0.9; } .logo_img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #ffffff; margin-bottom: 15px; } .head_logo_div, .head_nav_div { width: 50%; float: left; } .head_logo_div { line-height: 70px; text-align: center; } .head_nav_div { line-height: 70px; } .head_nav { margin: 0 auto; } .head_nav ul li { float: left; margin-right: 55px; cursor: pointer; font-size: 16px; } .head_nav ul li a { font-size: 16px; color: #333333; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transform: all 0.2s; } .head_nav ul li a:hover { color: #4b91c9; } .wrapBox { top: 0; position: fixed; width: 100%; height: 100%; }- 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
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.以上内容技术相关问题😈欢迎一起交流学习🔥
-
相关阅读:
11 个 Flutter 最佳实践
js的节流和防抖详解
MindSpore-GeneratorDataset报错误Unexpected error. Invalid data type
LQ0262 棋盘放麦子【大数+亿进制】
HUDI（搭建详细记录附加jar）
A star算法
Python网络编程(OSI Socket)
iTOP3A5000_7A2000开发板龙芯全国产处理器LoongArch架构核心主板
【第 8 章 MySQL InnoDB ClusterSet 】
如何在最短时间内进行硕士毕业论文选题开题？
- 原文地址：https://blog.csdn.net/qq_38513433/article/details/127994753