HTML向女神表白网页源码
时间:2022-06-26
本文章向大家介绍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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LOVE_XL</title>
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
</style>
<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div style="text-align:center;clear:both;">
</div>
<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">LOVE_XL</span><br />
<span class="space"/><span class="comments">⭐2017—03-15⭐</span><br />
<span class="space"/><span class="comments">⭐2017-03-15⭐</span><br />
<span class="space"/><span class="comments"></span><br />
男孩名 = <span class="keyword">区</span> 先生<br />
女孩名 = <span class="keyword">肖</span> 女士<br /><br />
<span class="comments">亲爱的; </span><br />
你那水灵灵的大眼睛;<br />
<span class="comments">那动人的容颜;</span><br />
充满爱和温暖的怀抱;<br />
<span class="comments">那活泼可爱的性格;</span><br />
已经让我在你的世界里迷失了自我;<br />
<span class="comments">除了爱你还是爱你.</span><br />
<br />
我想说:<br />
老婆,我永远爱你;<br />
<!--<span class="comments">A</span><br />
<span class="comments">B</span><br />
<span class="keyword">C</span> D <span class="keyword">E</span>;<br />
<span class="keyword">F</span> G <span class="keyword">H</span>;<br />
<span class="placeholder"/><span class="comments">I</span><br />
<span class="placeholder"/><span class="comments">J</span><br />
<span class="placeholder"/>K<br />
<span class="comments">L</span><br />
<br>
<br>-->
</div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
亲爱的,这是我们相爱在一起的时光。
<div id="elapseClock"></div>
</div>
<div id="loveu">
爱你直到永永远远。<br/>
<div class="signature">- 肖女士</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2017, 3, 15);
together.setHours(24);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
</script>
</body>
</html>
在线体验地址:
http://132.232.51.110:8001/
- Python基础03 序列
- Python基础02 基本数据类型
- 用命令重启IIS 常重启IIS的朋友看过来
- Python基础01 Hello World!
- 剑指OFFER之从上往下打印二叉树(九度OJ1523)
- 给你的博客加上“Fork me on Github”彩带
- Android Studio添加PNG图片报错原因
- 剑指OFFER之包含min函数的栈(九度OJ1522)
- 使用VS2010开发Qt程序的一点经验
- 用Qt写软件系列五:一个安全防护软件的制作(3)
- 剑指OFFER之顺时针打印矩阵(九度OJ1391)
- 用Qt写软件系列五:一个安全防护软件的制作(2)
- 2018年值得关注的200场机器学习会议
- Linux开机启动(bootstrap)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- php使用array_chunk函数将一个数组分割成多个数组
- keras读取训练好的模型参数并把参数赋值给其它模型详解
- python 删除excel表格重复行,数据预处理操作
- 终于搞懂了Keras中multiloss的对应关系介绍
- python else语句在循环中的运用详解
- python文件编写好后如何实践
- keras 指定程序在某块卡上训练实例
- Python3 requests模块如何模仿浏览器及代理
- PHP中的empty、isset、isnull的区别与使用实例
- Laravel学习笔记之Artisan命令生成自定义模板的方法
- php微信扫码支付 php公众号支付
- PHP析构函数destruct与垃圾回收机制的讲解
- 关于php unset对json_encode的影响详解
- python实现二分类和多分类的ROC曲线教程
- PHP随机数函数rand()与mt_rand()的讲解