128 lines
5.4 KiB
Plaintext
128 lines
5.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<body style="background-image: url(images/bj1.jpg);
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>xiaoshunLinux</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f9f9f9;
|
|
}
|
|
h1 {
|
|
margin-top: 40px;
|
|
font-size: 100px; /* 调整标题字体大小 */
|
|
}
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 40px; /* 调整按钮之间的间距 */
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
}
|
|
.function-wrapper {
|
|
text-align: center;
|
|
width: 250px; /* 固定每个功能按钮的宽度 */
|
|
margin: 20px; /* 添加外边距增加间距 */
|
|
}
|
|
.function-icon {
|
|
width: 200px; /* 调整图标大小 */
|
|
height: 200px;
|
|
margin-bottom: 10px; /* 调整图标和按钮之间的间距 */
|
|
border-radius: 50%; /* 设置为圆形 */
|
|
border: 0px solid #ddd; /* 添加边框以突出圆形 */
|
|
object-fit: cover; /* 保持图像比例 */
|
|
}
|
|
.function-button {
|
|
display: block; /* 确保链接显示为块级元素 */
|
|
width: 100%; /* 链接宽度与父元素一致 */
|
|
padding: 20px; /* 调整按钮内边距 */
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* 调整阴影效果 */
|
|
transition: transform 0.3s;
|
|
text-decoration: none; /* 移除链接下划线 */
|
|
color: inherit; /* 保持字体颜色 */
|
|
}
|
|
.function-button:hover {
|
|
transform: scale(1.1); /* 调整悬停效果 */
|
|
}
|
|
.function-button h3 {
|
|
margin-top: 0;
|
|
font-size: 20px; /* 调整按钮标题字体大小 */
|
|
}
|
|
.function-button p {
|
|
margin: 10px 0;
|
|
font-size: 16px; /* 调整按钮描述字体大小 */
|
|
color: #666;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Linux</h1>
|
|
<p>安静的做 成功了再说</p>
|
|
<div class="container">
|
|
<div class="function-wrapper">
|
|
<img src="images/linux.png.webp" alt="Linux 命令" class="function-icon">
|
|
<a href="http://124.71.40.41:9555/" class="function-button">
|
|
<h3>Linux 命令</h3>
|
|
<p>点击查询 Linux 命令并获取相应帮助。</p >
|
|
</a >
|
|
</div>
|
|
<div class="function-wrapper">
|
|
<img src="images/gitea.png" alt="gitea 在线代码仓库" class="function-icon">
|
|
<a href="http://121.36.27.6:3000" class="function-button">
|
|
<h3>gitea 在线代码库</h3>
|
|
<p>这是 Gitea 仓库，记录所有云原生笔记文档。</p >
|
|
</a >
|
|
</div>
|
|
<div class="function-wrapper">
|
|
<img src="images/1Panel.png" alt="1penel 开源运维面板" class="function-icon">
|
|
<a href="http://121.36.27.6:612/612" class="function-button">
|
|
<h3>1penel 开源运维面板</h3>
|
|
<p>智能化运维,高效管理,快速建站,应用商店,安全可靠,一键备份</p >
|
|
</a >
|
|
</div>
|
|
<!-- 根据需要添加其他按钮 -->
|
|
</div>
|
|
<div class="container">
|
|
<div class="function-wrapper">
|
|
<img src="images/cloud.png" alt="Online Blog(暂停服务)" class="function-icon">
|
|
<a href="http://121.36.27.6:40072/" class="function-button">
|
|
<h3>cloud</h3>
|
|
<p>ZFile 是一个开源的网络硬盘程序，主要用于个人或小型团队的文件存储和管理</p>
|
|
</a >
|
|
</div>
|
|
<div class="function-wrapper">
|
|
<img src="images/douyin.png" alt="Online Code Registry" class="function-icon">
|
|
<a href="https://www.douyin.com/user/MS4wLjABAAAA3tYDXK_vEZUQBJQ9tfuWhfFEC64LE4drQ2EUXoaExC0" class="function-button">
|
|
<h3>抖音</h3>
|
|
<p>抖音记录美好生活</p>
|
|
</a >
|
|
</div>
|
|
<div class="function-wrapper">
|
|
<img src="images/xhs.jpg" alt="Station B" class="function-icon">
|
|
<a href="https://www.xiaohongshu.com/user/profile/5deb091e000000000100661a" class="function-button">
|
|
<h3>小红书</h3>
|
|
<p>技术让生活更精彩，点击间传递知识与温暖，记录美好，点亮日常。</p>
|
|
</a>
|
|
</div>
|
|
<!-- 根据需要添加其他按钮 -->
|
|
</div>
|
|
<nav>
|
|
<a href="about/index.html">关于</a>
|
|
<a href="services/index.html">服务</a>
|
|
<a href="contact/index.html">联系我们</a>
|
|
<a href="https://beian.miit.gov.cn/#/Integrated/index">津ICP备2024013796号-1</a>
|
|
</nav>
|
|
</body>
|
|
</body>
|
|
</html>
|