Day31-32 學習筆記
4月2號-3號運用flex佈局製作攜程移動端首頁專案。
下面是學習筆記。分為兩個部分：一個是根據直播做的截圖筆記（已製作為PDF檔案），另一部分是重點筆記（內容更精簡）。下面全部分享出來，一方面督促自己學習，另一方面歡迎大家交流分享~
截圖筆記2021_04_02。pdf20210402重點筆記 總結：flex佈局攜程移動端專案。pdf
攜程移動端首頁專案程式碼也放在這裡：
連結：
https：//
pan。baidu。com/s/1WPnG-C
Vu_iAoI2exjuLhcw
提取碼：3wqh
複製這段內容後開啟百度網盤手機App，操作更方便哦
flex佈局製作常見的樣式
如下圖所示，之前在拉勾網專案中也有類似的佈局結構，當時使用module-box製作公共樣式進行浮動的。這裡可以用flex佈局更加簡單：
HTML程式碼如下：
<！—— subnav-entry區域 ——>
<
ul
class
=
“subnav-entry”
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
自由行
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
WiFi電話卡
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
保險·簽證
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
換鈔·購物
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
嚮導·包車
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
特價機票
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
禮品卡
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
申卡·借錢
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
社群
span
>
a
>
li
>
<
li
><
a
href
=
“#”
><
i
>
i
><
span
>
更多
span
>
a
>
li
>
ul
>
<！—— subnav-entry區域結束 ——>
CSS程式碼如下：
/* subnav-entry區域 */
。
subnav-entry
{
display
：
flex
；
flex-wrap
：
wrap
；
margin
：
0
12
px
12
px
；
}
。
subnav-entry
li
{
width
：
20
%
；
}
。
subnav-entry
li
a
{
display
：
flex
；
flex-direction
：
column
；
align-items
：
center
；
width
：
100
%
；
font-size
：
12
px
；
line-height
：
12
px
；
}
。
subnav-entry
li
a
i
{
width
：
28
px
；
height
：
28
px
；
margin
：
10
px
0
5
px
；
background
：
url
（
。。/images/subnav-bg。png
）
no-repeat
6
px
-137
px
；
background-size
：
24
px
auto
；
}
。
subnav-entry
li
：
nth-child
（
2
）
a
i
{
background-position
：
3
px
5
px
；
}
。
subnav-entry
li
：
nth-child
（
3
）
a
i
{
background-position
：
5
px
-22
px
；
}
。
subnav-entry
li
：
nth-child
（
4
）
a
i
{
background-position
：
3。5
px
-272。5
px
；
}
。
subnav-entry
li
：
nth-child
（
5
）
a
i
{
background-position
：
3
px
-81。5
px
；
}
。
subnav-entry
li
：
nth-child
（
6
）
a
i
{
background-position
：
3
px
-166。5
px
；
}
。
subnav-entry
li
：
nth-child
（
7
）
a
i
{
background-position
：
3
px
-109
px
；
}
。
subnav-entry
li
：
nth-child
（
8
）
a
i
{
background-position
：
3
px
-194
px
；
}
。
subnav-entry
li
：
nth-child
（
9
）
a
i
{
background-position
：
2
px
-219。5
px
；
}
。
subnav-entry
li
：
nth-child
（
10
）
a
i
{
background-position
：
6
px
-244
px
；
}
二倍精靈圖插入方式
在FW中鎖定精靈圖，然後點選上方控制面板中的“修改”——“畫布”——“影象大小”，如下圖所示：
將原圖（二倍圖）尺寸修改為原來的一半，如下圖所示：
點選確定。再在FW中將所需要的圖案進行切片，CSS中插入背景圖的位置取切片x，y軸的值取負。最後不要忘記設定background-size： 24px auto；
下一篇：我要怎麼辦？請告訴我？
