用html css javascript来写一个儿童图书介绍网页
时间: 2023-10-05 14:12:23 浏览: 104
好的,以下是一个简单的儿童图书介绍网页的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>儿童图书介绍</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.book {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 10px;
background-color: #f9f9f9;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.book img {
max-width: 200px;
margin-right: 20px;
}
.book h2 {
margin: 0;
color: #333;
}
.book p {
margin: 0;
color: #666;
}
@media screen and (max-width: 600px) {
.book {
flex-direction: column;
align-items: center;
}
.book img {
margin-right: 0;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>儿童图书推荐</h1>
<div class="book">
<img src="book1.jpg" alt="图书封面">
<div>
<h2>《小王子》</h2>
<p>作者:圣埃克苏佩里</p>
<p>简介:这是一本关于孩子和成人之间的启示性小说,通过小王子的冒险经历,让我们重新思考生命的意义。</p>
</div>
</div>
<div class="book">
<img src="book2.jpg" alt="图书封面">
<div>
<h2>《哈利波特》</h2>
<p>作者:J.K.罗琳</p>
<p>简介:这是一系列畅销的魔法冒险小说,讲述了哈利波特在霍格沃茨学校的奇幻经历,深受孩子们的喜爱。</p>
</div>
</div>
<div class="book">
<img src="book3.jpg" alt="图书封面">
<div>
<h2>《百变小樱魔术卡》</h2>
<p>作者:clamp</p>
<p>简介:这是一本非常受女孩子欢迎的漫画,讲述了小樱在捡到魔法卡片后,与朋友们一起收集卡片,解决魔法事件的故事。</p>
</div>
</div>
</div>
</body>
</html>
```
你可以将上面的代码复制到一个文本编辑器中,保存为一个 `.html` 文件,然后用浏览器打开该文件,即可查看效果。注意需要将代码中的图片链接替换为你自己的图片链接才能正常显示。