HTML页面实现图书介绍页面
时间: 2023-05-30 21:01:17 浏览: 505
<!DOCTYPE html>
<html>
<head>
<title>图书介绍页面</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
font-size: 32px;
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
.book {
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
flex-basis: 30%;
margin-bottom: 20px;
overflow: hidden;
padding: 20px;
}
.book img {
display: block;
margin: 0 auto;
max-width: 100%;
}
.book h2 {
font-size: 24px;
margin: 10px 0;
text-align: center;
}
.book p {
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
text-align: justify;
}
.book a {
background-color: #333;
border-radius: 5px;
color: #fff;
display: block;
margin: 10px auto 0;
padding: 10px;
text-align: center;
text-decoration: none;
width: 80%;
}
.book a:hover {
background-color: #666;
}
</style>
</head>
<body>
<header>
<h1>图书介绍页面</h1>
</header>
<main>
<div class="book">
<img src="book1.jpg" alt="书籍封面">
<h2>JavaScript高级程序设计</h2>
<p>本书是一本深入讲解JavaScript语言的高级特性、开发技巧、面向对象编程以及实践应用的权威指南。通过本书的学习,读者将全面掌握JavaScript编程的核心概念和技术,能够编写高质量的JavaScript程序。</p>
<a href="#">购买本书</a>
</div>
<div class="book">
<img src="book2.jpg" alt="书籍封面">
<h2>深入浅出Node.js</h2>
<p>本书深入浅出地介绍了Node.js的核心概念、基础知识和常用API,同时通过实例演示了如何使用Node.js进行Web开发、网络编程、文件操作、数据库访问等方面的开发。</p>
<a href="#">购买本书</a>
</div>
<div class="book">
<img src="book3.jpg" alt="书籍封面">
<h2>数据结构与算法JavaScript描述</h2>
<p>本书详细介绍了JavaScript实现的常用数据结构和算法,通过实例演示了如何使用这些数据结构和算法解决实际问题。本书既适合初学者学习数据结构和算法,也适合JavaScript开发者提升编程技能。</p>
<a href="#">购买本书</a>
</div>
</main>
</body>
</html>