Ctrip mobile terminal home page

Access to the address

Official Map Preview

1. Technology selection

Solution: We took a separate mobile page solution

Technique: Use flex layout

2. Set up the page folder structure

3. Set viewport labels and introduce initialization styles

<meta name="viewport" content="width=device-width, Initial - scale = 1.0, user - scalable = no, maximum - scale = 1.0, the minimum - scale = 1.0 ">Copy the code

4. Common initialization styles

  • Set maximum width
  • Set minimum width
body { max-width: 540px; min-width: 320px; margin: 0 auto; Font: normal 14px/1.5 Tahoma, "Lucida Grande",Verdana,"Microsoft Yahei",STXihei; color: #000; background: #f2f2f2; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }Copy the code

6. Home page layout analysis

From top to bottom:

  • Search module (fixed at top)
  • Main airplane module
  • Content module
  • The banner module
  • Bottom navigation bar module (fixed at the bottom)

Note: Width is adaptive, height is fixed

7. Common Flex layout ideas

How do you make a top-down structure in a box

  1. Set the parent box (display: flex)
  2. Each box is equally divided (Flex: 1)
  3. Set the main axis to the Y-axis (flex-direction: column;)
  4. Align side axes to center (align-items: center)

8. Final effect

9. All code

Click to download