给女友的网页小惊喜,(生日,周年,表白通用) ☞谁说程序员不懂浪漫

news2025/2/27 8:07:46

有女朋友的拿去给女朋友一个惊喜,没女朋友的拿去表白,或者NEW它10000000个ε≡٩(๑>₃<)۶

文章目录

  • 前言
  • 适用范围
  • 网页展示
    • 登录界面
    • 文字界面
    • 图片界面
    • 尾部界面
  • 获取源码

前言

前些日子是女友的一周年,康康想用一种特殊的方式来庆祝,于是想到了通过做网页的方式来纪念这一天,但是在网上搜索了大量资源后发现很多都很老套,是很多年前的那种,这不符合康康的风格,于是利用搜集来的资料,加入了个人的理解和思路,以及最近流行的3D图册,经过不懈努力,做出了一套四网页,治愈风的html网页。(html+css+JavaScript)(含背景音乐)

适用范围

该网站主体使用少女粉配色,有四个界面,适合于于表白,庆祝生日,周年,以及给女友小惊喜,博主以及给大家整理好了模板,大家只需简单修改,即可用网页生成打开。
每一个网页都有背景音乐,网页默认禁止音乐播放,但是我发现,先点超链接到下一页,再回来就有背景音乐了,大家可以试试。
这里我建议大家在自己电脑上做好,录屏,然后一步步操作,发给你的女友。
(下面是详细使用说明)

网页展示

登录界面

在这里插入图片描述第一张图片可以放女友的照片。

博主在这里用的是女友照片的q版本头像,如果需要,可在某宝搜索q版头像绘画,自行选择。

Happy First Anniversary是一周年快乐的意思,可根据需要自行修改。

<h1>Happy First Anniversary</h1>

修改照片只需要将文件hello.html中的src改一下即可

<img src="../static/img/yali2.png" width="300px" >

用户名和密码可以输入有意义的一串字符,(这里没设置具体的值)
然后点击i am here进入下一页文字界面。

文字界面

在这里插入图片描述

这里有两个版本
第一个是文字版,第二个是图片版
使用时删除文字或图片使用。
选择一个选择使用,模板给大家准备好了,如果有自己想说的话把文字全删了改成自己想说的即可,文字版比较简陋,图片版是高配版,根据自行需要选择。

文字版
这里文字自行修改,同上

<h1>大哥没文化,大哥也不太会说话,但是大哥爱你</h1>
		相信我们未来会一起携手走过,</br>回头看看我们也经历了很多酸甜苦辣,
		</br>有甜蜜,有争吵,也有闹小性子的急切,也有相互关心的温暖,</br>相信所有的爱在未来都会成长为参天大树,</br>那些绊脚石也都会成为我们通往幸福路上的铺垫。
		</br>曾记否,去年今日,夜幕降临,漫漫一望无际的银河,
		</br>是你的出现闪耀了我整个天河,</br>在爱与期望中我追逐着你的耀眼星光,
		</br>你拉起我,我们一起遨游在璀璨的星河,</br>宇宙宽广星河且长,我们一起跳过一颗又一颗星球,
		</br>终于,我们找到了那颗属于我们自己的星球,</br>希望我的宝贝能在我们的星球里。</br>一要快乐,</br>二要健康,</br>三要顺心,</br>四要充实,</br>五要聪慧,
		</br>六要富贵,</br>last not but least</br> 要爱我哟!
</br>(づ ̄3 ̄)づ╭❤~</br>

图片版
在这里插入图片描述
文件夹中已经给大家准备好了信封的word格式,
大家改改文字导出图片把原图片替换掉即可。(博主用到了特殊字体,下载到你的电脑上可能不显示,如果需要,文件夹中给大家带的有字体,大家自行安装)

`<img src="../static/img/letter.jpg"  width="500px"  >`

图片界面

在这里插入图片描述这个应该是本文最炫酷的部分了,相信女友收到的瞬间肯定会喜欢的。

这个部分比较简单,大家只需要找到img文件夹,把12张图片换成自己女朋友的即可,别忘了把图片的名字换成和之前一样的哦。如果格式不一样就直接把图片位置改掉,修改位置如下。

<div class="out_front">
		<img src="../static/img/1.jpg"  class="pic" >

尾部界面

在这里插入图片描述

尾部就是用烟花的形式来进行收尾,让你的女朋友回味无穷。

获取源码

版权声明:
本文版权归csdn @康康爱吃肉所有
欢迎转载,
由于本文制作不易,请尊重劳动成果,

需要源码的可以成为康康的粉丝
私信:4.20网页源码 即可获取

不会做点我

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405243.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue实现导出word文档(含多张图片)

一、实现效果 以填写并导出房屋出租审批表为例&#xff0c;首先填写表格相应内容后&#xff0c;点击" 导出 "按钮实现word文档的导出功能&#xff0c;界面如下所示&#xff1a; 最后导出word文档如下所示&#xff1a; 二、所需插件 这里使用npm对以下所需依赖进…

【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端

配套视频地址&#xff1a;https://www.bilibili.com/video/BV1dG4y1T7yp/ 前端笔记 1. node环境 官网&#xff1a;https://nodejs.org 注意&#xff0c;node可以比我稍低&#xff0c;但不要更高 2. 下载vue-admin-template https://panjiachen.gitee.io/vue-element-admin…

HTML表格合并行和列

HTML表格合并行和列1.合并行&#xff1a;rowspan2.合并列&#xff1a;colspan1.合并行&#xff1a;rowspan 在设计表格时&#xff0c;有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格&#xff08;类似Word的表格合并&#xff09;&#xff0c;这个时…

2023前端最新高频面试题总结(附答案)

目录 1.vue双向数据绑定的原理&#xff1f; 2.vue的生命周期有哪些 3.v-if 和v-show有什么区别&#xff1f; 4.async await 是什么&#xff1f;它有哪些作用&#xff1f; 5、数组常用的方法&#xff1f;哪些方法会改变原数组&#xff0c;哪些不会 6.什么是原型链&#xf…

前端网页设计必逛的六个宝藏网站(非常值得收藏)

&#x1f389;个人主页&#xff1a;这个昵称我想了20分钟 ✨往期专栏&#xff1a; 【速成之路】jQuery 【SQL server速成之路】 素材网站✨iconfont阿里巴巴矢量图标库  ✨美叶  ✨IconPark  ✨pexels  ✨COLOR  ✨Uigradients✨iconfont阿里巴巴矢量图标库 网站入口…

【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 前言 首页都会提供一个搜索框给到客户&#xff0c;让客户自己去搜索自己想要的内容&#xff0c;这里就需要导航栏&#xff0c;来实现搜索页面的跳转&#xff0c;效果如下 App…

Vue框架教程-从入门到项目实战

创建Vue项目 我们通过vue-cli创建一个vue项目&#xff0c; 在cmd窗口输入 vue ui 进入vue-cli可视化界面&#xff08;如果无效请升级vue-cli版本&#xff09;点击创建&#xff0c;选择一个项目目录输入项目名称和git初始化窗口(可选)选择预设&#xff0c;可以选择手动和预定的…

如何清除全部的定时器

通过 setTimeout() 函数来建立定时器&#xff0c;并通过 clearTimeout() 函数来清除定时器。 let timerTimeout setTimeout(() > {console.log("2222222-----------------------------"); }, 1000); clearTimeout(timerTimeout);通过 setInterval() 函数来建立定…

Node.js error: ERR_OSSL_EVP_UNSUPPORTED

Node.js 17版本的更新日志&#xff1a; 2021-10-19, Version 17.0.0 (Current), BethGriggs Notable Changes ... OpenSSL 3.0 Node.js now includes OpenSSL 3.0, specifically quictls/openssl which provides QUIC support. With OpenSSL 3.0 FIPS support is again availab…

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

报错起因 在VScode中运行vue项目时&#xff0c;【前提&#xff1a;把项目文件换到另一个网盘存放&#xff0c;存放失败&#xff0c;又重新放回原位置再次运行时】 报错如下&#xff1a; npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查 解决…

C++——WebServer服务器项目

项目场景&#xff1a; C——WebServer服务器编程 项目搭建 &#xff08;1&#xff09;配置虚拟机&#xff0c;下载XShell、Xftp以及windows版本的VScode&#xff1b; &#xff08;2&#xff09;安装SSH&#xff1a; sudo apt install openssh-server&#xff08;3&#xff…

React组件的生命周期函数

文章目录React组件生命周期认识生命周期生命周期函数不常用生命周期函数React组件生命周期 认识生命周期 很多的事物都有从创建到销毁的整个过程&#xff0c;这个过程称之为是生命周期&#xff1b; React组件也有自己的生命周期&#xff0c;了解组件的生命周期可以让我们在最…

controller层,service层,mapper层,entity层的作用与联系。

一. controller层 controller层是用来接受前台数据和返回页面请求信息的&#xff0c;Controller层是不允许直接操作数据库的&#xff01;它就像一个服务员&#xff0c;哪桌客人需要点菜了&#xff0c;就喊一声服务员&#xff01; 对应的&#xff0c;外界需要完成什么样的业务&…

Css 弹性布局(Flex)详细介绍(Flex 属性详解、场景分析)

目录​​​​​​​ 前言 Flex 布局是什么&#xff1f; Flex 简介 Flex 容器属性 Flex 基本使用 场景一 flex-direction 场景二 justify-content align-items flex-wrap 场景三 前言 我们知道&#xff0c;网页展示就好比一个个盒子堆叠在一起&#xff0c;通过调整…

2022版完整版web前端学习路线图(超详细自学路线)

跟着路线图认真坚持学习从前端小白到大神不是梦&#xff0c;0基础看这一篇足矣&#xff01; 学们记得加关注点赞收藏&#xff0c;自学路上不迷糊&#xff01; 零基础小白自学前端路线图速览&#xff1a; 阶段一&#xff1a;核心基础入门 前端计算机常识 ➾ htmlcss基础 ➾ h…

JDBC 连接 MySQL

哈喽~大家好&#xff0c;这次我们来看看 JDBC 如何 连接 MySQL. 目录 一、开头 二、介绍 1、JDBC 的概念 2、JDBC 的功能 3、JDBC 的常用接口和类 三、数据库的创建&#xff08;MySQL&#xff09; 1、连接 MySQL (1)、注册驱动 (2)、获取连接 (3)、获取执行者连接 …

猿创征文|超实用的前端开发工具分享

&#x1f373;作者&#xff1a;贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 &#xff0c;一名很普通但不想普通的程序媛}贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛&#x1f933; &#x1f64a;语录&#xff1a;多一些不为什么的…

Element UI 及 Element Plus框架

一&#xff0c;何为Element UI 及 Element Plus&#xff1f; 它们是前端框架。它是包含很多有自己风格的组件库。 Element目前有两个版本&#xff1a;element-ui 及 element-plus两个版本。它将HTML的基础控件进行了封装&#xff0c;用户只需要调用这些控件就可以了。而不需要…

实验一 基于CSS+HTML+JS开发简单个人网站

目录&#xff1a; 实验要求 实验代码 1.注册 2.登录 3.主页 4.个人简介 5.我的理想 6.我的生活 7.学习内容 总结 实验要求 实验一 基于CSSHTMLJS开发简单个人网站 实验学时&#xff1a;4 实验类型&#xff1a;设计 一、目的与任务 目的&#xff1a;熟悉在静态网…

Vue3-Pinia的基本使用

什么是Pinia呢&#xff1f; Pina开始于大概2019&#xff0c;是一个状态管理的库&#xff0c;用于跨组件、页面进行状态共享&#xff08;这和Vuex、Redux一样&#xff09;,用起来像组合式API&#xff08;Composition API&#xff09; Pinia和Vuex的区别 PInia的最初是为了探索…