JQ实现情人节表白程序

Posted Foryourfuture

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ实现情人节表白程序相关的知识,希望对你有一定的参考价值。

 JQ实现情人节表白页面

  效果图:

 表白利页,你值得拥有哦!  

代码如下,复制即可使用:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQ实现情人节表白程序</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
    margin:0;
    padding:0px;
    background-color:#2C3437;
}
.content {
    display:inline-block;
    width:350px;
    height:400px;
    padding-top:70px;
    margin-right:5px;
    margin-left:5px;
}
div>div>div {
    display:block;
    height:20px;
}
div>div>div>div {
    width:16px;
    height:16px;
    background-color:#ff00d8;
    display:inline-block;
    float:left;
    margin:2px;
}
div>div.content1>div>div.fl {
    background-color:#ff0033;
}
div>div.content2>div>div.fl {
    background-color:#006699;
}
div>div.content3>div>div.fl {
    background-color:#ffff33;
}
</style>
</head>
<body>
<div style="width: 1100px; margin: auto;">
    <p style="font-size: 40px; color: #f75fe0;text-align: center;">
        <span></span><span></span>
    </p>
    <p style="font-size: 22px; color: #f75fe0;text-align: center;">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
    <div class="content content1">
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <d

以上是关于JQ实现情人节表白程序的主要内容,如果未能解决你的问题,请参考以下文章

HTML+CSS+JS制作3D动态相册表白网站代码程序员专属情人节表白网站

我是如何俘虏学姐芳心~❤给她放一场浪漫的烟花3D相册❤~(520情人节/七夕情人节/生日快乐/烟花告白/程序员表白专属)

基于HTML实现浪漫情人节表白代码(附源代码)

基于HTML实现浪漫情人节表白代码(附源代码)

HTML+CSS+JS520告白表白模板在线制作(七夕情人节表白网页代码)

送你情人节(劫)专属Python全套代码|情人节表白代码