-
HTML5七夕情人节表白网页制作【花瓣图片表白】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
一、网页介绍
1 网页简介：基于
HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>唯美 title> <meta name="keywords" content=" "> <meta name="description" content=" "> <meta name="author" content="www."> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="shortcut icon" href="index/images/favicon.ico"> <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link href="css/prettyPhoto.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.min.js" >script> <script type="text/javascript" src="js/content_switch.js">script> <script type="text/javascript" src="js/jquery.easing.1.3.js">script> <script type="text/javascript" src="js/jquery.mousewheel.js">script> <script type="text/javascript" src="js/jquery-ui.js">script> <script type="text/javascript" src="js/cScroll.js">script> <script src="js/jquery.cycle.all.latest.js" type="text/javascript">script> <script src="js/jquery.color.js" type="text/javascript">script> <script type="text/javascript" src="js/script.js">script> <script type="text/javascript" src="js/functions.js">script> <script src="js/prettyPhoto.js">script> <body onpaste="return false" ondragstart="return false" onmouseover="window.status='';return true" oncopy="return false;"> <frameset> <frame src="index.html"> frameset> <script> function stop(){ alert('宝贝，我爱你！'); return false; } document.oncontextmenu=stop; script> <body onselectstart="return false" onpaste="return false" oncopy="return false;" oncut="return false;" > a> <script> function checkhtml5() { if ($.browser.msie && parseInt($.browser.version, 10) < 9) { document.body.innerHTML="你的浏览器非常落后，不支持 HTML5!"; } } script> <style> a.wb_sina { float:left; margin-top:20px; margin-left:15px; display:inline-block; padding:4px 10px; border-radius:3px; background-color:#e55345; background-image:-moz-linear-gradient(top,#e96249,#e03c40); background-image:-ms-linear-gradient(top,#e96249,#e03c40); background-image:-webkit-gradient(linear,0 0,0 100%,from(#e96249),to(#e03c40)); background-image:-webkit-linear-gradient(top,#e96249,#e03c40); background-image:-o-linear-gradient(top,#e96249,#e03c40); background-image:linear-gradient(top,#e96249,#e03c40); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e96249',endColorstr='#e03c40',GradientType=0); background-repeat:repeat-x; text-shadow:0 -1px 0 rgba(0,0,0,.5); border:1px solid #cf2b28; color:#fff!important; box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2); } a.wb_sina:hover { background-image:-moz-linear-gradient(top,#e03c40,#e96249); background-image:-ms-linear-gradient(top,#e03c40,#e96249); background-image:-webkit-gradient(linear,0 0,0 100%,from(#e03c40),to(#e96249)); background-image:-webkit-linear-gradient(top,#e03c40,#e96249); background-image:-o-linear-gradient(top,#e03c40,#e96249); background-image:linear-gradient(top,#e03c40,#e96249); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e03c40',endColorstr='#e96249',GradientType=0); } a.wb_sina span { display:inline-block; vertical-align:-5px; margin-right:7px; height:20px; width:24px; background:url(./images/weibo.png) no-repeat; } a.wb_tencent { float:left; margin-top:20px; margin-left:15px; display:inline-block; padding:4px 10px; border-radius:3px; background-color:#0e7fcc; background-image:-moz-linear-gradient(top,#1288d4,#0771c1); background-image:-ms-linear-gradient(top,#1288d4,#0771c1); background-image:-webkit-gradient(linear,0 0,0 100%,from(#1288d4),to(#0771c1)); background-image:-webkit-linear-gradient(top,#1288d4,#0771c1); background-image:-o-linear-gradient(top,#1288d4,#0771c1); background-image:linear-gradient(top,#1288d4,#0771c1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1288d4',endColorstr='#0771c1',GradientType=0); background-repeat:repeat-x; text-shadow:0 -1px 0 rgba(0,0,0,.5); border:1px solid #0D6EB8; color:#fff!important; box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2); } a.wb_tencent:hover { background-color:#0e7fcc; background-image:-moz-linear-gradient(top,#0771c1,#1288d4); background-image:-ms-linear-gradient(top,#0771c1,#1288d4); background-image:-webkit-gradient(linear,0 0,0 100%,from(#0771c1),to(#1288d4)); background-image:-webkit-linear-gradient(top,#0771c1,#1288d4); background-image:-o-linear-gradient(top,#0771c1,#1288d4); background-image:linear-gradient(top,#0771c1,#1288d4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0771c1',endColorstr='#1288d4',GradientType=0); } a.wb_tencent span { display:inline-block; vertical-align:-5px; margin-right:7px; height:20px; width:24px; background:url(./images/weibo.png) no-repeat 0 -20px; } #abox { position: fixed; _position: absolute; right: 15px; z-index: 99999999; } style> head> <body onLoad="checkhtml5()"> <div id="abox"> div> <div class="page_spinner"> <div>div> div> <div class="over"> <div class="centre"> <div class="main"> <header> <h1><span id="logo"><img src="images/logo1.png" alt="" usemap="#logo">span>h1> <nav class="menu"> <ul id="menu"> <li id="nav1"><img src="images/nav1.png" alt=""><span>爱的宣誓span>li> <li id="nav2"><img src="images/nav2.png" alt=""><span>恋爱历程span> li> <li id="nav3"><img src="images/nav3.png" alt=""><span>絮叨絮叨span>li> <li id="nav4"><img src="images/nav4.png" alt=""><span>祝福我们span>li> <li id="nav5"><img src="images/nav5.png" alt=""><span>爱的映像span>li> <li id="nav6"><img src="images/nav6.png" alt=""><span>时光沙漏span>li> ul> nav> <img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation"> <map name="navigation" class="navigation"> map> <map name="logo" class="map_logo">map> header> <map name="back" class="map_back">map> <article id="content"> <ul> <li id="page_Home"> <img src="images/bg_content.png" alt="" class="bg_cont"> <span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a href="index.html#close">返回a>span> <div class="pad"> <h2>爱的宣誓h2> 人物：浟佳 & 宝贝<br /> 不在乎曾经拥有，只在乎天长地久。<br /> 爱，就要说出来！<br /> 再美好的回忆，也只是回忆；<br /> 再美丽的诺言，不到实现的那一刻，也只是一句空话。<br/> -- div> li> <li id="page_About"> <img src="images/bg_content.png" alt="" class="bg_cont"> <span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a href="index.html#close">返回a>span> <div class="pad"> <h2>恋爱历程h2> <div class="relative"> <div class="scroll"> <span>人物：浟佳 & 宝贝span> <p> 宝贝你还记得么？p> <p> XX年X月X日。p> <p> 我们在xx相遇。p> <p> 然后.........p> <p> 过程.........p> <p> 我爱你，我会一直陪在你身边p> <p> 不离不弃p> <p> - p> div> div> div> li> <li id="page_Talk"> <img src="images/bg_content.png" alt="" class="bg_cont"> <span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a href="index.html#close">返回a>span> <div class="pad"> <h2>絮叨絮叨h2> <div class="relative"> <div class="scroll"> <div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">浟佳<br/><span style="float: right"> --by span>div> <div style="width:100%;float: left">分享我所知道的<br/><span style="float: right"> --by span>div> div> div> div> li> <li id="page_Message"> <img src="images/bg_content.png" alt="" class="bg_cont"> <span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a href="index.html#close">返回a>span> <div class="pad"> <h2>祝福我们h2> <div class="relative"> <div class="scroll"> <div style="min-height: 300px; padding-bottom: 50px;"> <div class="ds-thread" data-thread-key="yyu" data-title="bb" data-url="http://">div> <script type="text/javascript"> var duoshuoQuery = {short_name:"love90"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '/static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); script> div> div> div> div> li> <li id="page_Blog"> <img src="images/bg_content.png" alt="" class="bg_cont"> <span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a href="index.html#close">返回a>span> <div class="pad"> <h2>爱的映像h2> <div class="relative"> <div class="scroll"> <ul class="gallery fancybox"> <li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt="">a>li> <li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt="">a>li> ul> div> div> div> li> <li id="page_Time"> <img src="images/bg_content.png" alt="" class="bg_cont"> <span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a href="index.html#close">返回a>span> <div class="pad"> <h2>时光沙漏h2> <div id="loveHeart" style="margin-top: 30px;font-size: 25px;"> <span style="">宝贝你知道我爱你爱了多久了吗？span> <div id="elapseClock" style="margin: 10px 0px 10px 0px;">div> <img src="images/1.gif" /> <img src="images/2.gif" /><br/><br/> <div id="loveu"> 爱：从2014-2-6开始！<br/> <div class="signature" style="float: right; margin-right: 50px;">by 浟佳 div> div> div> div> div> li> ul> article> div> div> <div class="bg1"> <div class="main"> <footer style="line-height:20px"> <div id="copyright"> <a href="" target=_blank>a> <a href="" target=_blank>a> <script language="JavaScript">script> object> div> footer> div> div> div> <script> $(window).load(function() { $('.page_spinner').fadeOut(); $('body').css({overflow:'visible'}); }) script> <script type="text/javascript">//修改时光沙漏时间 var offsetX = $("#loveHeart").width() / 2; var offsetY = $("#loveHeart").height() / 2 - 55; var together = new Date(); together.setFullYear(2014, 02, 06); together.setHours(17); together.setMinutes(0); together.setSeconds(0); together.setMilliseconds(0); setTimeout(function () { adjustWordsPosition(); startHeartAnimation(); }, 3000); timeElapse(together); setInterval(function () { timeElapse(together); }, 500); adjustCodePosition(); $("#code").typewriter(); script> <audio id="bgmMusic" src="http://www.51mp3ring.com/51mp3ring_com2/at200611121582079026.mp3" preload="auto" type="audio/mp3" autoplay loop>audio> div> body> html>
请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。- 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
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
2.CSS代码
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var{ background: transparent; border: 0 none; font-size: 100%; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; } ol, ul { list-style: none; } blockquote, q { quotes: none; } table, table td { padding:0; border:none; border-collapse:collapse; } img { vertical-align:top; } embed { vertical-align:top; } * { border:none} input, textarea{ outline:none !important} /* Getting the new tags to behave */ article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; } mark, rp, rt, ruby, summary, time{ display: inline } map, area{ padding:0; border:0; margin:0}- 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
三、精彩专栏
看到这里了就
【点赞，好评，收藏】三连 支持下吧，你的支持是我创作的动力。——
。 -
相关阅读:
阿里云服务器地域和可用区查询表_地域可用区大全
微服务中的相关概念
Flutter 教程之如何从头开始设置 Flutter（2022 mac 版）
大数据存储ClickHouse
小红书“极具潜力”的第2大消费人群丨男性市场洞察
Nested loop（PostgreSQL 14 Internals翻译版）
PyTorch 深度学习之处理多维特征的输入Multiple Dimension Input(六)
Vue-Pinia
旅游卡小程序开发搭建
Nginx反向代理配置
- 原文地址：https://blog.csdn.net/QQ_____365392777/article/details/126199699
