情人节程序员用HTML网页表白【粉色烂漫的七夕情人节专题页面】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

最新推荐文章于 2024-05-07 23:11:20 发布

旧城空忆

最新推荐文章于 2024-05-07 23:11:20 发布

阅读量425

点赞数 10

分类专栏：网页设计文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_3200628753/article/details/126211531

版权

网页设计专栏收录该内容

644 篇文章 5 订阅

订阅专栏

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

一、网页介绍

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

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

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>七夕--让浪漫如期而至</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/main.js"></script>
    <!--[if IE 6]>
<script src="./js/DD_belatedPNG.js"></script> 
<script type="text/javascript">     /* EXAMPLE */   DD_belatedPNG.fix('.png');   /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,
例如我例子中的'.trans'*/
</script> <![endif]-->
    <!--if IE->
<script src="./js/html5.js"></script>
<![endif]-->
</head>

<body>
    <!--右边栏-->
    <div id="sidebar">
        <ul>
            <li class="lover png"></li>
            <li class="one png"><a href="#f1"></a></li>
            <li class="two png"><a href="#f2"></a></li>
            <li class="three png"><a href="#f3"></a></li>
            <li class="four png"><a href="#f4"></a></li>
            <li class="go-top png"><a href="#f1"></a></li>
        </ul>
    </div>
    <!--头部-->
    <div id="f1">
        <div class="warp one-box">
            <span class="tuhao"><a href="#f4">真土豪赢大奖</a> <b>>></b></span>
        </div>
    </div>
    <!--浪漫七夕 为TA选礼-->
    <div id="f2">
        <div class="warp two-box">
            <div class="title"><span></span>浪漫七夕 为TA选礼</div>
            <div class="h-box">
                <a href="http://www.hhxtd.com/product-254054.htm" target="_blank" class="png">
                    <div class="goods f-left png">
                        <div class="goods-png png"><img class="png" src="./goods/a1.png" alt=""></div>
                        <div class="content">
                            <div class="t">--小熊花束</div>
                            <div class="info">霎那花开，蓦然相爱<br>派小熊守护你，温暖如我</div>
                            <div class="price"><span class="buy">七夕价：<b>99.0</b></span><span class="markit">市场价:<del><b>189.0</b></del></span></div>
                            <div class="btn png"><img class="png" src="./images/go.png"></div>
                        </div>
                    </div>
                </a>
                <div class="h-bj f-right">
                    <img class="png" src="./images/h1.png" alt="">
                </div>
            </div>
            <div class="h-box">
                <a href="http://www.hhxtd.com/product-253170.htm" target="_blank" class="png">
                    <div class="goods f-right png">
                        <div class="goods-png png"><img class="png" src="./goods/a2.png" alt=""></div>
                        <div class="content">
                            <div class="t">--红酒【南澳原装进口】</div>
                            <div class="info">美酒情醉浓<br>甜美气泡，浪漫时分</div>
                            <div class="price"><span class="buy">七夕价：<b>68.0</b></span><span class="markit">市场价:<del><b>258.0</b></del></span></div>
                            <div class="btn png"><img class="png" src="./images/go.png"></div>
                        </div>
                    </div>
                </a>
                <div class="h-bj f-left">
                    <img class="png" src="./images/h2.png" alt="">
                </div>
            </div>
            <div class="h-box">
                <a href="http://www.hhxtd.com/product-253449.htm" target="_blank" class="png">
                    <div class="goods f-left png">
                        <div class="goods-png png"><img class="png" src="./goods/a3.png" alt=""></div>
                        <div class="content">
                            <div class="t">--扫地机器人【美国艾罗伯特】</div>
                            <div class="info">人气热款，走心礼物</div>
                            <div class="price"><span class="buy">七夕价：<b>4980.0</b></span><span class="markit">市场价:<del><b>6999.0</b></del></span></div>
                            <div class="btn png"><img class="png" src="./images/go.png"></div>
                        </div>
                    </div>
                </a>
                <div class="h-bj f-right">
                    <img class="png" src="./images/h3.png" alt="">
                </div>
            </div>
            <div class="h-box">
                <a href="http://www.hhxtd.com/product-254047.htm" target="_blank" class="png">
                    <div class="goods f-right png">
                        <div class="goods-png png"><img class="png" src="./goods/a4.png" alt=""></div>
                        <div class="content">
                            <div class="t">--电动牙刷【飞利浦】</div>
                            <div class="info">极致生活，七夕最亲密的礼物</div>
                            <div class="price"><span class="buy">七夕价：<b>351.0</b></span><span class="markit">市场价:<del><b>420.0</b></del></span></div>
                            <div class="btn png"><img class="png" src="./images/go.png"></div>
                        </div>
                    </div>
                </a>
                <div class="h-bj f-left">
                    <img class="png" src="./images/h4.png" alt="">
                </div>
            </div>
            <div class="h-box">
                <a href="http://www.hhxtd.com/product-254046.htm" target="_blank" class="png">
                    <div class="goods f-left png">
                        <div class="goods-png png"><img class="png" src="./goods/a5.png" alt=""></div>
                        <div class="content">
                            <div class="t">--剃须刀【飞利浦】</div>
                            <div class="info">随型所欲，七夕特惠</div>
                            <div class="price"><span class="buy">七夕价：<b>236.0</b></span><span class="markit">市场价:<del><b>699.0</b></del></span></div>
                            <div class="btn png"><img class="png" src="./images/go.png"></div>
                        </div>
                    </div>
                </a>
                <div class="h-bj f-right">
                    <img class="png" src="./images/h5.png" alt="">
                </div>
            </div>
            <div class="h-box">
                <a href="http://www.hhxtd.com/product-254081.htm" target="_blank" class="png">
                    <div class="goods f-right png">
                        <div class="goods-png png"><img class="png" src="./goods/a6.png" alt=""></div>
                        <div class="content">
                            <div class="t">--女款项链【砗磲】</div>
                            <div class="info">爱不等待，遇见更美的你</div>
                            <div class="price"><span class="buy">七夕价：<b>139.0</b></span><span class="markit">市场价:<del><b>399.0</b></del></span></div>
                            <div class="btn png"><img class="png" src="./images/go.png"></div>
                        </div>
                    </div>
                </a>
                <div class="h-bj f-left">
                    <img class="png" src="./images/h6.png" alt="">
                </div>
            </div>
            <div class="h-box">
                <a href="http://www.hhxtd.com/product-254082.htm" target="_blank" class="png">
                    <div class="goods f-left png">
                        <div class="goods-png png"><img class="png" src="./goods/a7.png" alt=""></div>
                        <div class="content">
                            <div class="t">--黑耀石手串【砗磲】</div>
                            <div class="info">七夕甜蜜节，让首饰说故事</div>
                            <div class="price"><span class="buy">七夕价：<b>88.0</b></span><span class="markit">市场价:<del><b>288.0</b></del></span></div>
                            <div class="btn png"><img class="png" src="./images/go.png"></div>
                        </div>
                    </div>
                </a>
                <div class="h-bj f-right">
                    <img class="png" src="./images/h7.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--约惠七夕-->
    <div id="f3">
        <div class="warp three-box">
            <div class="title"><span></span>约惠七夕</div>
            <div class="sub-title">特惠商品</div>
            <div class="goods-box">
                <ul class="goods">
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-252189.htm" target="_blank">
                            <div class="img"><img src="./goods/b1.jpg"></div>
                            <div class="tit">洁丽雅纯棉全棉吸水洗脸儿童巾四条装</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>80.0</del></li>
                                <li class="j-buy">活动价: <b>27.5</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253941.htm" target="_blank">
                            <div class="img"><img src="./goods/b2.jpg"></div>
                            <div class="tit">加粗浸塑衣架干湿两用晾衣服架10支装</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>15.0</del></li>
                                <li class="j-buy">活动价: <b>7.9</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253252.htm" target="_blank">
                            <div class="img"><img src="./goods/b3.jpg"></div>
                            <div class="tit">今晨 成人软毛细丝毛牙刷10支B8005*5</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>64.0</del></li>
                                <li class="j-buy">活动价: <b>29.9</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253435.htm" target="_blank">
                            <div class="img"><img src="./goods/b4.jpg"></div>
                            <div class="tit">迈登新款防水透气双肩背包书包</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>218.0</del></li>
                                <li class="j-buy">活动价: <b>79.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253874.htm" target="_blank">
                            <div class="img"><img src="./goods/b5.jpg"></div>
                            <div class="tit">心相印 抽纸2层200抽面巾纸*3包 DT200</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>20.0</del></li>
                                <li class="j-buy">活动价: <b>13.9</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253383.htm" target="_blank">
                            <div class="img"><img src="./goods/b6.jpg"></div>
                            <div class="tit">贵州特产纯正野生 VC王刺梨干138g</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>30.0</del></li>
                                <li class="j-buy">活动价: <b>12.5</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253260.htm" target="_blank">
                            <div class="img"><img src="./goods/b7.jpg"></div>
                            <div class="tit">越南进口 sabava沙巴哇菠萝蜜果干 100g</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>20.0</del></li>
                                <li class="j-buy">活动价: <b>9.9</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253628.htm" target="_blank">
                            <div class="img"><img src="./goods/b8.jpg"></div>
                            <div class="tit">黔五福 有点意思 蔬菜猪肉干混合装 500g</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>75.0</del></li>
                                <li class="j-buy">活动价: <b>55.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253878.htm" target="_blank">
                            <div class="img"><img src="./goods/b9.jpg"></div>
                            <div class="tit">开阳休闲零食馋解香麻辣土豆丝 140g</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>8.0</del></li>
                                <li class="j-buy">活动价: <b>4.5</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-252814.htm" target="_blank">
                            <div class="img"><img src="./goods/b10.jpg"></div>
                            <div class="tit">剑江 都匀毛尖 特级 100g</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>216.0</del></li>
                                <li class="j-buy">活动价: <b>89.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-252064.htm" target="_blank">
                            <div class="img"><img src="./goods/b11.jpg"></div>
                            <div class="tit">天朝上品商界53度 柔和酱香型白酒 500ml</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>698.0</del></li>
                                <li class="j-buy">活动价: <b>199.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253473.htm" target="_blank">
                            <div class="img"><img src="./goods/b12.jpg"></div>
                            <div class="tit">贵州凯里特产酸汤鱼火锅底料160g*6包</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>79.0</del></li>
                                <li class="j-buy">活动价: <b>39.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sub-title">买一赠一</div>
            <div class="goods-box">
                <ul class="goods">
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253825.htm" target="_blank">
                            <div class="img"><img src="./goods/c1.jpg"></div>
                            <div class="tit">凤岗绿宝石春茶绿茶礼盒装120g【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>210.0</del></li>
                                <li class="j-buy">活动价: <b>110.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253128.htm" target="_blank">
                            <div class="img"><img src="./goods/c2.jpg"></div>
                            <div class="tit">贵州特产牛头牌牛肉干麻辣味 102g【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>45.0</del></li>
                                <li class="j-buy">活动价: <b>36.8</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253881.htm" target="_blank">
                            <div class="img"><img src="./goods/c3.jpg"></div>
                            <div class="tit">黔合玉液8年精品【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>235.0</del></li>
                                <li class="j-buy">活动价: <b>139.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253763.htm" target="_blank">
                            <div class="img"><img src="./goods/c4.jpg"></div>
                            <div class="tit">功夫鸭脖子香辣小包装48g【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>6.0</del></li>
                                <li class="j-buy">活动价: <b>5.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253764.htm" target="_blank">
                            <div class="img"><img src="./goods/c5.jpg"></div>
                            <div class="tit">功夫香辣鸡腿休闲零食50g【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>6.0</del></li>
                                <li class="j-buy">活动价: <b>5.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253387.htm" target="_blank">
                            <div class="img"><img src="./goods/c6.jpg"></div>
                            <div class="tit">休闲盒装果派维C王刺梨糕238g【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>30.0</del></li>
                                <li class="j-buy">活动价: <b>23.9</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-253243.htm" target="_blank">
                            <div class="img"><img src="./goods/c7.jpg"></div>
                            <div class="tit">越南进口中原g7咖啡粉6条*18g【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>28.0</del></li>
                                <li class="j-buy">活动价: <b>25.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                    <li class="g">
                        <a href="http://www.hhxtd.com/product-500009.htm" target="_blank">
                            <div class="img"><img src="./goods/c8.jpg"></div>
                            <div class="tit">可口可乐碳酸汽水饮料单瓶500ml【x2】</div>
                            <ul class="j">
                                <li class="j-markit">市场价：<del>3.5</del></li>
                                <li class="j-buy">活动价: <b>3.0</b></li>
                            </ul>
                            <div class="btn-go png"></div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--活动规则-->
    <div id="f4">
        <div class="warp">
            <div class="four-box">
                <div class="title"><span></span>真土豪赢大奖 活动规则：</div>
                <div class="content">
                    <p>从8月15日----8月20日23：59：59，活动截止后，商城抽取用户单次订单购买最高金额依次评选出前三名，（一等奖奖品：美的电磁炉，二等奖奖品：礼品杯（巴洛克之美套装），三等奖奖品：碗筷两件套带碗（8件套）。）<br>领奖地址：贵阳市观山湖区观山东路338号 红华新天地信息部，外地用户可付15元邮费，由公司把奖励快递至要求地址。
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--版权-->
    <div class="copyright">
        <div class="warp">红华新天地网上商城 客服热线：4008877777 版权所有 © 网站法律所有权归红华新天地所有<span class="qr"><img src="./images/qr.jpg" alt=""></span></div>
    </div>
</body>

</html>

三、精彩专栏

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

旧城空忆

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
情人节程序员用HTML网页表白【粉色烂漫的七夕情人节专题页面】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

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

扫一扫