使用html制作一个简易当当网首页
时间: 2024-02-16 20:05:17 浏览: 36
好的,我可以为你提供一个简易版的当当网首页的HTML代码,你可以根据需要进行修改和美化。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>当当网</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #FF6600;
color: white;
padding: 10px;
}
nav {
background-color: #F5F5F5;
padding: 10px;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
font-size: 18px;
padding: 10px;
}
nav a:hover {
background-color: #FF6600;
color: white;
}
section {
padding: 20px;
}
#banner {
height: 200px;
background-image: url("banner.jpg");
background-size: cover;
background-position: center;
text-align: center;
padding-top: 50px;
}
#banner h1 {
font-size: 50px;
color: white;
text-shadow: 2px 2px #333;
}
#hot {
margin-top: 20px;
text-align: center;
}
#hot h2 {
font-size: 24px;
margin-bottom: 20px;
}
#hot ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#hot li {
margin: 10px;
width: 200px;
}
#hot img {
width: 100%;
height: auto;
}
#hot a {
color: #333;
text-decoration: none;
font-size: 18px;
display: block;
margin-top: 10px;
}
#hot a:hover {
color: #FF6600;
}
footer {
background-color: #F5F5F5;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>当当网</h1>
<p>全球最大中文网上书店</p>
</header>
<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>
<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>
<section id="banner">
<h1>畅销图书</h1>
</section>
<section id="hot">
<h2>热门推荐</h2>
<ul>
<li>
<img src="book1.jpg" alt="图书1">
<a href="#">图书名称1</a>
</li>
<li>
<img src="book2.jpg" alt="图书2">
<a href="#">图书名称2</a>
</li>
<li>
<img src="book3.jpg" alt="图书3">
<a href="#">图书名称3</a>
</li>
<li>
<img src="book4.jpg" alt="图书4">
<a href="#">图书名称4</a>
</li>
</ul>
</section>
<footer>
<p>版权所有©2019-2021当当网</p>
</footer>
</body>
</html>
```
这个页面包含了顶部导航栏、轮播图和热门推荐等元素,你可以根据需要进行修改和美化。需要注意的是,这个页面只是一个简易版的当当网首页,实际上当当网的首页比这个复杂得多。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.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)