制作一个二手汽车行的静态网页
时间: 2024-06-08 16:09:50 浏览: 148
好的,以下是一个简单的二手汽车行静态网页的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二手汽车行</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
nav {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
nav a {
display: inline-block;
margin: 0 10px;
color: #333;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: #f00;
}
section {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
footer p {
margin: 0;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>二手汽车行</h1>
<p>最好的二手汽车购买体验</p>
</header>
<nav>
<a href="#">首页</a>
<a href="#">车辆列表</a>
<a href="#">联系我们</a>
</nav>
<section>
<h2>欢迎来到二手汽车行</h2>
<p>我们提供各种类型的二手车,从小型车到SUV,从日本车到欧洲车,应有尽有。</p>
<h3>我们的优势</h3>
<ul>
<li>优质的车辆</li>
<li>合理的价格</li>
<li>专业的销售团队</li>
<li>完善的售后服务</li>
</ul>
<h3>最新车辆</h3>
<ul>
<li>
<h4>2018款本田CR-V</h4>
<p>行驶里程:2万公里</p>
<p>售价:18万元</p>
<p><img src="https://via.placeholder.com/500x300.png?text=车辆图片" alt="2018款本田CR-V"></p>
</li>
<li>
<h4>2019款宝马X3</h4>
<p>行驶里程:1.5万公里</p>
<p>售价:30万元</p>
<p><img src="https://via.placeholder.com/500x300.png?text=车辆图片" alt="2019款宝马X3"></p>
</li>
<li>
<h4>2015款丰田凯美瑞</h4>
<p>行驶里程:5万公里</p>
<p>售价:12万元</p>
<p><img src="https://via.placeholder.com/500x300.png?text=车辆图片" alt="2015款丰田凯美瑞"></p>
</li>
</ul>
</section>
<footer>
<p>© 2021 二手汽车行</p>
</footer>
</body>
</html>
```
你可以将代码复制到一个文本编辑器中,并将文件保存为 `.html` 格式,然后在浏览器中打开该文件,就可以看到静态网页的效果了。当然,这只是一个示例,你可以根据自己的需要和喜好进行修改和定制。
阅读全文