html作品展示
以下是一个简单的HTML网页代码示例，用于展示艺术作品集：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>艺术作品集</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.artwork-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.artwork-item {
margin: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 20px;
flex: 1 1 200px;
}
.artwork-item img {
width: 100%;
height: auto;
}
.artwork-item h3 {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>艺术作品集</h1>
<div class="artwork-container">
<div class="artwork-item">
<img src="path_to_image/artwork1.jpg" alt="作品1">
<h3>作品1标题</h3>
</div>
<!-- 其他作品项 -->
<div class="artwork-item">
<img src="path_to_image/artwork2.jpg" alt="作品2">
<h3>作品2标题</h3>
</div>
<!-- 更多作品 -->
</div>
</body>
</html>这个示例使用了简单的HTML结构和内联样式来展示艺术作品集。你可以将src="path_to_image/artwork1.jpg"和<h3>作品1标题</h3>替换为你自己的图片路径和标题。你可以复制<div class="artwork-item">...</div>块来增加更多的作品。这个示例展示了如何使用flexbox布局来创建一个响应式的作品展示页面。
评论已关闭