21xrx.com
2025-03-26 17:53:34 Wednesday
文章检索 我的文章 写文章
制作一个五页的旅游网站——HTML+CSS+JavaScript实践
2023-06-18 04:00:50 深夜i     13     0

制作一个五页的旅游网站——HTML+CSS+JavaScript实践

在这个数字化时代，随着人们旅游需求的不断增加，一个完美的旅游网站显得尤为重要。为此，我们可以使用HTML、CSS和JavaScript来构建一个完整的旅游网站，以展示各种旅游目的地、餐厅、住宿和活动等信息。下面我们将详细介绍五个页面的设计及实现过程。

1.首页设计

我们的旅游网站应当以很好的用户体验为初始点，从而为游客带来温馨舒适的游览体验。因此，我们的网站首页应该是引人入胜，吸引游客进一步了解我们的网站。首页应该包括背景图片、公司logo、导航链接、特色活动和陈列某些著名城市或国家的图片等。

展示了网站首页的HTML布局和CSS样式：

旅游网站 | Home
   
 
  

     
 欢迎光临我们的旅游网站
     
 
        
  
           
   首页
           
   目的地
           
   住宿
           
   餐饮
           
   联系我们
         
  
      
 
   

  

     
 最佳旅行：寻找您的下一个大冒险
     
 通过我们的网站发现世界各地最佳的旅行目的地和活动，在寻找下一次大冒险之旅时提供灵感。
     查看目的地
   

  

     
 
        
        
  纽约市
        
  自由之城
        查看更多
      
 
     
 
        
        
  巴黎
        
  爱情之城
        查看更多
      
 
     
 
        
        
  东京
        
  魅力之都
        查看更多
      
 
   

  

     
 © 2021 旅游网站. 版权所有。

下面是用CSS样式装饰的首页设计：

header {
  background-color: #fff;
  color: #333;
  padding: 15px;
  text-align: center;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
}
header h1
  margin-top: 0;
  font-size: 36px;
  line-height: 1;
  font-weight: normal;
  margin-bottom: 0;
nav ul
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
nav li
  display: inline-block;
  margin-right: 20px;
nav li a
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: 300;
  transition: 0.2s color;
nav li a:hover
  color: #1abc9c;
#main {
  background-image: url(img/globe.jpg);
  background-size: cover;
  background-position: center center;
  color: #fff;
  text-align: center;
}
#main h2
  margin-top: 0;
  font-size: 48px;
  font-weight: normal;
#main p
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 300;
.cta
  display: inline-block;
  background-color: #333;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  padding: 15px 30px;
  border-radius: 3px;
  transition: 0.2s background-color;
  text-decoration: none;
.cta:hover
  background-color: #1abc9c;
#featured
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
#featured article
  margin-right: 50px;
#featured article:last-of-type
  margin-right: 0;
#featured img
  width: 350px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
#featured h3
  margin-top: 0;
  font-size: 28px;
  font-weight: normal;
  margin-bottom: 0;
#featured p
  margin-top: 0;
  font-size: 24px;
  font-weight: 300;
#featured a
  display: inline-block;
  background-color: #333;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  padding: 10px 20px;
  border-radius: 3px;
  transition: 0.2s background-color;
  text-decoration: none;
#featured a:hover
  background-color: #1abc9c;

2.目的地页面设计

在目的地页面中，我们需要为游客制作详细的介绍和与城市相关的信息。我们可以使用CSS网格布局将这些信息呈现出来，并提供详细的城市介绍、地图等。如下面的HTML内容所示：

旅游网站 | 目的地
   
 
  

     
 旅游网站
     
 
        
  
           
   首页
           
   目的地
           
   住宿
           
   餐饮
           
   联系我们
         
  
      
 
   

  

     
 目的地：巴黎
     
 
        
  
           
           
   什么是巴黎
           
   巴黎是法国最大、人口最多、最富有、政治、经济、文化中心和交通枢纽。
         
  
        
  
           
           
   城市地图
           
   巴黎是一个非常大的城市，因此有一张地图是游客的良好参考。
         
  
        
  
           
           
   法国美食
           
   对于每个游客来说，品尝法国文化中的美食是必不可少的体验之一。
         
  
        
  
           
           
   巴黎酒店
           
   在住宿方面，巴黎拥有多种类型的酒店，从便宜到奢华，无论预算大小都能帮助您找到理想的住宿地点。
         
  
        
  
           
           
   旅游景点
           
   巴黎也是全世界最受欢迎的旅游城市之一，因此必须提到参观旅游景点。
         
  
      
 
   

  

     
 © 2021 旅游网站. 版权所有。

下面是目的地页面的CSS样式设计：

header {
  background-color: #fff;
  color: #333;
  padding: 15px;
  text-align: center;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
}
header h1
  margin-top: 0;
  font-size: 36px;
  line-height: 1;
  font-weight: normal;
  margin-bottom: 0;
nav ul
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
nav li
  display: inline-block;
  margin-right: 20px;
nav li a
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: 300;
  transition: 0.2s color;
nav li a:hover
  color: #1abc9c;
#destination-content
  text-align: center;
  padding: 50px 0;
#destination-content h2
  margin-top: 0;
  font-size: 48px;
  font-weight: normal;
  margin-bottom: 20px;
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}
.grid-item img
  width: 100%;
  height: auto;
  margin-bottom: 10px;
.grid-item h3
  font-size: 24px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 10px;
.grid-item p
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;

3.住宿页面设计

住宿页面的设计应该更加专注于各种酒店和客房、预订信息、价格等内容。我们可以使用照片墙等元素设置背景，以使页面看起来更现代和引人入胜。如下面的HTML内容所示：

旅游网站 | 住宿
   
 
  

     
 旅游网站
     
 
        
  
           
   首页
           
   目的地
           
   住宿
           
   餐饮
           
   联系我们
         
  
      
 
   

  

     
 住宿
     
 
     
 
        
  
           
           
   酒店1
           
   不同类型的房间，每个人都有合适的选择。
           查看预订信息
         
  
        
  
           
           
   酒店2
           
   高档酒店的现代化方式。
           查看预订信息
         
  
        
  
           
           
   酒店3
           
   享受奢华五星级服务的酒店。
           查看预订信息
         
  
        
  
           
           
   酒店4
           
   充满异国情调的酒店。
           查看预订信息
         
  
        
  
           
           
   酒店5
           
   带给您最放松、惬意的宁静。
           查看预订信息
         
  
        
  
           
           
   酒店6
           
   在这家让你想要停留一个晚上或更长时间的酒店里度过一个假期。
           查看预订信息
         
  
      
 
   

  

     
 © 2021 旅游网站. 版权所有。

下面是住宿页面的CSS样式设计：

header {
  background-color: #fff;
  color: #333;
  padding: 15px;
  text-align: center;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
}
header h1
  margin-top: 0;
  font-size: 36px;
  line-height: 1;
  font-weight: normal;
  margin-bottom: 0;
nav ul
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
nav li
  display: inline-block;
  margin-right: 20px;
nav li a
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: 300;
  transition: 0.2s color;
nav li a:hover
  color: #1abc9c;
#hotel-content
  text-align: center;
  padding: 50px 0;
#hotel-content h2
  margin-top: 0;
  font-size: 48px;
  font-weight: normal;
  margin-bottom: 40px;
#photo-wall {
  background-image: url(img/hotel-bg.jpg);
  background-size: cover;
  height: 400px;
}
#hotel-list
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
#hotel-list article
  margin: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
#hotel-list img
  width: 100%;
  height: auto;
  margin-bottom: 10px;
#hotel-list h3
  font-size: 28px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 10px;
#hotel-list p
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 20px;
#hotel-list a
  display: inline-block;
  background-color: #333;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  padding: 10px 20px;
  border-radius: 3px;
  transition: 0.2s background-color;
  text-decoration: none;
#hotel-list a:hover
  background-color: #1abc9c;

4.餐饮页面设计

在餐饮页面中，

  
  

评论区