女友生日贺卡(网页),(女朋友收到后感动哭了，后来我也哭了)

早上我上CSDN查资料(签到，抽谢谢惠顾)的时候，首页推送了一个给女朋友做网页表白程序的博客，突然想起女朋友明天的生日，于是花了两小时做了个生日贺卡送给她，没想到她收到后感动哭了(把我打了)

pc展示

代码,主要使用了html和css，还有亿点点的JavaScript。

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{width: 100%;height: 100%;position: relative;background-color: cadetblue;}#cat{width: 60px;height: 50px;background-image: url('./img/cat.png');background-size: contain;position: fixed;right: 100px;top: 50px;cursor: pointer;}#box{width: 500px;height: 350px;position: relative;background-image: url('./img/1000065.jpg') ;background-size: cover;margin: 180px auto 0px ;border-radius: 25px;}#box p{cursor: pointer;}#box .p1{color: whitesmoke;font-size: 2em;font-family: 'Courier New', Courier, monospace;position: absolute;left: 190px;top: -50px;}#box .p2{color: thistle;position: absolute;left: 20px;top: 10px;font-family: 'Times New Roman', Times, serif;font-size: 2em;}#box .p2 span{color: black;}#box .p30{width: 20px;position: absolute;right: 50px;top: 100px;color: ivory;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}#box .p31{width: 20px;position: absolute;right: 75px;top: 130px;color: ivory;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}#box .p32{width: 20px;position: absolute;right: 100px;top: 100px;color: ivory;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}#box .p33{width: 20px;position: absolute;right: 125px;top: 130px;color: ivory;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}#box .p34{position: absolute;right: 0px;top: 250px;color: ivory;}#box .p4{color: ivory;font-family: 'Courier New', Courier, monospace;position: absolute;left: 150px;bottom: 0px;}#earth{width: 50px;height: 50px;background-image: url('./img/ground.png');background-size: cover;margin: 30px auto;cursor: pointer;}</style>
</head>
<body><div id="cat"></div><div id="box"><p class="p1">Message</p><p class="p2">25<span>/</span>03</p><p class="p3"><p class="p30">山河远阔，</p><p class="p31">人间烟火，</p><p class="p32">无一是你，</p><p class="p33">无一不是你。</p><p class="p34">——《江海共余生》</p></p><p class="p4">"I Am In LOVE With YOU"</p></div><a href="./html/birthday.html"><div id="earth"></div></a></body>
<script></script>
</html>

birthday.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {width: 100%;height: 100%;background-color: #5274a0;position: relative;}#player {width: 400px;height: 100px;background-color: cadetblue;border-radius: 20px;position: absolute;left: 200px;top: 300px;}#player .cake {width: 70px;height: 70px;position: absolute;margin: 15px;border-radius: 10px;background-image: url('./../img/birthday.png');background-size: cover;}#player p {position: absolute;left: 100px;top: 20px;cursor: pointer;color: ivory;font-family: 'Courier New', Courier, monospace;}#tip {position: absolute;top: 60px;left: 100px;}#play2 {width: 40px;height: 40px;position: absolute;margin: 30px;right: 0px;background: url('./../img/play2.png');background-size: cover;}#bill {width: 450px;height: 450px;background-image: url('./../img/ss.png');background-size: cover;position: absolute;top: 120px;left: 750px;}</style>
</head><body><div id="player"><div class="cake"></div><p>Happy Birthday</p><div id="tip"></div><div id="play2"><audio id="music" src="./../song.mp3"></audio></div></div><div id="bill"></div>
</body>
<script>var play2 = document.getElementById('play2')var music = document.getElementById('music')var tip = document.getElementById('tip')var i = 0;play2.onclick = function () {i++;if (i % 2 == 1) {music.play();play2.style.background = "url(./../img/stop2.png)";setTimeout(function () {tip.innerHTML = "正在播放《Happy Birthday》"}, 500)} else {music.pause();play2.style.background = "url(./../img/play2.png)";setTimeout(function () {tip.innerHTML = ""}, 500)}play2.style.backgroundSize = "cover";}
</script></html>

女友生日贺卡(网页),(女朋友收到后感动哭了，后来我也哭了)相关推荐

七夕，都是谁在购买“女朋友收到都哭了”？
淘宝官方公众号在2020年发布了8条关于淘宝的冷知识. 其中一条是,每天有36735人在淘宝上搜索"女朋友感动哭了". 所以前几天,有多少女生被自己的男孩感动哭了? 1 很多女生不 ...
3d相册 html 代码_女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）...
女朋友生日,我送她网页相册,她感动的哭了(文中有惊喜) 导语: 女朋友最近生日,我作为浪漫(搞事)专家,怎么能不弄点惊喜呢?于是我的这一件礼物,直接把女朋友感动哭了. 我和女朋友的甜蜜聊天对话!! 那 ...
程序员给女友4千生活费，收到女友错发信息后分手，神对话！
如何平衡好亲情爱情的关系,是一门学问,有的人就希望自己的另一半过好他们自己的小日子,不要对家里的事情过多的付出,但有人觉得自己父母养大自己不容易,能有能力的话,不光孝敬爹妈,还会帮衬家里的弟弟妹妹. ...
android层叠卡片特效_LINE生日贺卡功能升级　快来试试私人生日贺卡气球祝福特效...
▲「LINE生日贺卡」功能大升级.(图/LINE提供) 姚惠茹/台北报导 LINE今(29)日宣布,只要将LINE更新到Android / iOS 9.13.0(含)以上,就会有生日贺卡的新功能出现, ...
2022给闺蜜的生日贺卡祝福语
生日是一个人纪念出生的日子,朋友生日来临时我们会送上自己的生日祝福,收到生日祝福的朋友会变得更加开心.有哪些比较合适朋友的生日祝福语呢?为了帮助大家,下面是由小编为大家整理的2022给闺蜜的生日贺卡祝 ...
python制作生日祝福_【中信项目案例分享】python 实现自动生成个性化生日贺卡...
python 处理图片 1. 图片上添加文字 1.1 代码部分代码原理: 创建与原图同等大小的一张图片, 设置透明度为 0, 将两张同大小的图片重叠 from PIL import Image,Im ...
python画一个祝福别人生日快乐_生日贺卡祝福语（精选50条）
生日贺卡祝福语(精选50条) 在朋友亲人生日时想要送上一张贺卡,那么关于贺卡的内容应该怎么写呢?下面是小编为大家收集的生日贺卡祝福语(精选50条),仅供参考,希望能够帮助到大家. 1.浩瀚的星空,闪烁 ...
Scratch官方教程中文版(2)——制作可交互的生日贺卡
原文网址:https://www.toutiao.com/i6546125948423504392/ 可交互的生日贺卡运行效果图一.添加背景幕布从背景库里选择聚会背景,你也可以选择其他背景,你可以 ...
大学计算机课程制作生日卡片,DIY手工制作生日贺卡
人们在日常生活中经常会遇到好朋友过生日,这时候肯定需要送上一张生日卡片,其实大家没有必要去礼品店购买生日卡片,可以自己亲手制作一张生日卡片,这里想教大家的是简单可爱的生日贺卡制作教程,自己一个人轻轻松 ...

女友生日贺卡(网页),(女朋友收到后感动哭了，后来我也哭了)

女友生日贺卡(网页),(女朋友收到后感动哭了，后来我也哭了)相关推荐

最新文章

热门文章