轻松拿下暗恋已久的学姐 (html+css+js制作520表白网页)

最新推荐文章于 2023-08-27 15:42:48 发布

IT黑马程序员

最新推荐文章于 2023-08-27 15:42:48 发布

阅读量64

点赞数

分类专栏：学生网页设计作业文章标签： javascript html css 开发语言前端

本文链接：https://blog.csdn.net/qq_38513433/article/details/127385667

版权

学生网页设计作业专栏收录该内容

1791 篇文章 115 订阅

订阅专栏

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

74-做我女朋友

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>有句话想对你说太久了</title>
  <meta name="keywords" content="抖音表白,抖音我爱你,抖音上输入我爱你">
  <meta name="description" content="我喜欢你">
  <link rel="alternate icon" type="image/ico" href="images/favicon.ico">
  <link rel="apple-touch-icon-precomposed" href="images/app-icon72x72@2x.png">
  <link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="http://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="css/plugins.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/oneui.css">

  <script src="http://lib.baomitu.com/modernizr/2.8.3/modernizr.min.js"></script>
  <link rel="stylesheet" href="css/ahao.css">
  <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
   <script src="js/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//lib.baomitu.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//lib.baomitu.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 <img  style="background: linear-gradient(to bottom,	#D1E9E9,#FF9797);"  class="full-bg full-bg-bottom" ondragstart="return false;" oncontextmenu="return false;">
</head>
    <body>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-4 center-block" style="float: none;">
  <br /><br />
	  <div class="modal-body">
	  	  <div class="list-group-item reed"><br /><br /><center><img src="images/1.png"><br /><br />提交<font color=green>“我喜欢你”</font>三字就能看到我想对您说的话了</center><br /></div>
<div class="list-group-item reed">
        <input type="text" name="love" id="love" value=""  placeholder="没错，就是在这里输入“我喜欢你”" class="form-control" required/><br />
        <input type="submit" id="sub" class="btn btn-primary btn-block" value="立即提交"><br />
<div class="btn btn-danger  btn-block" id="bx" >不想提交</div><br />
</div>
</div>
</body>
      <script type="text/javascript">
       var i=1;
$(function(){		
     $("#bx").click(function(){
            switch(i){
                case 1:
                    alert("不想提交？不存在的！");
                    break;
                case 2:
                    alert("都说了不存在的！");
                    break;
                case 3:
                    alert("这么执着的吗？我喜欢，嘻嘻！");
                    break;
				case 4:
                    alert("这里没用的，听话，快去提交！");
                    break;
                default:
                    alert("求求你快提交一下吧TAT");
            }
            i++;
        })
         })
    </script>
      <script>
        $('#sub').on('click', (function() {
    var val = $('#love').val()
    if(val == '我喜欢你') {
        alert('输入正确，准备好了吗？')      
				 window.setTimeout("window.location.href='love.html'", 2000);
     } else {
        alert('乱输入可不行的哟~')
    }
}))
    </script>
<script type="text/javascript">
$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
alert("别这么着急离开,你试试输入看看,万一有惊喜呢！");//根据自己的需求实现自己的功能
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
});</script>
</html>

🏠CSS样式代码


#cover{position: fixed;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    top: 0;
    left: 0;    background-position: center 0%;
    height: 100%;    background-image: url(assets/img/bj.png);background-attachment: fixed;
}
img.logo{width:14px;height:14px;margin:0 5px 0 3px;}
.onclick{cursor: pointer;touch-action: manipulation;}
.giftlist{overflow:hidden;width:90%;margin:0 auto}
.giftlist ul{height:270px;overflow:hidden;padding:0}
.giftlist li{width:100%;line-height:35px;padding:0 10px;overflow:hidden;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.giftlist li strong{margin:0 5px 0 0;font-weight:400;color:#1977d8}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

IT黑马程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
轻松拿下暗恋已久的学姐 (html+css+js制作520表白网页)

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面：可使用任意HTML编辑软件（如：等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现74-做我女朋友🏠CSS样式代码五、🎁更多源码1.如果我的博客对你有帮助一
复制链接

扫一扫