【携程网教程】轻松攻克携程网制作技术，get开发技能

前端

2024-01-19 18:39:25

打造属于自己的携程网：零基础到精通的网页开发指南

掌握 HTML 和 CSS 的基础

踏上构建携程网的旅程之前，夯实 HTML 和 CSS 的基础至关重要。HTML 是网页的骨架，负责定义内容和结构，而 CSS 则是美化网页，控制字体、颜色和布局的利器。

认识 Flex 布局

Flex 布局是 CSS 布局的一大法宝，它允许开发者轻松创建灵活且响应式的布局。几个关键属性包括：

flex-direction： 定义 flex 容器中项目的排列方向。
justify-content： 控制项目在水平方向上的对齐方式。
align-items： 控制项目在垂直方向上的对齐方式。

逐步构建携程网

1. 搜索模块：

搜索功能是携程网的核心。使用 flex 布局，轻松打造搜索栏和搜索按钮。

<div class="search-index">
  <input type="text" placeholder="输入目的地或酒店名称">
  <button>搜索</button>
</div>

.search-index {
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="text"] {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
}

button {
  width: 80px;
  height: 30px;
  background-color: #f00;
  color: #fff;
  border: none;
}

2. 重点图片模块：

突出展示推荐的目的地或酒店，使用 flex 布局创建图片轮播。

<div class="focus">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.focus {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 200px;
  height: 200px;
  margin: 10px;
}

3. 侧导航栏：

提供旅游目的地或酒店分类的快速访问，使用 flex 布局创建侧导航栏。

<div class="subnav-entry">
  <ul>
    <li>国内游</li>
    <li>出境游</li>
    <li>酒店</li>
    <li>机票</li>
    <li>火车票</li>
  </ul>
</div>

.subnav-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ccc;
  color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
}

4. 本地导航栏：

显示当前页面或位置，使用 flex 布局创建本地导航栏。

<div class="local-nav">
  <a href="/">首页</a>
  <a href="/hotel">酒店</a>
  <a href="/flight">机票</a>
  <a href="/train">火车票</a>
</div>

.local-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ccc;
  color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
}

5. 销售模块：

展示正在进行的促销活动，使用 flex 布局创建销售模块。

<div class="sales-box">
  <div>
    <h3>限时特惠</h3>
    <p>预订机票立减100元</p>
  </div>
  <div>
    <h3>酒店大促</h3>
    <p>预订酒店立减200元</p>
  </div>
</div>

.sales-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sales-box div {
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
  border: 1px solid #ccc;
}

h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

p {
  font-size: 14px;
  margin: 0;
}

6. 移动端适配：

为迎合移动端较小的屏幕，需要确保携程网具有响应式设计。使用媒体查询实现移动端自适应布局。

@media screen and (max-width: 768px) {
  .search-index {
    flex-direction: column;
  }

  .focus {
    flex-direction: column;
  }

  .subnav-entry {
    flex-direction: row;
  }

  .local-nav {
    flex-direction: row;
  }

  .sales-box {
    flex-direction: column;
  }
}