请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Website</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style>
body { background: #333; color: white; }
.xContainer { margin: 20px auto; margin-top: 60px; width: 80vw; height: 80vh; display: flex; gap: 50px; flex-wrap: wrap; align-content: space-between; }
.xCard { flex: 1 0 20vw; height: 32vh; background: #666; border-radius: 8px; box-shadow: 0 0 4px silver; padding: 20px; transition: .3s; overflow: hidden; scrollbar-width: thin; scrollbar-color: tan transparent; }
.xCard:hover { background: #444; box-shadow: 4px 2px 8px silver; overflow: auto; }
.xCard:empty { opacity: 0.5; }
.xCard a { color: snow; text-decoration: none; }
.xCard a:hover { text-decoration: underline wavy silver; }
.xCard h2 { margin: 0; padding: 0; }
.tMid { text-align: center; }
</style>
<h1 class="tMid">💎 聚宝盆</h1>
<div class="xContainer">
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
</div>
<script>
var xCards = document.querySelectorAll('.xCard');
var xDatas = {
x1: {
title: '暗夜空间',
icon: '✨',
urls: [
{ name: '马黑整站系统', url: 'http://mhh.52qingyin.cn/' },
{ name: '帖宝', url: 'http://mhh.52qingyin.cn/api/tiebao/tiebao.html' },
{ name: 'SVGDR', url: 'http://mhh.52qingyin.cn/api/svgdr/tool/' },
{ name: 'V5高能电饭煲', url: 'http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1772025886' },
{ name: '音画帖快手', url: 'http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1774501446' },
],
},
x2: {
title: '前端高能',
icon: '🕯️',
urls: [
{ name: '现代 JavaScript 教程', url: 'https://zh.javascript.info/' },
{ name: 'Eloquent JavaScript（2024版）', url: 'https://eloquent.javascript.ac.cn/' },
{ name: 'JS 函数式编程『简明教程』', url: 'https://juejin.cn/post/7083890927298674724' },
{ name: 'User Agent Man', url: 'https://www.useragentman.com/blog/' },
],
},
};
function makecard(elements, datas) {
Object.keys(datas).forEach((key, idx) => {
var xData = datas[key];
var frg = new DocumentFragment();
var h2 = document.createElement('h2');
h2.innerHTML = `<span>${xData.icon}</span> ${xData.title}`;
frg.appendChild(h2);
var ol = document.createElement('ol');
var liFrg = new DocumentFragment();
xData.urls.forEach(url => {
var li = document.createElement('li');
li.innerHTML = `<a href="${url.url}" target="_blank">${url.name}</a>`;
liFrg.appendChild(li);
});
ol.appendChild(liFrg);
frg.appendChild(ol);
elements[idx].appendChild(frg);
});
}
makecard(xCards, xDatas);
</script>
</body>
</html>
| 
发表于 2026-3-30 12:34
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2026-3-30 14:40
