网上书城首页html+css代码
时间: 2023-10-06 10:07:57 浏览: 57
<!DOCTYPE html>
<html>
<head>
<title>网上书城</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>网上书城</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图书分类</a></li>
<li><a href="#">畅销书</a></li>
<li><a href="#">特价书</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">个人中心</a></li>
</ul>
</nav>
</header>
<main>
<section class="banner">
<img src="banner.jpg" alt="banner">
</section>
<section class="books">
<h2>热门图书</h2>
<ul>
<li>
<a href="#">
<img src="book1.jpg" alt="book1">
<h3>《活着》</h3>
<span>余华</span>
<p>¥25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="book2.jpg" alt="book2">
<h3>《白夜行》</h3>
<span>东野圭吾</span>
<p>¥28.00</p>
</a>
</li>
<li>
<a href="#">
<img src="book3.jpg" alt="book3">
<h3>《三体》</h3>
<span>刘慈欣</span>
<p>¥35.00</p>
</a>
</li>
</ul>
</section>
<section class="promotion">
<h2>特价图书</h2>
<ul>
<li>
<a href="#">
<img src="book4.jpg" alt="book4">
<h3>《局外人》</h3>
<span>阿尔贝·加缪</span>
<p>¥18.00</p>
</a>
</li>
<li>
<a href="#">
<img src="book5.jpg" alt="book5">
<h3>《红楼梦》</h3>
<span>曹雪芹</span>
<p>¥22.00</p>
</a>
</li>
<li>
<a href="#">
<img src="book6.jpg" alt="book6">
<h3>《平凡的世界》</h3>
<span>路遥</span>
<p>¥30.00</p>
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>©2021 网上书城</p>
</footer>
</body>
</html>