HTML5七夕情人节表白网页制作【花瓣图片表白】HTML+CSS+JavaScript html生日快乐祝福网页制作
【摘要】 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。@TOC 一、网页介绍1 网页简介：基于 HTML+CSS+JavaScript 制作七...
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
@TOC
一、网页介绍
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>
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/html5.js"></script>
<link rel="stylesheet" href="./css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
</div>
<![endif]-->
<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="<div style=' clear: both; text-align:center; position: relative; height: 50px; margin-top: 30px; padding: 20px; background-color: red; color: white; font-size:20px;'>你的浏览器非常落后，不支持 HTML5!<br/>请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。</a></div>";
}
}
</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 -->
<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>
<!--header end-->
<!--content -->
<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;">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="yyu" data-title="bb" data-url="http://"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<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>
<!-- 多说公共JS代码 end -->
</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>
<!--content end-->
</div>
</div>
<div class="bg1">
<div class="main">
<!--footer -->
<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_LINK} -->
</footer>
<!--footer end-->
</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>
<!--coded by koma-->
<!--LIVEDEMO_00 -->
</div>
</body>
</html>
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}
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）