电影列表页面总结

写一个类似于用手机看电影的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进行定位。

图片发自简书App

图片发自简书App

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;

图片发自简书App

图片发自简书App


4.电影列表

    .body式为了设置中间电影列表的高度,因为头部和底部都是固定定位没有高度,以免电影列表部分的上部分或者下部分被覆盖所以使用.body

    moveItem里面有两个div分别是img_left(电影图片)和content_right(文字说明),为了使这两部分左右居中使用

display: flex;

flex-direction: row;

图片发自简书App

图片发自简书App

有不对的希望多多指教(ヾノ•᷅ ༬•᷄ )噗!

:: ೖ(⑅σ̑ᴗσ̑)ೖ ::你有freestyle吗

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,585评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,703评论 0 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,830评论 0 2
  • 炽热最先感受到的永远是冰冷! 4.13,4月以来的第一个好天气,太阳那么大,铺满整个办公室,沉寂又萌生躁动,又想起...
    Mars超时空要塞阅读 429评论 0 0