帮我生成一个基于HTML和js的动态网页的代码
<!DOCTYPE html>
<html>
<head>
<title>动态网页</title>
<style>
body {
font-family: Arial, sans-serif;
}
<pre><code> h1 {
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 10px;
width: 300px;
}
.card img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.card h2 {
font-size: 1.5em;
margin-bottom: 5px;
}
.card p {
margin: 0;
}
</style>
</code></pre>
</head>
<body>
<h1>动态网页</h1>
<pre><code><div class="container"></div>
<script>
const data = [
{
image: 'https://via.placeholder.com/300x200',
title: '标题1',
description: '描述1'
},
{
image: 'https://via.placeholder.com/300x200',
title: '标题2',
description: '描述2'
},
{
image: 'https://via.placeholder.com/300x200',
title: '标题3',
description: '描述3'
},
{
image: 'https://via.placeholder.com/300x200',
title: '标题4',
description: '描述4'
},
{
image: 'https://via.placeholder.com/300x200',
title: '标题5',
description: '描述5'
},
{
image: 'https://via.placeholder.com/300x200',
title: '标题6',
description: '描述6'
}
];
const container = document.querySelector('.container');
data.forEach(item => {
const card = document.createElement('div');
card.classList.add('card');
const image = document.createElement('img');
image.src = item.image;
const title = document.createElement('h2');
title.textContent = item.title;
const description = document.createElement('p');
description.textContent = item.description;
card.appendChild(image);
card.appendChild(title);
card.appendChild(description);
container.appendChild(card);
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/EO3 著作权归作者所有。请勿转载和采集!