• 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!
    请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。
    "    ;

            }
        }
        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>



    • 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

    三、精彩专栏

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

  • 相关阅读:
    window 如何使用命令行运行.exe文件?
    Unity-Adressable打包热更
    常用的数据库类别及介绍
    互联网电商大厂库存系统设计案例讲解
    【数据结构】堆排序和top-k问题
    Windows电脑画面如何投屏到电视？怎样限定投屏内容？
    Hadoop的第二个核心组件：MapReduce框架第三节
    儿童玩具出口欧盟CE认证测试标准
    C#中的浅拷贝（Shallow Copy）和深拷贝（Deep Copy），深拷贝的集中实现方式，浅拷贝深拷贝的案例
    es使用客户端,“grunt” 不是内部或外部命令，多种解决方法
  • 原文地址：https://blog.csdn.net/QQ_____365392777/article/details/126199699