• 情人节程序员用HTML网页表白【我永远属于你】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

    文章目录

    一、网页介绍

    1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

    2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

    一、网页效果

    在这里插入图片描述

    二、代码展示

    1.HTML代码

    代码如下（示例）：以下仅展示部分代码供参考~

    
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<SCRIPT language="JavaScript">
<!--

var layers = document.layers, style = document.all, both = layers || style, idme=908601;
if (layers) { layerRef = 'document.layers'; styleRef = ''; } if (style) { layerRef = 'document.all'; styleRef = '.style'; }

function writeOnText(obj, str) {
if (layers) with (document[obj]) { document.open(); document.write(str); document.close(); }
if (style) eval(obj+'.innerHTML= str');
}
//浠ヤ笅鏄緭鍑虹殑鍐呭锛岃嚜宸变慨鏀瑰嵆鍙€�
var dispStr = new Array(
"濡傛灉涓婂ぉ璁╂垜璁镐笁涓効鏈�
    绗竴涓槸浠婄敓浠婁笘鍜屼綘鍦ㄤ竴璧凤紝
    绗簩涓槸鏉ョ敓鏉ヤ笘鍜屼綘鍦ㄤ竴璧凤紝
    绗笁涓槸姘哥敓姘镐笘鍜屼綘涓嶅垎绂汇€�
    濡傛灉浣犺蛋浜嗭紝鎴戜細鍦ㄦ唱姘撮噷鐖变綘锛�
    濡傛灉浣犵殑蹇冩浜嗭紝鎴戜細鍦ㄧ敓鍛介噷鐖变綘锛�
    濡傛灉鐢熷懡娑堝け浜嗭紝鎴戜細鍦ㄨ疆鍥為噷鐖变綘锛�
    濡傛灉涓栫晫娑堝け浜嗭紝鎴戜細鍦ㄥぉ鍫傞噷鐖变綘銆�"    
);

var overMe=0;

function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {
var tmp0 = tmp1 = '', skip = 0;
if (both && idx <= str.length) {
if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; }
if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; }
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);

if (overMe==0 && plysnd==1) {
if (navigator.plugins[0]) {
if (navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100); }
} else if (document.all) {
ding.Stop();
setTimeout("ding.Run()",100);
}
overMe=1;
} else overMe=0;

writeOnText(idObj, "+spObj+">"+tmp0+""+tmp1+"    "    );
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);
}
}

function init() {
txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 50, 0);
}

// -->
    SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鎴戞案杩滃睘浜庝綘锛�title>
<style type="text/css">

	background-image: url(2da936856ffa20935c9aa4310e42f213.jpg);
}
.STYLE1 {
	font-size: 100px;
	font-family: "鏂规闈欒暰绠€浣�";
}
.STYLE11 {color: #CC0000}
.STYLE12 {color: #FF0099}
.STYLE13 {color: #FFCC33}
.STYLE14 {color: #FFFF00}
.STYLE15 {color: #66FF99}
.STYLE16 {color: #00CC00}
.STYLE17 {color: #0000FF}
body,td,th {
	font-family: 鏂规闈欒暰绠€浣�;
}
-->
style>head>

<body bgcolor="#fef4d9" onload="onload=init()">
<style type=TEXT/CSS> 
BODY {CURSOR:url('http://www.7stk.com/shubiao/bianxing/27.ani');} 
A {CURSOR:hand} 
style>


<DIV class=STYLE1 id=ttl0>DIV>
<div align="center">
  <p><img src="1.png" width="1136" height="536" />p>
  <p>銆€p>
div>
<div><embed src="1.swf" width="1105" height="788" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
div>
<div><embed src="28.swf" width="1083" height="327" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
div>
<table border="0" cellpadding="0" cellspacing="0" class="" width="1048" height="903">
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;width:130px;padding-right:4px;height:130px;padding-top:8px;" align="center">
			<p align="left">銆€td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="150" src="51e4ed2f77234973.jpg!200x200.jpg" width="147" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="149" src="51e4ed7661bdd911.jpg!200x200.jpg" width="146" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:4px;height:130px;padding-top:8px;" align="center">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f0a7b35b8241.jpg!200x200.jpg" width="158" height="158" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="157" src="51e4f0b8393c3816.jpg!200x200.jpg" width="152" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:8px;height:148px;padding-top:8px">
			<p align="left">td>
		tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="147" src="51e4f2a96e383053.jpg!200x200.jpg" width="148" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="149" src="51e4f2bb1d459977.jpg!200x200.jpg" width="145" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="153" src="51e4f2e8606ac059.jpg!200x200.jpg" width="150" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="152" src="51e4f2ea75a01579.jpg!200x200.jpg" width="155" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f3f3ac18a728.jpg!200x200.jpg" width="153" height="152" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="155" src="51e4f09fe9c5d646.jpg!200x200.jpg" width="152" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:8px;padding-top:0px;" height="145">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f12f79ffe837.jpg!200x200.jpg" width="148" height="150" />a>td>
		tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f15c054f0799.jpg!200x200.jpg" width="154" height="157" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="154" src="51e4f28e9d92f240.jpg!200x200.jpg" width="153" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f34d69529865.jpg!200x200.jpg" width="152" height="153" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="154" src="51e4f36c54ead504.jpg!200x200.jpg" width="156" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f326e5039869.jpg!200x200.jpg" width="154" height="153" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="147" src="51e4f352d14d4580.jpg!200x200.jpg" width="149" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:8px;padding-top:0px;" height="155">
			<p align="left">
			<a target="_blank">
			<img border="0" height="149" src="51e4f0362a72c627.jpg!200x200.jpg" width="147" />a>td>
		tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f1543b610345.jpg!200x200.jpg" width="150" height="154" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="154" src="51e4f4121a948369.jpg!200x200.jpg" width="153" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f07472bcb672.jpg!200x200.jpg" width="159" height="157" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="152" src="51e4f020825e1962.jpg!200x200.jpg" width="154" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="157" src="51e4f27353fd0515.jpg!200x200.jpg" width="154" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:8px;height:153px;padding-top:0px">
			<p align="left">td>
		tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f32101dca418.jpg!200x200.jpg" width="159" height="158" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="160" src="51e4f34577ca0010.jpg!200x200.jpg" width="156" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f351168ef123.jpg!200x200.jpg" width="156" height="157" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:8px;height:147px;padding-top:0px">
			<p align="left">td>
		tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;width:139px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;width:139px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;width:144px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;" width="142">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f33995019748.jpg!200x200.jpg" width="158" height="156" />a>td>
			<td style="padding-bottom:4px;padding-left:0px;width:152px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;width:146px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left">td>
			<td style="padding-bottom:4px;padding-left:0px;width:146px;padding-right:8px;height:155px;padding-top:0px">
			<p align="left">td>
		tr>
table>
<div><embed src="http://www.flash1890.com/swf/sucai/xin/67.swf" width="1090" height="226" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
div>
<p align="center"><img src="133042555425a0-21ja.gif" width="546" height="519" />p>
<div><embed src="http://www.flash1890.com/swf/sucai/xin/19.swf" width="1083" height="420" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
div>
<div><embed class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" src="http://www.flash1890.com/swf/sucai/xin/72.swf" height="517" width="1082"/>
<br/>
div>
<div><embed src="http://cloud.kugou.com/singlePlayer/4/362/undefined/1/A0BB869374F02F92921E93435901DA69.swf" width="1083" height="78" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
div>
<div><br/>
div>body>


<div id="bubbles" style="visibility:hidden">
<img src="img/1.png">
<img src="img/2.png">
<img src="img/1.png">
div>




html>
<span style="display:none">
<script language="javascript" type="text/javascript" src="http://js.users.51.la/15969447.js">script>
<noscript><a href="http://www.51.la/?15969447" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/15969447.asp" style="border:none" />a>noscript>
span>
                            


    • 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

    三、精彩专栏

    看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。

  • 相关阅读:
    8、架构-分布式的共识
    【Unity】【C#】【VS】如何将VS写的通用C#窗体程序修改为Unity程序
    springboot基于微信小程序的校园外卖系统毕业设计源码091024
    常见编写JavaScript代码时容易出现的错误（3）
    R语言查看版本 R包查看版本
    Deno入门：Node.js的现代替代品
    免费文字转语音软件有哪些？这几款宝藏工具你值得拥有
    [附源码]Python计算机毕业设计django学生学习评价与分析系统
    【计算机思维】01.计算机思维框架
    一次由 select * 走了索引而引发的思考
  • 原文地址：https://blog.csdn.net/VX_WJ88950106/article/details/126202989