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实现情人节表白程序的主要内容,如果未能解决你的问题,请参考以下文章