前端文档展示页面开发，支持侧边栏收缩，内容样式编辑
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开发简易的文档《\(^o^)/~》</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />
<!-- 引入图标 css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<h3>不同大数据技术介绍</h3>
<input type="text" placeholder="搜索">
<h4>技术分类</h4>
<ul>
<li><span class="toggle-button">1. 分布式存储</span>
<ul class="submenu">
<li><a href="#" class="active">1.1 HDFS</a></li>
<li><a href="#">1.2 Apache HBase</a></li>
<li><a href="#">1.3 Amazon S3</a></li>
</ul>
</li>
<li><span class="toggle-button">2. 数据处理框架</span>
<ul class="submenu submenu-hidden">
<li><span class="toggle-button">2.1 批处理</span>
<ul class="submenu submenu-hidden">
<li><a href="#">2.1.1 Apache Spark</a></li>
<li><a href="#">2.1.2 Apache Flink</a></li>
</ul>
</li>
<li><span class="toggle-button">2.2 流处理</span>
<ul class="submenu submenu-hidden">
<li><a href="#">2.2.1 Apache Kafka</a></li>
<li><a href="#">2.2.2 Apache Storm</a></li>
</ul>
</li>
<li><span class="toggle-button">2.3 图计算</span>
<ul class="submenu submenu-hidden">
<li><a href="#">2.3.1 Apache Giraph</a></li>
<li><a href="#">2.3.2 Apache Flink Gelly</a></li>
</ul>
</li>
</ul>
</li>
<li><span class="toggle-button">3. 数据处理工具</span>
<ul class="submenu submenu-hidden">
<li><a href="#">3.1 Apache Hive</a></li>
<li><a href="#">3.2 Apache Pig</a></li>
<li><a href="#">3.3 Apache Sqoop</a></li>
</ul>
</li>
<li><span class="toggle-button">4. 数据库</span>
<ul class="submenu submenu-hidden">
<li><a href="#">4.1 Apache Cassandra</a></li>
<li><a href="#">4.2 MongoDB</a></li>
<li><a href="#">4.3 Amazon Redshift</a></li>
</ul>
</li>
<li><span class="toggle-button">5. 并行技术</span>
<ul class="submenu submenu-hidden">
<li><a href="#">5.1 MapReduce</a></li>
<li><a href="#">5.2 Apache Tez</a></li>
<li><a href="#">5.3 MPI (Message Passing Interface)</a></li>
</ul>
</li>
<li><span class="toggle-button">6. 数据可视化</span>
<ul class="submenu submenu-hidden">
<li><a href="#">6.1 Apache Superset</a></li>
<li><a href="#">6.2 Tableau</a></li>
<li><a href="#">6.3 Power BI</a></li>
</ul>
</li>
</ul>
</div>
<div class="content">
<h2>这个是h2标题</h2>
<h3>这个是h3内容</h3>
<h4>对于侧边栏，我现在是展开状态，如果设置class为submenu submenu-hidden就是隐藏状态</h4>
<h4>如果设置《a》标签为active，就会显示你当前是处于哪个位置</h4>
<div class="api-info">
<span class="method">POST</span>
<span class="path">/api/v1/user/admin/new-api-token</span>
<button class="run-button">测试</button>
<button class="run-button">Run in idea</button>
</div>
<div class="description">
<h2 class="center-align">居中对齐</h2>
<p class="center-align">这是居中对齐的文本。</p>
<h2 class="left-align">左对齐</h2>
<p class="left-align">这是左对齐的文本。</p>
<h2 class="right-align">右对齐</h2>
<p class="right-align">这是右对齐的文本。</p>
<p>内容标签《p》</p>
</div>
<div class="description">
<h3>1.1 项目背景</h3>
<p>在当前大数据时代，数据已成为一种重要的资源。通过对大量数据的分析和处理，可以挖掘出有价值的信息，从而为企业和社会提供决策支持。Spark作为一种高效的大数据处理工具，具有快速、易用和扩展性强等特点，广泛应用于各类大数据分析场景。本项目旨在利用Spark对房地产数据进行分析，探索其在实际应用中的潜力和效果。
</p>
<div class="media custom-size right-align">
<img src="path/to/your/image.jpg" alt="项目背景图片" onerror="this.onerror=null;this.src='https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/images/md_picture/bigdata/404.png?imageSlim';">
<div class="image-description right-align">
图片右边对齐
</div>
</div>
<div class="media custom-size left-align">
<img src="path/to/your/image.jpg" alt="项目背景图片" onerror="this.onerror=null;this.src='https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/images/md_picture/bigdata/404.png?imageSlim';">
<div class="image-description left-align">
图片左边对齐
</div>
</div>
<div class="media custom-size center-align">
<img src="path/to/your/image.jpg" alt="项目背景图片" onerror="this.onerror=null;this.src='https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/images/md_picture/bigdata/404.png?imageSlim';">
<div class="image-description center-align">
图片居中对齐
</div>
</div>
<div class="media">
<img src="path/to/your/image.jpg" alt="项目背景图片" onerror="this.onerror=null;this.src='https://elik-1307874295.cos.ap-guangzhou.myqcloud.com/images/md_picture/bigdata/404.png?imageSlim';">
<div class="image-description center-align">
图片默认情况
</div>
</div>
</div>
<div class="description">
<h3>描述标签</h3>
<p>内容标签</p>
<div class="media">
<video controls>
<source src="path/to/your/video.mp4" onerror="this.src='path/to/your/video.webm'"
type="video/mp4">
您的浏览器不支持HTML5视频标签。
</video>
<div class="video-description center-align">
默认视频播放格式
</div>
</div>
<div class="media custom-size">
<video controls onerror="this.onerror=null;this.src='404.mp4';">
<source src="path/to/your/video.mp4" type="video/mp4">
您的浏览器不支持HTML5视频标签。
</video>
<div class="video-description center-align">
自定义视频播放格式
</div>
</div>
</div>
<div class="description">
<h2>点击按钮可以复制</h2>
<div class="code-block" id="codeBlock">
<div class="copy-btn" title="Copy Code" id="copyButton"><i class="fa fa-copy"></i></div>
<pre><code class="language-javascript">代码区域</code></pre>
</div>
</div>
<h4>h4标签</h4>
<div class="request-params">
<div class="param">
<span class="name">介绍:</span>
<span class="type">描述</span>
<span class="description">继续描述 </span>
</div>
<div class="example">
<div class="code">
<p>这个文字版本不能复制</p>
</div>
</div>
<div class="param">
<span class="name">介绍:</span>
<span class="type">描述</span>
<span class="description">继续描述 </span>
</div>
<div class="param">
<span class="name">介绍:</span>
<span class="type">描述</span>
<span class="description">继续描述 </span>
<span class="description">继续继续描述</span>
</div>
<div class="example">
<div class="code" id="example-code">
<p>文字复制</p>
</div>
<button class="copy-button" onclick="copyContent('example-code')">
<i class="far fa-copy"></i> <!-- 使用复制图标 -->
</button>
</div>
<div class="footer">
<p>Powered by <a href="#">elik-hb</a></p>
</div>
</div>
</div>
</div>
<!-- Prism.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<!-- Clipboard.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
document.querySelectorAll('.toggle-button').forEach(button => {
button.addEventListener('click', () => {
const submenu = button.nextElementSibling;
if (submenu.classList.contains('submenu-hidden')) {
submenu.classList.remove('submenu-hidden');
} else {
submenu.classList.add('submenu-hidden');
}
});
});
document.addEventListener('DOMContentLoaded', function () {
// Initialize Clipboard.js
var clipboard = new ClipboardJS('#copyButton', {
text: function(trigger) {
// Get code block content
var codeBlock = trigger.nextElementSibling;
var codeLines = codeBlock.innerText.split('\n');
// Remove leading spaces
var trimmedCode = codeLines.map(function(line) {
return line.trimLeft();
});
// Join lines back together
return trimmedCode.join('\n');
}
});
// Add event listener for success
clipboard.on('success', function(e) {
e.clearSelection();
showTooltip(e.trigger, 'Copied!');
});
// Add event listener for error
clipboard.on('error', function(e) {
showTooltip(e.trigger, 'Failed!');
});
// Show tooltip
function showTooltip(elem, message) {
elem.setAttribute('title', message);
setTimeout(function() {
elem.removeAttribute('title');
}, 1000);
}
});
// 这个函数将复制元素中的内容
function copyContent(elementId) {
var content = document.getElementById(elementId).innerText; // 获取元素的文本内容
navigator.clipboard.writeText(content).then(() => {
alert('内容已复制到剪贴板');
}).catch(err => {
console.error('复制失败:', err);
});
}
</script>
</body>
</html>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
.container {
display: flex;
margin: 0 auto;
max-width: 1200px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sidebar {
width: auto;
padding: 20px;
border-right: 1px solid #ddd;
/* background-color: #f8f9fa; */
}
.sidebar h3 {
margin-top: 0;
color: #0073e6;
}
.sidebar input[type="text"] {
width: 210px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li {
margin-bottom: 10px;
}
.sidebar a,
.toggle-button {
text-decoration: none;
color: #0073e6;
cursor: pointer;
display: block;
padding: 5px 10px;
border-radius: 3px;
}
.sidebar a:hover,
.toggle-button:hover {
background-color: #e2e6ea;
}
.sidebar .submenu {
padding-left: 20px;
}
.sidebar .submenu-hidden {
display: none;
}
.active {
background-color: #e2e6ea;
}
.content {
flex: 1;
padding: 20px;
}
.content h2 {
margin-top: 0;
color: #0073e6;
}
.content .api-info {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.api-info .method {
display: inline-block;
background-color: #0073e6;
color: white;
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
}
.api-info .path {
display: inline-block;
font-weight: bold;
margin-right: 10px;
}
.api-info .run-button {
background-color: #28a745;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
margin-left: 5px;
}
.api-info .run-button:hover {
background-color: #218838;
}
.content .description {
margin-bottom: 20px;
}
.content .request-params {
margin-bottom: 20px;
}
.request-params h4 {
margin-top: 0;
color: #0073e6;
}
.request-params .param {
margin-bottom: 10px;
}
.param .name {
font-weight: bold;
margin-right: 10px;
}
.param .type {
margin-right: 10px;
color: #555;
}
.param .description {
display: inline-block;
}
.content .example {
margin-bottom: 20px;
}
.example .code {
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
font-family: 'Courier New', Courier, monospace;
}
.content .footer {
text-align: center;
margin-top: 20px;
}
.content .footer a {
text-decoration: none;
color: #0073e6;
}
.content .footer a:hover {
text-decoration: underline;
}
/* Custom styles for images and videos */
.content .media {
margin-bottom: 20px;
}
.media img {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.media video {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: block;
margin: 0 auto;
}
.submenu-hidden {
display: none;
}
.toggle-button {
cursor: pointer;
color: #007BFF;
}
.toggle-button:hover {
text-decoration: underline;
}
/* Custom size for specific images and videos */
.custom-size img {
width: 500px;
/* Custom width */
height: 300px;
/* Custom height */
}
.custom-size video {
width: 500px;
/* Custom width */
height: 300px;
/* Custom height */
}
.submenu-hidden {
display: none;
}
.toggle-button {
cursor: pointer;
color: #007BFF;
}
.toggle-button:hover {
text-decoration: underline;
}
.center-align {
text-align: center;
}
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
/* 代码区域内容 */
.code-block {
position: relative;
background-color: #f5f5f5;
border-radius: 5px;
padding: 20px;
overflow-x: auto;
}
/* Optional: Customize code block font */
.code-block pre {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
margin: 0;
/* Remove default margin */
white-space: pre-wrap;
/* Preserve whitespace */
}
.copy-btn {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.example {
position: relative; /* 设置父容器为相对定位 */
border: 1px solid #F0F0F0; /* 可选：添加边框以清晰显示区域 */
padding: 10px;
}
.copy-button {
position: absolute; /* 设置按钮为绝对定位 */
top: 0; /* 定位到顶部 */
right: 0; /* 定位到右边 */
border: none; /* 去除边框 */
background: none; /* 去除背景 */
cursor: pointer; /* 将鼠标光标变为手型，提升用户体验 */
}
.copy-button i {
color: #4CAF50; /* 设置图标颜色，可自定义 */
}
4221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
