情人节程序员用HTML网页表白【守护爱情(泡泡游戏)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

原创

IT司马青衫

发布于 2022-08-21 09:38:49

5190

发布于 2022-08-21 09:38:49

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

@TOC

一、网页介绍

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

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

一、网页效果

二、代码展示

1.HTML代码

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

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>泡泡</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/all.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>

<body>
    <div class="con-index">
        <img alt="" src="images/indexshow.jpg" width="100%">
        <a class="startbtn" href="chooselove.html"></a>
    </div>
</body>

</html>

2.CSS代码

/*
* main.css test
*/

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

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    /* vertical-align: baseline; */
    -webkit-font-smoothing: antialiased;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    background: #eeeeee;
    margin: 0;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* add */

body {
    font-size: 12px;
    margin: 0;
    padding: 0;
    font-family: Arial, 宋体;
    -webkit-font-smoothing: antialiased;
    background: #eeeeee;
}

img {
    border: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

select,
input {
    vertical-align: middle
}

a {
    text-decoration: none;
    color: #333;
    /*-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;*/
}

/*a:hover{color:#272727;}*/

img,
input,
label {
    vertical-align: middle;
}

input,
select {
    outline: none
}

/**public css**/

.clear {
    display: block !important;
    clear: both !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}