请参考网址https://www.car-vacation.com/e/action/ListInfo/?classid=16,写一个类似的html页面,要求给出完整的布局框架代码
时间: 2023-05-28 18:01:33 浏览: 132
java 修改删除返回当前页面问题解决办法.docx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Vacation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="hero-image">
<h1>Unleash Your Wanderlust</h1>
<p>Let's Travel the World with Car Vacation</p>
<button>Book Now</button>
</div>
</header>
<section class="about-us">
<h2>About Us</h2>
<p>Car Vacation is a leading provider of car rental and travel services around the globe. We offer a wide variety of rental cars from economy to luxury class and provide convenient travel packages for your dream vacation.</p>
<p>Our team consists of experienced professionals who are passionate about delivering the best customer service and value. We believe in providing exceptional travel experience to our customers by offering quality services and personalized attention to detail.</p>
</section>
<section class="destinations">
<h2>Destinations</h2>
<div class="destination">
<img src="images/destination1.jpg" alt="destination1">
<h3>New York</h3>
<p>Discover the diverse culture and iconic landmarks of the Big Apple with our rental cars.</p>
<button>Book Now</button>
</div>
<div class="destination">
<img src="images/destination2.jpg" alt="destination2">
<h3>Paris</h3>
<p>Experience the romantic charm and artistic heritage of the City of Love on your own schedule.</p>
<button>Book Now</button>
</div>
<div class="destination">
<img src="images/destination3.jpg" alt="destination3">
<h3>Tokyo</h3>
<p>Explore the futuristic cityscape and rich cultural traditions of the Land of the Rising Sun.</p>
<button>Book Now</button>
</div>
</section>
<section class="blog">
<h2>From Our Blog</h2>
<div class="blog-post">
<img src="images/blog1.jpg" alt="blog1">
<h3>5 Tips for Stress-Free Car Rentals</h3>
<p>Here are some useful tips to help you navigate through the car rental process and avoid unnecessary stress during your trip.</p>
<button>Read More</button>
</div>
<div class="blog-post">
<img src="images/blog2.jpg" alt="blog2">
<h3>Top 10 Best Road Trip Destinations in the World</h3>
<p>If you're planning a road trip and want to explore some of the world's most stunning natural landscapes, check out our list of top 10 destinations.</p>
<button>Read More</button>
</div>
<div class="blog-post">
<img src="images/blog3.jpg" alt="blog3">
<h3>How to Pack for a Car Rental Trip</h3>
<p>Here are some practical tips on what to bring and what to leave behind when packing for your upcoming car rental trip.</p>
<button>Read More</button>
</div>
</section>
<section class="contact-us">
<h2>Contact Us</h2>
<div class="contact-info">
<div>
<i class="fa fa-map-marker"></i>
<p>123 Main St., Suite 101<br>Anytown, USA 12345</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>1-800-CAR-VACA<br>1-800-227-8222</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p>vacations@car-vacation.com</p>
</div>
</div>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button>Send Message</button>
</form>
</section>
<footer>
<p>© 2022 Car Vacation. All rights reserved.</p>
</footer>
</body>
</html>
阅读全文