HTML5七夕情人节表白网页制作【html5全屏七夕表白页面滚动模板】HTML+CSS+JavaScript

最新推荐文章于 2023-02-09 20:10:30 发布

QQ__2709137139

最新推荐文章于 2023-02-09 20:10:30 发布

阅读量180

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/QQ__2709137139/article/details/126311029

版权

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

一、网页介绍

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

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

一、网页效果

在这里插入图片描述

二、代码展示

1.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>照片墙</title>
    <script async src="http://c.cnzz.com/core.php"></script>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <div class="flowtime">
        <div class="ft-section section-1" data-id="section-1">
            <div id="/section-1/page-1" class="ft-page page-1" data-id="page-1">
                <p class="text1"><span id="text-75" contenteditable="true">晗晗</span> ❤ <span id="text-76" contenteditable="true">小宇</span> <span id="text-77" contenteditable="true">一生一世</span></p>
                <p class="text2">请按键盘 "↓" <span id="text-78" contenteditable="true">开始倾听我的表白</span></p>
            </div>
            <div id="/section-1/page-2" class="ft-page page-2" data-id="page-2">
                <p class="top-text" id="text-1" contenteditable="true">过去的张千一直是一个人生活，享受着孤独，也憧憬着爱情。</p>
                <img src='img/iali63.jpg' alt="过去的张千一直是一个人生活，享受着孤独，也憧憬着爱情。" />
            </div>
            <div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3">
                <h2 class="text" id="text-2" contenteditable="true">一个人的长廊</h2>
                <img src='img/iali35.jpg' alt="一个人的长廊" />
            </div>
            <div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4">
                <h2 class="center-text" id="text-3" contenteditable="true">一个人的山岗</h2>
                <img src='img/iali6.jpg' alt="一个人的山岗" />
            </div>
        </div>
        <div class="ft-section section-2" data-id="section-2">
            <div id="/section-2/page-1" class="ft-page page-5 full-img" data-id="page-1">
                <h2 class="center-text" id="text-4" contenteditable="true">一个人的地铁</h2>
                <img src='img/iali19.jpg' alt="一个人的山岗" />
            </div>
            <div id="/section-2/page-2" class="ft-page page-6" data-id="page-2">
                <h2 class="center-text" id="text-5" contenteditable="true">一个人的游乐场</h2>
                <img src='img/iali29.jpg' alt="一个人的游乐场" />
            </div>
            <div id="/section-2/page-3" class="ft-page page-7" data-id="page-3">
                <h3 id="text-6" contenteditable="true">但他依然乐观，微笑着，等待着</h3>
                <img src='img/iali60.jpg' alt="但他依然乐观，微笑着，等待着" />
            </div>
            <div id="/section-2/page-4" class="ft-page page-8 full-img" data-id="page-4">
                <h3 id="text-7" contenteditable="true">生活难免有风风雨雨</h3>
                <img src='img/iali51.jpg' alt="生活难免有风风雨雨" />
            </div>
            <div id="/section-2/page-5" class="ft-page page-9" data-id="page-5">
                <h3 id="text-8" contenteditable="true">他总是能够轻松的应对</h3>
                <img src='img/iali5.jpg' />
            </div>
            <div id="/section-2/page-6" class="ft-page page-10" data-id="page-6">
                <h3 id="text-9" contenteditable="true">并且面带阳光、自信的笑容</h3>
                <img src='img/iali22.jpg' />
            </div>
        </div>
        <div class="ft-section section-3" data-id="section-3">
            <div id="/section-3/page-1" class="ft-page page-11 full-img" data-id="page-1">
                <h3 id="text-10" contenteditable="true">生活也不会总是一帆风顺</h3>
                <img src='img/iali24.jpg' />
            </div>
            <div id="/section-3/page-2" class="ft-page page-12" data-id="page-2">
                <h3><span id="text-11" contenteditable="true">但他每次都能勇敢的面对

最低0.47元/天解锁文章

QQ__2709137139

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5七夕情人节表白网页制作【html5全屏七夕表白页面滚动模板】HTML+CSS+JavaScript

1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~2.CSS代码三、精彩专栏看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。gitee码
复制链接

扫一扫