用js写一个售车的动态网站
时间: 2024-05-04 22:21:55 浏览: 116
好的,我可以给你提供一个简单的售车动态网站的示例代码,但需要说明的是,这只是一个基础的模板,你需要按照自己的需求进行修改和完善。另外,本示例仅为前端代码,不包含后端实现。
HTML代码:
```
<!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>
</ul>
</nav>
</header>
<main>
<section id="banner">
<h2>欢迎来到售车动态网站</h2>
<p>我们提供各种品牌、型号、价格的汽车供您选择。</p>
<a href="#">查看更多</a>
</section>
<section id="featured-cars">
<h2>特色汽车</h2>
<div class="car">
<img src="car1.jpg" alt="汽车图片">
<h3>2019款保时捷Panamera</h3>
<p>价格:¥150万</p>
<a href="#">查看详情</a>
</div>
<div class="car">
<img src="car2.jpg" alt="汽车图片">
<h3>2021款奔驰S级</h3>
<p>价格:¥200万</p>
<a href="#">查看详情</a>
</div>
<div class="car">
<img src="car3.jpg" alt="汽车图片">
<h3>2020款宝马7系</h3>
<p>价格:¥120万</p>
<a href="#">查看详情</a>
</div>
</section>
</main>
<footer>
<p>© 2021 售车动态网站</p>
</footer>
</body>
</html>
```
CSS代码:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
#banner {
background-image: url('banner.jpg');
background-size: cover;
background-position: center;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#banner h2 {
font-size: 40px;
margin-bottom: 20px;
}
#banner p {
font-size: 20px;
margin-bottom: 40px;
text-align: center;
}
#banner a {
background-color: #fff;
color: #333;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
#featured-cars {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
}
.car {
flex-basis: calc(33.33% - 20px);
margin-right: 20px;
margin-bottom: 20px;
}
.car img {
width: 100%;
height: 200px;
object-fit: cover;
}
.car h3 {
font-size: 24px;
margin-top: 10px;
margin-bottom: 5px;
}
.car p {
font-size: 18px;
margin-bottom: 10px;
}
.car a {
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
}
```
注意:示例代码中的图片和样式文件需要根据实际情况进行替换。