请使用HTML+CSS+Javascript语言设计一个图书介绍网站,要求至少包含3个以上页面,写出代码
时间: 2024-04-06 17:27:42 浏览: 32
当设计一个图书介绍网站时,可以使用HTML、CSS和JavaScript语言来实现。以下是一个简单的示例,包含了三个页面:主页、图书列表页和图书详情页。
1. 主页(index.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>图书介绍网站</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>图书介绍网站</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="booklist.html">图书列表</a></li>
</ul>
</nav>
</header>
<main>
<h2>欢迎来到图书介绍网站!</h2>
<p>这是一个用于介绍各种图书的网站。</p>
</main>
<footer>
版权所有 © 2022 图书介绍网站
</footer>
</body>
</html>
```
2. 图书列表页(booklist.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>图书列表</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>图书介绍网站</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="booklist.html">图书列表</a></li>
</ul>
</nav>
</header>
<main>
<h2>图书列表</h2>
<ul>
<li><a href="book1.html">图书1</a></li>
<li><a href="book2.html">图书2</a></li>
<li><a href="book3.html">图书3</a></li>
</ul>
</main>
<footer>
版权所有 © 2022 图书介绍网站
</footer>
</body>
</html>
```
3. 图书详情页(book1.html,book2.html,book3.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>图书详情</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>图书介绍网站</h1>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="booklist.html">图书列表</a></li>
</ul>
</nav>
</header>
<main>
<h2>图书详情</h2>
<h3 id="book-title"></h3>
<p id="book-description"></p>
</main>
<footer>
版权所有 © 2022 图书介绍网站
</footer>
<script>
// 通过JavaScript动态加载图书详情
window.onload = function() {
var bookTitle = document.getElementById("book-title");
var bookDescription = document.getElementById("book-description");
// 根据不同的图书详情页,设置不同的标题和描述
if (location.href.includes("book1.html")) {
bookTitle.innerText = "图书1";
bookDescription.innerText = "这是图书1的介绍。";
} else if (location.href.includes("book2.html")) {
bookTitle.innerText = "图书2";
bookDescription.innerText = "这是图书2的介绍。";
} else if (location.href.includes("book3.html")) {
bookTitle.innerText = "图书3";
bookDescription.innerText = "这是图书3的介绍。";
}
};
</script>
</body>
</html>
```
4. CSS样式表(style.css):
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
这是一个简单的图书介绍网站示例,包含了主页、图书列表页和图书详情页。你可以根据需要进行修改和扩展。