写一个类似于用手机看电影的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吗
网友评论