攜程網首頁

一、初始設定

1.1 新增meta標籤

1.2 初始化樣式

• body {...}

• 特殊樣式

  • css3盒模型: box-sizing

  • 點選高亮: * {-webkit-tap-highlight-color}

  • ios給按鈕和輸入框加自定義樣式: input {-webkit-appearance: none;}

  • 禁用長按頁面彈出選單: img, a {-webkit-touch-callout: none;}

1.3 常見模組命名

二、開始製作

2.1 搜尋框佈局

• 使用flex讓左登入框固定大小，左側flex1，並且設定父元素align-items: center;

• 搜尋圖示使用二倍精靈圖+絕對定位

• div > (div > span) + div

flex佈局思路 - 上圖下文

• 把側軸設為主軸, 加上垂直水平居中

2.2 焦點圖佈局

2.2.1 結構

• (div::after) > a > img

2.2.2 結構作用

• 父容器div設定寬為150%以達到下部分圓弧效果，然後再用transform平移回來（注意這裡不是25%）

• 偽元素after做虛化背景

2.3 local-nav

• 可以設定margin-top為負數來蓋住焦點圖

• 裡面用ul > li > a來佈局, a裡面的用上面說的上圖下文思路來進行佈局

2.4 nav 公共導航部分

• nav > div > a > span

• 每個div都是一行(背景色,漸變弄在這), 設定border-bottom

• 然後每一個a根據具體情況設定flex和border-left

• 遇到背景漸變色不同的先設定父元素然後子元素單獨設定

2.5 nav特殊結構佈局

• 修改元素的flex, 並根據flex來設定總的bgc

• 因為值不統一, 只在子元素設定

• 設定bg的時候url與顏色16進位制都代表背景圖, 後者會覆蓋前者

2.6 subnav-entry佈局

• 背景圖在精靈圖裡面的位置不夠的時候, 可以選取x/y為正數的時候, 一表示為空的背景

• 讓flex佈局在一多條主軸上顯示, 使用流式佈局方式(百分比)

2.7 熱門活動佈局頂部

• div> (h2 > i) + a

• flex佈局設定一左一右可以使用space-between

• 利用元素邊框border + 2D轉換transform製作小箭頭

2.8 熱門活動佈局底部

• div > a*2 > img + span

三、總結

• ① flex佈局原理：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式

• ② flex佈局常用父項、子項屬性