662 lines
25 KiB
HTML
662 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>HTML div元素全面指南</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
color: #333;
|
||
line-height: 1.6;
|
||
padding: 20px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 3;
|
||
min-width: 300px;
|
||
}
|
||
|
||
.sidebar {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
}
|
||
|
||
.card {
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.card-header {
|
||
color: #2c3e50;
|
||
border-bottom: 2px solid #3498db;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
color: #2980b9;
|
||
font-size: 2.5rem;
|
||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
h2 {
|
||
color: #3498db;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
h3 {
|
||
color: #2980b9;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.code-example {
|
||
background: #2c3e50;
|
||
color: #ecf0f1;
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
font-family: 'Courier New', monospace;
|
||
margin: 15px 0;
|
||
overflow-x: auto;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.highlight {
|
||
color: #e74c3c;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.demo-box {
|
||
border: 2px dashed #3498db;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
background-color: #f8f9fa;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.demo-div {
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.demo-container {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.demo-item {
|
||
background: #3498db;
|
||
color: white;
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
flex-grow: 1;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||
gap: 10px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.grid-item {
|
||
background: #9b59b6;
|
||
color: white;
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.flex-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.flex-item {
|
||
background: #2ecc71;
|
||
color: white;
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
width: 30%;
|
||
text-align: center;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.table th, .table td {
|
||
border: 1px solid #ddd;
|
||
padding: 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
.table th {
|
||
background-color: #3498db;
|
||
color: white;
|
||
}
|
||
|
||
.table tr:nth-child(even) {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.nav-menu {
|
||
display: flex;
|
||
background: #2c3e50;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.nav-item {
|
||
padding: 12px 20px;
|
||
color: white;
|
||
text-decoration: none;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
background: #3498db;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
background: #3498db;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
margin: 5px;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: #2980b9;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
background: #e74c3c;
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 10px;
|
||
font-size: 0.8rem;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.alert {
|
||
padding: 15px;
|
||
border-radius: 5px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.alert-success {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.alert-warning {
|
||
background-color: #fff3cd;
|
||
color: #856404;
|
||
border: 1px solid #ffeaa7;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 10px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #ddd;
|
||
color: #7f8c8d;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
background: #ecf0f1;
|
||
color: #2c3e50;
|
||
padding: 2px 8px;
|
||
border-radius: 3px;
|
||
font-family: monospace;
|
||
font-size: 0.9rem;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-item {
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<h1><i class="fas fa-cube"></i> HTML <span class="tag"><div></span> 元素全面指南</h1>
|
||
<p><span class="tag"><div></span> 是 HTML 中最常用、最通用的容器元素。它是 "division"（分割）的缩写，用于将文档分割成独立的部分，没有特定的语义含义，主要用于布局和样式化。</p>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="main-content">
|
||
<!-- 基础功能 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-bars"></i>-->
|
||
<h2>1. 基础功能：作为通用容器</h2>
|
||
</div>
|
||
<p><span class="tag"><div></span> 是一个块级元素，用于将 HTML 文档划分为独立的区块，便于应用样式和布局。</p>
|
||
|
||
<div class="code-example">
|
||
<div id="header">这是页头</div><br>
|
||
<div id="main-content"><br>
|
||
<div class="article">文章1</div><br>
|
||
<div class="article">文章2</div><br>
|
||
</div><br>
|
||
<div id="footer">这是页脚</div>
|
||
</div>
|
||
|
||
<div class="demo-box">
|
||
<h3>示例：div作为容器</h3>
|
||
<div style="background-color: #e8f4f8; padding: 15px; margin-bottom: 10px; border-left: 4px solid #3498db;">
|
||
这是一个带有样式的div容器
|
||
</div>
|
||
<div style="background-color: #f9f3e9; padding: 15px; border-left: 4px solid #e67e22;">
|
||
这是另一个带有不同样式的div容器
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 布局功能 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-th-large"></i>-->
|
||
<h2>2. 布局功能</h2>
|
||
</div>
|
||
<p>使用 <span class="tag"><div></span> 创建页面布局，结合 CSS 实现各种布局技术。</p>
|
||
|
||
<h3>2.1 传统浮动布局</h3>
|
||
<div class="demo-box">
|
||
<div style="overflow: hidden;">
|
||
<div style="float: left; width: 30%; background: #3498db; color: white; padding: 15px; margin-right: 10px;">
|
||
左侧边栏 (float: left)
|
||
</div>
|
||
<div style="float: right; width: 30%; background: #9b59b6; color: white; padding: 15px;">
|
||
右侧边栏 (float: right)
|
||
</div>
|
||
<div style="background: #2ecc71; color: white; padding: 15px;">
|
||
主要内容区域 (自适应宽度)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>2.2 Flexbox 布局</h3>
|
||
<div class="flex-container demo-box">
|
||
<div class="flex-item">Flex 项目 1</div>
|
||
<div class="flex-item">Flex 项目 2</div>
|
||
<div class="flex-item">Flex 项目 3</div>
|
||
</div>
|
||
|
||
<h3>2.3 CSS Grid 布局</h3>
|
||
<div class="demo-grid demo-box">
|
||
<div class="grid-item">网格项目 1</div>
|
||
<div class="grid-item">网格项目 2</div>
|
||
<div class="grid-item">网格项目 3</div>
|
||
<div class="grid-item">网格项目 4</div>
|
||
<div class="grid-item">网格项目 5</div>
|
||
<div class="grid-item">网格项目 6</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分组与样式化 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-paint-brush"></i>-->
|
||
<h2>3. 分组与样式化</h2>
|
||
</div>
|
||
<p>使用 <span class="tag"><div></span> 对相关元素进行分组，以便统一应用样式。</p>
|
||
|
||
<div class="demo-box">
|
||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; margin-bottom: 15px;">
|
||
<h3 style="color: white; margin-top: 0;">带背景渐变的分组</h3>
|
||
<p>这个div包含标题和段落，并应用了渐变背景。</p>
|
||
<button class="btn" style="background: rgba(255,255,255,0.2); border: 1px solid white;">了解更多</button>
|
||
</div>
|
||
|
||
<div style="border: 2px solid #f39c12; padding: 15px; border-radius: 5px; background-color: #fff9e6;">
|
||
<h3 style="color: #f39c12;">带边框的分组</h3>
|
||
<p>这个div有自定义边框和背景色，用于突出显示内容。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 交互功能 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-mouse-pointer"></i>-->
|
||
<h2>4. 交互功能</h2>
|
||
</div>
|
||
<p>通过 JavaScript 为 <span class="tag"><div></span> 添加交互功能。</p>
|
||
|
||
<div class="demo-box">
|
||
<h3>4.1 点击事件</h3>
|
||
<div id="clickable-div" style="background: #3498db; color: white; padding: 15px; border-radius: 5px; cursor: pointer; text-align: center; margin-bottom: 10px;">
|
||
点击这个div，我会改变颜色和文本
|
||
</div>
|
||
|
||
<h3>4.2 悬停效果</h3>
|
||
<div id="hover-div" style="background: #2ecc71; color: white; padding: 15px; border-radius: 5px; text-align: center; transition: all 0.3s;">
|
||
鼠标悬停在我上面试试
|
||
</div>
|
||
|
||
<h3>4.3 显示/隐藏内容</h3>
|
||
<button id="toggle-btn" class="btn">显示/隐藏内容</button>
|
||
<div id="toggle-content" style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin-top: 10px; display: none;">
|
||
这个内容可以通过按钮显示或隐藏。这是通过切换div的display属性实现的。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模拟其他元素 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-shapes"></i>-->
|
||
<h2>5. 模拟其他元素</h2>
|
||
</div>
|
||
<p><span class="tag"><div></span> 可以结合CSS模拟其他元素的功能。</p>
|
||
|
||
<div class="demo-box">
|
||
<h3>5.1 模拟按钮</h3>
|
||
<div class="btn" style="display: inline-block;">看起来像按钮的div</div>
|
||
|
||
<h3>5.2 模拟卡片</h3>
|
||
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 300px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
|
||
<div style="height: 150px; background: linear-gradient(to right, #3498db, #2c3e50);"></div>
|
||
<div style="padding: 15px;">
|
||
<h4 style="margin-top: 0;">卡片标题</h4>
|
||
<p>这是一个使用div创建的卡片组件，具有图片区域和内容区域。</p>
|
||
<div class="btn" style="padding: 8px 16px; font-size: 0.9rem;">查看详情</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>5.3 模拟表格</h3>
|
||
<div class="table">
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); background: #3498db; color: white;">
|
||
<div style="padding: 10px; font-weight: bold;">姓名</div>
|
||
<div style="padding: 10px; font-weight: bold;">年龄</div>
|
||
<div style="padding: 10px; font-weight: bold;">城市</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
|
||
<div style="padding: 10px; border-bottom: 1px solid #ddd;">张三</div>
|
||
<div style="padding: 10px; border-bottom: 1px solid #ddd;">28</div>
|
||
<div style="padding: 10px; border-bottom: 1px solid #ddd;">北京</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
|
||
<div style="padding: 10px;">李四</div>
|
||
<div style="padding: 10px;">34</div>
|
||
<div style="padding: 10px;">上海</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar">
|
||
<!-- 属性总结 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-list-alt"></i>-->
|
||
<h2>div 常用属性</h2>
|
||
</div>
|
||
<p><span class="tag"><div></span> 支持所有HTML全局属性：</p>
|
||
<ul style="padding-left: 20px; margin-bottom: 15px;">
|
||
<li><span class="highlight">id</span> - 唯一标识符</li>
|
||
<li><span class="highlight">class</span> - 类名，用于CSS和JS选择</li>
|
||
<li><span class="highlight">style</span> - 内联样式</li>
|
||
<li><span class="highlight">title</span> - 提示文本</li>
|
||
<li><span class="highlight">data-*</span> - 自定义数据属性</li>
|
||
</ul>
|
||
<p>以及所有HTML事件属性：</p>
|
||
<ul style="padding-left: 20px;">
|
||
<li><span class="highlight">onclick</span> - 点击事件</li>
|
||
<li><span class="highlight">onmouseover</span> - 鼠标悬停</li>
|
||
<li><span class="highlight">onload</span> - 加载完成</li>
|
||
<li>等等...</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 最佳实践 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-check-circle"></i>-->
|
||
<h2>使用最佳实践</h2>
|
||
</div>
|
||
<div class="alert alert-success">
|
||
<p><i class="fas fa-lightbulb"></i> <strong>使用语义化元素替代</strong>：当有更合适的语义化元素时（如<header>、<section>、<article>等），应优先使用它们。</p>
|
||
</div>
|
||
<div class="alert alert-warning">
|
||
<p><i class="fas fa-exclamation-triangle"></i> <strong>避免过度嵌套</strong>：减少不必要的div嵌套，保持HTML结构简洁。</p>
|
||
</div>
|
||
<div class="alert alert-success">
|
||
<p><i class="fas fa-lightbulb"></i> <strong>合理使用类名</strong>：使用有意义的类名，遵循命名规范（如BEM）。</p>
|
||
</div>
|
||
<div class="alert alert-warning">
|
||
<p><i class="fas fa-exclamation-triangle"></i> <strong>避免仅用于样式</strong>：尽量使用CSS而不是额外的div来实现纯样式效果。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 示例组件 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-code"></i>-->
|
||
<h2>div 构建的组件</h2>
|
||
</div>
|
||
|
||
<h3>导航菜单</h3>
|
||
<div class="nav-menu">
|
||
<a href="#" class="nav-item">首页</a>
|
||
<a href="#" class="nav-item">产品</a>
|
||
<a href="#" class="nav-item">服务</a>
|
||
<a href="#" class="nav-item">关于我们</a>
|
||
<a href="#" class="nav-item">联系</a>
|
||
</div>
|
||
|
||
<h3>消息提示</h3>
|
||
<div class="alert alert-success">
|
||
<strong>成功！</strong> 操作已成功完成。
|
||
</div>
|
||
<div class="alert alert-warning">
|
||
<strong>警告！</strong> 请检查您的输入。
|
||
</div>
|
||
|
||
<h3>标签/徽章</h3>
|
||
<div style="margin: 10px 0;">
|
||
<span>通知 <span class="badge">5</span></span>
|
||
<span style="margin-left: 15px;">消息 <span class="badge">12</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态框 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<!-- <i class="fas fa-window-maximize"></i>-->
|
||
<h2>div 模态框示例</h2>
|
||
</div>
|
||
<p>使用div创建的模态对话框</p>
|
||
<button id="open-modal" class="btn" style="width: 100%;">打开模态框</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态框结构 -->
|
||
<div id="modal-overlay" class="modal-overlay">
|
||
<div class="modal">
|
||
<h2>这是一个模态框</h2>
|
||
<p>这个模态框完全使用div元素创建，通过CSS定位和JavaScript控制显示/隐藏。</p>
|
||
<p>模态框是网页中常见的UI组件，通常用于显示重要信息或收集用户输入。</p>
|
||
<div style="text-align: right; margin-top: 20px;">
|
||
<button id="close-modal" class="btn">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>© 2023 HTML div元素全面指南 | 使用单个HTML文件演示div元素的所有主要功能</p>
|
||
<p>div是一个通用容器，没有特定语义，但却是现代网页布局的基石。</p>
|
||
</div>
|
||
|
||
<script>
|
||
// 交互演示代码
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 1. 点击div改变颜色
|
||
const clickableDiv = document.getElementById('clickable-div');
|
||
let colorChanged = false;
|
||
|
||
clickableDiv.addEventListener('click', function() {
|
||
if (!colorChanged) {
|
||
this.style.background = '#e74c3c';
|
||
this.innerHTML = '你点击了我！现在我是红色的';
|
||
colorChanged = true;
|
||
} else {
|
||
this.style.background = '#3498db';
|
||
this.innerHTML = '点击这个div，我会改变颜色和文本';
|
||
colorChanged = false;
|
||
}
|
||
});
|
||
|
||
// 2. 悬停div效果
|
||
const hoverDiv = document.getElementById('hover-div');
|
||
|
||
hoverDiv.addEventListener('mouseover', function() {
|
||
this.style.background = '#27ae60';
|
||
this.style.transform = 'scale(1.05)';
|
||
this.innerHTML = '鼠标悬停中...';
|
||
});
|
||
|
||
hoverDiv.addEventListener('mouseout', function() {
|
||
this.style.background = '#2ecc71';
|
||
this.style.transform = 'scale(1)';
|
||
this.innerHTML = '鼠标悬停在我上面试试';
|
||
});
|
||
|
||
// 3. 显示/隐藏内容
|
||
const toggleBtn = document.getElementById('toggle-btn');
|
||
const toggleContent = document.getElementById('toggle-content');
|
||
let isVisible = false;
|
||
|
||
toggleBtn.addEventListener('click', function() {
|
||
if (!isVisible) {
|
||
toggleContent.style.display = 'block';
|
||
isVisible = true;
|
||
} else {
|
||
toggleContent.style.display = 'none';
|
||
isVisible = false;
|
||
}
|
||
});
|
||
|
||
// 4. 模态框控制
|
||
const openModalBtn = document.getElementById('open-modal');
|
||
const closeModalBtn = document.getElementById('close-modal');
|
||
const modalOverlay = document.getElementById('modal-overlay');
|
||
|
||
openModalBtn.addEventListener('click', function() {
|
||
modalOverlay.style.display = 'flex';
|
||
});
|
||
|
||
closeModalBtn.addEventListener('click', function() {
|
||
modalOverlay.style.display = 'none';
|
||
});
|
||
|
||
// 点击模态框外部关闭
|
||
modalOverlay.addEventListener('click', function(e) {
|
||
if (e.target === modalOverlay) {
|
||
modalOverlay.style.display = 'none';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |