<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>辞职信</title>
<style>
html, body {
margin: 0;
padding: 0;
background: #f2f1f6;
}
.container {
position: relative;
width: 1000px;
height: 600px;
background: #f2f1f6;
}
.container h1 {
text-align: center;
}
.container img {
vertical-align: -70px;
}
.bd {
padding-top: 150px;
padding-left: 200px;
}
.ft {
position: absolute;
width: 100%;
bottom: 20px;
padding: 0 30px;
line-height: 30px;
box-sizing: border-box;
}
.btn-group {
float: left;
}
.fr {
float: right;
}
button {
cursor: pointer;
}
.not-allow {
position: relative;
}
#p2 {
display: none;
text-align: center;
}
.red {
margin: 0;
font-size: 24px;
padding: 30px 40px;
color: red;
letter-spacing: 4px;
}
.wavy {
text-decoration: underline;
text-decoration-style: wavy;
}
.name {
padding-left: 10px;
}
.btn {
padding: 6px 12px;
}
</style>
</head>
<body>
<div class="container">
<div id="p1">
<h1>辞职信</h1>
<div class="bd">
<font size="6">尊敬的各位领导:</font> <img src="./cizhi.png" width="240"/>
</div>
<div class="ft">
<div class="btn-group">
<button class="btn allow"><font size="6">同意</font></button>
<button class="btn not-allow" id="not-allow"><font size="6">不同意</font></button>
</div>
<div class="fr">
<font size="6">辞职人: <span class="name">小海</span></font>
</div>
</div>
</div>
<div id="p2">
<h2 class="red">
<font color="#e66b6d">老</font><font color="#e66d98">板</font><font color="#e66cc6">大</font><font color="#cc6de6">人</font>, <font color="#9770e6">臣</font><font color="#6d93e6">告</font><font color="#6fcde6">退</font><font color="#72e6b6">了</font>, <font color="#72e689">这</font><font color="#99e670">一</font><font color="#cde670">退</font><font color="#e6df72">可</font><font color="#e6c073">能</font></span><font color="#e6a271">就</font><font color="#e6796f">是</font><font color="#e65454">一</font><font color="#e63333">辈</font><font color="#e62c2c">子</font><font color="#e60101">了</font>。<br/>
<font color="#e66b6d">!</font><font color="#e66d98">!</font><font color="#e66cc6">!</font><font color="#cc6de6">!</font><font color="#9770e6">敬</font><font color="#6d93e6">礼</font><font color="#6fcde6">!</font><font color="#72e6b6">!</font><font color="#72e689">!</font></font><font color="#99e670">!</font>
</h2>
<div class="ft">
<button class="btn fr exit">退出</button>
</div>
</div>
</div>
<script>
(function(){
function $(selector) {
return document.querySelector(selector);
}
var $p1 = document.getElementById('p1');
var $p2 = document.getElementById('p2');
var $container = $('.container');
var $btn = $('#not-allow');
var isBlockClose = true;
var maxX = $container.clientWidth - 1, maxY = $container.clientHeight - 1;
var originPos = $btn.getBoundingClientRect();
$('.allow').addEventListener('click', function() {
$p1.style.display = 'none';
$p2.style.display = 'block';
});
$btn.addEventListener('mouseover', function() {
this.style.left = Math.floor(Math.random() * maxX - originPos.left) + 'px';
this.style.top = Math.floor(Math.random() * maxY - originPos.top) + 'px';
//console.log(this.style.left, this.style.top);
});
$('.exit').addEventListener('click', function() {
isBlockClose = false;
window.close();
});
window.addEventListener('beforeunload', function(e) {
if (isBlockClose) {
alert("此路不通");
e.returnValue = false;
e.preventDefault();
return "此路不通";
}
});
})();
</script>
</body>
</html>
辞职信代码HTML.zip
需积分: 0 53 浏览量
更新于2020-12-06
3
收藏 29KB ZIP 举报
HTML,全称HyperText Markup Language,是用于创建网页的标准标记语言。它允许我们将文本、图像、音频、视频等多媒体元素组织成结构化的页面,并通过超链接实现页面间的跳转,从而构建出丰富的互联网内容。在“辞职信代码HTML.zip”这个压缩包中,我们看到包含了一个简单的HTML代码示例,这可能是用来展示如何用HTML来制作一封辞职信。
在HTML中,网页的基本结构由一系列的标签组成。这些标签通常以尖括号 `<` 和 `>` 包围,分为开启标签和闭合标签。例如,`<html>` 是文档的根标签,表明整个文件是一个HTML文档;`<head>` 包含了文档的元信息,如标题;`<body>` 则包含了用户在浏览器中看到的实际内容。
描述中的“简单好玩的辞职信HTML代码”,可能意味着这份HTML代码不仅包含了辞职信的内容,还可能使用了一些交互或视觉效果,使得辞职信更有趣。比如,可能使用了`<style>`标签添加内联CSS(Cascading Style Sheets)来改变字体、颜色或布局,或者使用`<script>`引入JavaScript来实现动态功能。
在HTML中,我们可以用`<h1>`到`<h6>`定义不同级别的标题,用`<p>`定义段落,用`<strong>`或`<b>`加粗文字,用`<em>`或`<i>`斜体,用`<a>`创建链接,用`<img>`插入图片,以及用`<br>`换行等等。如果这封辞职信涉及到日期,可能还会用到`<time>`标签。
此外,HTML5引入了一些新的语义化标签,如`<header>`、`<footer>`、`<article>`和`<section>`等,它们帮助提升网页的可读性和可访问性。如果这份HTML代码遵循了HTML5标准,那么辞职信的各个部分可能会被这些标签合理地包裹起来,以增强文档的结构。
在实际应用中,HTML经常与CSS和JavaScript一起使用,形成所谓的前端开发基础三剑客。CSS用于样式设计,JavaScript则负责交互逻辑。在这个辞职信的例子中,虽然没有明确提到CSS和JavaScript,但我们可以推测,为了使其“好玩”,作者可能已经用它们来增加了一些视觉或交互上的趣味性。
总结来说,这个“辞职信代码HTML.zip”提供了一个学习HTML基本结构和简单应用的实例,尤其是对于那些对网页制作感兴趣的初学者,这是一个很好的起点。通过查看和理解这段代码,可以了解HTML如何用于组织和展示文本,以及如何通过简单的技巧使静态内容变得更有趣。
![avatar](https://profile-avatar.csdnimg.cn/252d8b1f14e748a2b83398bf28000930_qq_44273429.jpg!1)
![avatar-vip](https://csdnimg.cn/release/downloadcmsfe/public/img/user-vip.1c89f3c5.png)
海拥✘
- 粉丝: 21w+
- 资源: 408
最新资源
- 基于Java语言的金蝶云苍穹消毒系统设计源码学习指南
- 基于Vue框架的dakang-pc心理咨询平台设计源码
- 基于Vue框架的ks-logistics-h5物流系统移动端H5设计源码
- 基于PHP开发的白王云平台设计源码
- Matlab Simulink下五相PMSM永磁同步电机SVPWM控制建模与仿真分析-涵盖多种电机类型及智能控制策略,Matlab Simulink下的五相PMSM永磁同步电机SVPWM控制仿真研究
- 基于模电数电与数字电路的Multisim仿真研究:数字频率计的精确测量与误差分析,基于Multisim的数字频率计:正弦波、方波及三角波精确测量,含源文件及误差说明,模电数电数字电路,数字频率计,mu
- 基于Vue的DineEase就餐小程序后端设计源码
- DL00642:使用U-Net卷积神经网络与PyTorch框架实现生物医学影像分割-以30张图像增强至100张进行高效训练,DL00642: 利用U-Net卷积神经网络在PyTorch框架下实现生物
- 基于Go语言的乐器商城后端设计源码
- 基于微信小程序框架的教研微信小程序设计源码
- 基于欧姆龙Omron PLC与MCGS触摸屏的交通灯控制系统的自控与手控双重模式研究与应用,基于Omron PLC与MCGS触摸屏的交通灯自动化与手动控制系统实现案例,No.740 基于欧姆龙Omro
- 基于React + Next.js + MUI的北京地铁图程序设计源码
- 基于DL00643-DQN算法的深度强化学习在三维在线装箱问题中的应用:角点优化与可放置点列表的动态更新机制,基于DL00643-DQN算法的深度强化学习在三维在线装箱问题中的应用:优化角点摆放策略与
- 三级倒立摆LQR控制详解:拉格朗日建模、MATLAB验证与Webots仿真实践,三级倒立摆LQR控制 - 基于Windows Webots的C语言仿真解析与实战教学:拉格朗日建模与MATLAB符号验证
- 基于C++语言的几何光学与离散数学融合案例设计源码研究
- 基于组态王组态的3x3七车位升降横移立体库控制系统的设计与实现,基于组态王组态的3x3七车位升降横移立体库控制系统的设计与实现,No.721 基于组态王组态的3x3 7车位升降横移立体库控制系统设计七