情人节程序员用HTML网页表白【表白对话】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
- 2.CSS代码
三、精彩专栏

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>LOVE</title>
<link href="style/main.css" rel="stylesheet" >
</head>
<style>
	
</style>
<body>
	<div class="box" align="center">
		<p>我观察你很久了</p>
		<h1>小姐姐做我对象好不好?</h1>
		<img src="images/1.jpg">
		<div class="bottom">
			<div class="left" id="hao">好</div>
			<div class="right" id="buhao">不好</div>
		</div>
	</div>
</body>
	<script type="text/javascript" src="js/zaiyiqi.js"></script>
</html>
 
 复制

2.CSS代码

  
@charset "utf-8";
/* CSS Document */
 
 
 
/*电脑版本*/
@media screen and (min-width:501px){
.box{
		width: 600px;
		background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
		border-radius: 10px;
		margin: 0 auto;
		color: aliceblue;
		 margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
   	 	right: 0;
    	bottom: 0;
	}
	.box img{
		width: 200px;
		height: 200px;
		border-radius: 5px;
	}
	.box p{
		padding-top: 30px;
		font-weight: bold;
	}
	.bottom{
		margin-top:30px;
		width: 99%;
		height: 80px;
	
	}
	.left{
		display: inline-block;
		width: 150px;
		height: 40px;
		background-color: #5cb85c;
		border-color: #4cae4c;
		margin-right: 100px;
		border-radius: 5px;
		line-height: 40px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
	}
	.left:hover{
		background-color:#328732;
		
	}
		.right{
		cursor: pointer;
		display: inline-block;
		width: 150px;
		height: 40px;
		background-color: #c9302c;
		border-color: #ac2925;
		border-radius: 5px;
		line-height: 40px;
		font-size: 16px;
		
	}
	.right:hover{
		border-color:#B11C18;
	}
}
/*手机端*/
@media screen and (max-width:500px){
	.box{
		width: 100%;
		background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	
		margin: 0 auto;
		color: aliceblue;
		 margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
   	 	right: 0;
    	bottom: 0;
	}
		.box img{
		width:150px;
		height: 150px;
		border-radius: 5px;
	}
	.box p{
		padding-top: 30px;
		font-weight: bold;
	}
	.bottom{
		margin-top:3%;
		width: 99%;
		height: 80px;
	
	
	}
	.left{
		display: inline-block;
		width: 40%;
		height: 40px;
		background-color: #5cb85c;
		border-color: #4cae4c;
		margin-right: 10%;
		border-radius: 5px;
		line-height: 40px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
	}
	.left:hover{
		background-color:#328732;
		
	}
		.right{
		cursor: pointer;
		display: inline-block;
		width: 40%;
		height: 40px;
		background-color: #c9302c;
		border-color: #ac2925;
		border-radius: 5px;
		line-height: 40px;
		font-size: 16px;
		
	}
	.right:hover{
		border-color:#B11C18;
	}
 
 
	
 
}
 
 
 复制

三、精彩专栏

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

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

情人节程序员用HTML网页表白【表白对话】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000


	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>LOVE</title>
	<link href="style/main.css" rel="stylesheet" >
	</head>
	<style>

	</style>
	<body>
	<div class="box" align="center">
	<p>我观察你很久了</p>
	<h1>小姐姐做我对象好不好?</h1>
	<img src="images/1.jpg">
	<div class="bottom">
	<div class="left" id="hao">好</div>
	<div class="right" id="buhao">不好</div>
	</div>
	</div>
	</body>
	<script type="text/javascript" src="js/zaiyiqi.js"></script>
	</html>


	@charset "utf-8";
	/* CSS Document */



	/电脑版本/
	@media screen and (min-width:501px){
	.box{
	width: 600px;
	background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	border-radius: 10px;
	margin: 0 auto;
	color: aliceblue;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}
	.box img{
	width: 200px;
	height: 200px;
	border-radius: 5px;
	}
	.box p{
	padding-top: 30px;
	font-weight: bold;
	}
	.bottom{
	margin-top:30px;
	width: 99%;
	height: 80px;

	}
	.left{
	display: inline-block;
	width: 150px;
	height: 40px;
	background-color: #5cb85c;
	border-color: #4cae4c;
	margin-right: 100px;
	border-radius: 5px;
	line-height: 40px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	}
	.left:hover{
	background-color:#328732;

	}
	.right{
	cursor: pointer;
	display: inline-block;
	width: 150px;
	height: 40px;
	background-color: #c9302c;
	border-color: #ac2925;
	border-radius: 5px;
	line-height: 40px;
	font-size: 16px;

	}
	.right:hover{
	border-color:#B11C18;
	}
	}
	/手机端/
	@media screen and (max-width:500px){
	.box{
	width: 100%;
	background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);

	margin: 0 auto;
	color: aliceblue;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}
	.box img{
	width:150px;
	height: 150px;
	border-radius: 5px;
	}
	.box p{
	padding-top: 30px;
	font-weight: bold;
	}
	.bottom{
	margin-top:3%;
	width: 99%;
	height: 80px;


	}
	.left{
	display: inline-block;
	width: 40%;
	height: 40px;
	background-color: #5cb85c;
	border-color: #4cae4c;
	margin-right: 10%;
	border-radius: 5px;
	line-height: 40px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	}
	.left:hover{
	background-color:#328732;

	}
	.right{
	cursor: pointer;
	display: inline-block;
	width: 40%;
	height: 40px;
	background-color: #c9302c;
	border-color: #ac2925;
	border-radius: 5px;
	line-height: 40px;
	font-size: 16px;

	}
	.right:hover{
	border-color:#B11C18;
	}




	}

情人节程序员用HTML网页表白【表白对话】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

微信扫一扫：分享