寫一個類似于用手機看電影的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進行定位。
3.底部
? ? 一個div里面嵌套兩個div,圖標跟文字在同一個div里面
? ? .bottom設置固定屬性，將bottom里面的兩個item設置為橫排使用display:flex;flex-direction: row;
? ? 因為a標簽里面包含一個圖標和一個文字說明，為了使兩個上下排列并且左右居中使用
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
4.電影列表
? ? .body式為了設置中間電影列表的高度，因為頭部和底部都是固定定位沒有高度，以免電影列表部分的上部分或者下部分被覆蓋所以使用.body
? ? moveItem里面有兩個div分別是img_left(電影圖片)和content_right（文字說明）,為了使這兩部分左右居中使用
display: flex;
flex-direction: row;
有不對的希望多多指教(ヾ??? ??? )噗!
:: ?(?σ??σ?)? ::你有freestyle嗎
