请参考网址https://www.car-vacation.com/e/action/ListInfo/?classid=16,写一个类似的html页面,要求给出完整的代码
时间: 2023-05-28 21:01:38 浏览: 113
使用HTML、CSS和JavaScript做一个简单的汽车报价网站的完整代码示例,网页设计作业(附详细操作步骤).txt
<!DOCTYPE html>
<html>
<head>
<title>Car Vacation - Destinations</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div id="logo">
<a href="index.html"><img src="logo.png" alt="Car Vacation Logo"></a>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Destinations</h1>
<ul class="destinations">
<li>
<img src="dest1.jpg" alt="Destination 1">
<h2>Destination 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim fringilla magna, a mollis neque pretium vel. Donec non lectus non sapien vulputate hendrerit at et elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed cursus est at mauris laoreet suscipit.</p>
</li>
<li>
<img src="dest2.jpg" alt="Destination 2">
<h2>Destination 2</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
</li>
<li>
<img src="dest3.jpg" alt="Destination 3">
<h2>Destination 3</h2>
<p>Quisque nec sapien sit amet sem iaculis pretium euismod at eros. Fusce facilisis nulla ac massa ullamcorper, eu tempus nibh pulvinar. Donec ultricies justo in lectus malesuada, et mollis enim placerat. Cras laoreet a arcu in accumsan. Sed finibus malesuada aliquet.</p>
</li>
</ul>
</main>
<footer>
<div class="footer-content">
<div class="footer-section about">
<h3>About Car Vacation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius euismod nisl, vel dictum ipsum malesuada id. Nunc tincidunt nisi sed mi tristique convallis. Nullam volutpat enim quis nunc lacinia, id sollicitudin quam dapibus.</p>
<div class="contact">
<span><i class="fas fa-phone"></i> 123-456-7890</span>
<span><i class="fas fa-envelope"></i> info@car-vacation.com</span>
</div>
</div>
<div class="footer-section links">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section social">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2022 Car Vacation. All rights reserved.</p>
</div>
</footer>
</body>
</html>
阅读全文