帮我写一个泡泡旅游网的代码模板
以下是一个泡泡旅游网的简单代码模板：
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>
<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>
</ul>
</nav>
<div class="hero">
<h1>欢迎来到泡泡旅游网</h1>
<p>发现更多美丽的地方，开启奇妙的旅程</p>
<a href="#" class="btn">开始探索</a>
</div>
</header>
<main>
<section class="about">
<h2>关于我们</h2>
<p>泡泡旅游网是一个专注于旅游的网站，提供各种旅游信息、攻略和优惠机票等服务。我们的目标是让每个人都能享受到美妙的旅行体验。</p>
<a href="#" class="btn">了解更多</a>
</section>
<section class="services">
<h2>我们的服务</h2>
<div class="service-container">
<div class="service">
<img src="images/flights.jpg" alt="机票">
<h3>机票预订</h3>
<p>提供各种航班的机票预订服务，价格优惠，方便快捷。</p>
</div>
<div class="service">
<img src="images/hotels.jpg" alt="酒店">
<h3>酒店预订</h3>
<p>提供各类酒店的预订服务，包括五星级、度假村等。</p>
</div>
<div class="service">
<img src="images/tours.jpg" alt="旅游团">
<h3>旅游团预订</h3>
<p>提供各种主题的旅游团预订服务，包括文化、自然、探险等。</p>
</div>
</div>
</section>
<section class="testimonials">
<h2>客户评价</h2>
<div class="testimonial-container">
<div class="testimonial">
<img src="images/person1.jpg" alt="客户头像">
<p>非常感谢泡泡旅游网提供的优质服务，让我的旅行变得更加顺利愉快。</p>
<h4>张先生</h4>
</div>
<div class="testimonial">
<img src="images/person2.jpg" alt="客户头像">
<p>我在泡泡旅游网订购了一次旅游团，非常棒的体验，下次还会继续选择。</p>
<h4>李女士</h4>
</div>
</div>
</section>
</main>
<footer>
<p>© 2021 泡泡旅游网</p>
</footer>
</body>
</html>
CSS：
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #f7f7f7;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 导航栏样式 */
header {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
color: #333;
text-decoration: none;
}
nav ul li a:hover {
color: #f60;
}
.hero {
background-image: url(images/hero.jpg);
background-size: cover;
background-position: center;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
.hero h1 {
font-size: 60px;
margin-bottom: 20px;
}
.hero p {
font-size: 24px;
margin-bottom: 40px;
}
.btn {
background-color: #f60;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
.btn:hover {
background-color: #ff9933;
}
/* 关于我们样式 */
.about {
background-color: #fff;
padding: 80px 20px;
text-align: center;
}
.about h2 {
font-size: 36px;
margin-bottom: 40px;
}
/* 服务样式 */
.services {
background-color: #f7f7f7;
padding: 80px 20px;
text-align: center;
}
.services h2 {
font-size: 36px;
margin-bottom: 40px;
}
.service-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.service {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 40px;
margin: 20px;
max-width: 300px;
}
.service img {
max-width: 100%;
margin-bottom: 20px;
}
.service h3 {
font-size: 24px;
margin-bottom: 20px;
}
.service p {
font-size: 16px;
line-height: 1.5;
}
/* 客户评价样式 */
.testimonials {
background-color: #fff;
padding: 80px 20px;
text-align: center;
}
.testimonials h2 {
font-size: 36px;
margin-bottom: 40px;
}
.testimonial-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.testimonial {
background-color: #f7f7f7;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 40px;
margin: 20px;
max-width: 400px;
}
.testimonial img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 20px;
}
.testimonial p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.testimonial h4 {
font-size: 20px;
color: #999;
}
/* 页脚样式 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
原文地址: https://www.cveoy.top/t/topic/bBNq 著作权归作者所有。请勿转载和采集!