写一段个 html + css + js 的文件, 这个文件运行之后可以显示一个图片, 图片内容是一个动漫女孩
时间: 2024-02-12 15:09:00 浏览: 20
好的,以下是一个简单的 HTML + CSS + JS 文件,可以显示一个动漫女孩的图片:
```html
<!DOCTYPE html>
<html>
<head>
<title>动漫女孩图片展示</title>
<style>
/* 设置图片容器的样式 */
#girl-image {
width: 500px;
height: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
/* 设置图片的样式 */
#girl-image img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="girl-image"></div>
<script>
// 创建一个 Image 对象
var img = new Image();
// 设置图片的地址
img.src = "girl.jpg";
// 当图片加载完成后,将其添加到页面中
img.onload = function() {
var girlImage = document.getElementById("girl-image");
girlImage.appendChild(img);
};
</script>
</body>
</html>
```
你可以将上面的代码保存为一个名为 `index.html` 的文件,然后将一张名为 `girl.jpg` 的动漫女孩图片放在同一个目录下,就可以在浏览器中运行这个文件,看到动漫女孩的图片了。