<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
dl {
width: 500px;
border: 1px solid #333;
}
dt {
position: sticky;
top: 0;
font-size: 20px;
background-color: #bfd;
}
dd {
padding: 50px;
font-size: 16px;
}
</style>
</head>
<body>
<dl>
</dl>
<script>
const data = {
"魏": ["曹操", "曹昂", "曹丕", "曹彰", "曹植", "曹冲", "曹洪"],
"蜀": ["刘备", "关羽", "张飞", "赵云", "黄忠", "马超", "诸葛亮"],
"吴": ["孙坚", "孙策", "孙权", "周瑜", "黄盖", "太史慈", "凌统"]
};
// 获取 dl 元素
const dlElement = document.querySelector('dl');
// 遍历数据对象
for (const key in data) {
if (data.hasOwnProperty(key)) {
// 创建 dt 元素
const dtElement = document.createElement('dt');
dtElement.id = key;
dtElement.textContent = key;
dlElement.appendChild(dtElement);
// 创建对应的 dd 元素
data[key].forEach(name => {
const ddElement = document.createElement('dd');
ddElement.textContent = name;
dlElement.appendChild(ddElement);
});
}
}
</script>
</body>
</html>
【CSS】粘性布局在滚动时固定标题
最新推荐文章于 2024-07-23 21:45:47 发布