寫一個類似于用手機(jī)看電影的app首頁的電影列表項
1.寫個基本的html樣式
注意：要添加<meta name="viewport" content="width=device-width,initial-scale=1.0">表示滿屏关带，防止頁面左右滑動逗余。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
? ? *{
? ? ? ? padding:0px;
? ? ? ? margin:0px;
? ? ? ? list-style-type:none;
}
</style>
</head>
<body></body>
</html>
2.寫頭部
? ? ? ? .top使用position:fixed;使頭部變成固定定位锥忿，在上下滑動的時候渔隶，不隨頁面的滑動而滑動 使用line-height可以使文字上下居中邀摆，前提是給height纵顾。
? ? ? ? .right使用position:absolute;使...部分變成絕對定位，絕對定位的寬與高為0栋盹，不原來占用位置施逾，向上移動，因為.top使用了position:fixed;所以.right以.top進(jìn)行定位例获。
3.底部
? ? 一個div里面嵌套兩個div,圖標(biāo)跟文字在同一個div里面
? ? .bottom設(shè)置固定屬性汉额，將bottom里面的兩個item設(shè)置為橫排使用display:flex;flex-direction: row;
? ? 因為a標(biāo)簽里面包含一個圖標(biāo)和一個文字說明，為了使兩個上下排列并且左右居中使用
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
4.電影列表
? ? .body式為了設(shè)置中間電影列表的高度榨汤，因為頭部和底部都是固定定位沒有高度蠕搜，以免電影列表部分的上部分或者下部分被覆蓋所以使用.body
? ? moveItem里面有兩個div分別是img_left(電影圖片)和content_right（文字說明）,為了使這兩部分左右居中使用
display: flex;
flex-direction: row;
有不對的希望多多指教(ヾ??? ??? )噗!
:: ?(?σ??σ?)? ::你有freestyle嗎
