用html css javascript来写精美华丽的一个儿童图书介绍网页
时间: 2023-10-03 22:02:47 浏览: 66
好的,下面是一个简单的儿童图书介绍网页的代码示例,你可以根据需要进行修改和美化。
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>儿童图书介绍</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>儿童图书介绍</h1>
</header>
<nav>
<ul>
<li><a href="#book1">小熊和小兔</a></li>
<li><a href="#book2">小鸟学飞</a></li>
<li><a href="#book3">小猫钓鱼</a></li>
</ul>
</nav>
<main>
<section id="book1">
<h2>小熊和小兔</h2>
<img src="book1.jpg">
<p>这是一本有趣的儿童故事书,讲述了小熊和小兔的冒险故事。</p>
<p>推荐年龄:3-6岁</p>
<a href="https://www.amazon.cn/dp/123456789">购买链接</a>
</section>
<section id="book2">
<h2>小鸟学飞</h2>
<img src="book2.jpg">
<p>这是一本生动的儿童科普书,通过小鸟学习飞行的过程,让孩子了解自然界的奥秘。</p>
<p>推荐年龄:4-8岁</p>
<a href="https://www.amazon.cn/dp/123456789">购买链接</a>
</section>
<section id="book3">
<h2>小猫钓鱼</h2>
<img src="book3.jpg">
<p>这是一本温馨的儿童故事书,讲述了小猫和爷爷一起钓鱼的故事,寓意着亲情和友情的重要性。</p>
<p>推荐年龄:5-10岁</p>
<a href="https://www.amazon.cn/dp/123456789">购买链接</a>
</section>
</main>
<footer>
<p>版权所有 © 2021 儿童图书介绍</p>
</footer>
</body>
</html>
```
CSS部分:
```css
/* 页面布局样式 */
header {
background-color: #F9D9A3;
padding: 20px;
text-align: center;
}
nav {
background-color: #F7A541;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin-right: 20px;
}
nav a {
color: #FFFFFF;
text-decoration: none;
font-size: 18px;
}
main {
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
section {
margin-bottom: 50px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
text-align: center;
}
a {
background-color: #F7A541;
color: #FFFFFF;
padding: 10px;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
}
a:hover {
background-color: #F9D9A3;
color: #000000;
}
footer {
background-color: #F9D9A3;
padding: 10px;
text-align: center;
font-size: 14px;
margin-top: 50px;
}
```
JavaScript部分:
```javascript
// 可以根据需要添加交互效果的JavaScript代码
```
以上是一个简单的儿童图书介绍网页的代码示例,你可以根据需要进行修改和美化。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)