• iphonex为模板的自适应


    HTML代码

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script>
    !(function (win, doc) {
    function setFontSize() {
    var winWidth = window.innerWidth;
    doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
    }
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    var timer = null;
    win.addEventListener(evt, function () {
    clearTimeout(timer);
    timer = setTimeout(setFontSize, 300);
    }, false);
    win.addEventListener("pageshow", function (e) {
    if (e.persisted) {
    clearTimeout(timer);
    timer = setTimeout(setFontSize, 300);
    }
    }, false);
    //初始化
    setFontSize();
    }(window, document));
    </script>
    </head>
    <body>
    <div class="title">
    <div class="search">
    <div class="search-1"><img src="waiting_search.png" alt=""></div>
    <form action="">
    <input type="text" placeholder="找影视剧,找人,影院">
    </form>
    </div>
    </div>

    <div class="daoh">
    <div class="tb">
    <img src="find_icon01.png" alt="">
    <p>今日TOP10</p>
    </div>
    <div class="tb">
    <img src="find_icon02.png" alt="">
    <p>影视快讯</p>
    </div>
    <div class="tb">
    <img src="find_icon03.png" alt="">
    <p>好片推荐</p>
    </div>
    <div class="tb">
    <img src="find_icon04.png" alt="">
    <p>预告片速递</p>
    </div>
    <div class="tb">
    <img src="find_icon05.png" alt="">
    <p>大咖来了</p>
    </div>
    <div class="tb">
    <img src="find_icon06.png" alt="">
    <p>美图</p>
    </div>
    <div class="tb">
    <img src="find_icon07.png" alt="">
    <p>周边商城</p>
    </div>
    <div class="tb">
    <img src="find_icon08.png" alt="">
    <p>实时票房</p>
    </div>
    </div>


    <div class="day">
    <span>今天</span>
    </div>


    <div class="box1">
    <p>电影扫地僧:心理研究者谈《惊天破》犯罪心理学套路</p>
    <div class="pic">
    <img src="app_discover_3_03.png" alt="">
    <img src="app_discover_5_03.png" alt="">
    <img src="app_discover_5_08_05.png" alt="">
    </div>
    <div class="zuozhe">
    <span>电影扫地僧</span>
    <img style="margin-left:4.5rem;" src="view.png" alt="">
    <span>1875</span>
    <img src="消息.png" alt="">
    <span>6131</span>
    </div>
    </div>

    <div class="box2">
    <img style="height:3.4rem" src="app_discover_3_03.png" alt="">
    <div class="box21">
    <p>《全世界》超7.86亿,闯国产爱情电影票房新纪录</p>
    <span>猫眼资讯</span>
    <img style="margin-left:2rem;" src="view.png" alt="">
    <span>1024</span>
    <img src="消息.png" alt="">
    <span>13</span>
    </div>
    </div>

    <div class="box2">
    <img style="height:3.4rem" src="app_discover_11_03.png" alt="">
    <div class="box21">
    <p>王菲有望献综艺首秀,节目记录演唱会诞生你过程</p>
    <span>影讯速报</span>
    <img style="margin-left:2rem;" src="view.png" alt="">
    <span>55</span>
    <img src="消息.png" alt="">
    <span>1</span>
    </div>
    </div>


    <div class="box1">
    <p>能写满分作文的明星,除了胡歌,还有王凯董子健吴秀波</p>
    <div class="pic">
    <img src="app_discover_4_03.png" alt="">
    <img src="app_discover_4_05.png" alt="">
    <img src="app_discover_5_07.png" alt="">
    </div>
    <div class="zuozhe">
    <span>毒药</span>
    <img style="margin-left:4.5rem;" src="view.png" alt="">
    <span>134</span>
    <img src="消息.png" alt="">
    <span>0</span>
    </div>
    </div>


    <div class="box1">
    <p>今年最棒的韩国片在豆瓣只有5分,这绝对是千古奇冤</p>
    <div class="pic">
    <img src="app_discover_4_12.png" alt="">
    <img src="app_discover_4_13.png" alt="">
    <img src="app_discover_4_14.png" alt="">
    </div>
    <div class="zuozhe">
    <span>虹膜</span>
    <img style="margin-left:4.5rem;" src="view.png" alt="">
    <span>226</span>
    <img src="消息.png" alt="">
    <span>0</span>
    </div>
    </div>


    <div class="box1">
    <p>张嘉佳是要拿这部片子来谋害王家卫和梁朝伟吗?</p>
    <div class="pic">
    <img src="app_discover_4_05_033_03.png" alt="">
    <img src="app_discover_11_06.png" alt="">
    <img src="app_discover_11_08.png" alt="">
    </div>
    <div class="zuozhe">
    <span>毒药</span>
    <img style="margin-left:4.5rem;" src="view.png" alt="">
    <span>185</span>
    <img src="消息.png" alt="">
    <span>0</span>
    </div>
    </div>




    <div class="box2">
    <img style="height:3.4rem" src="app_discover_4_07.png" alt="">
    <div class="box21">
    <p>刘强东朋友圈发飙:谁再提“奶茶妹妹”我跟谁急</p>
    <span>影讯速报</span>
    <img style="margin-left:2rem;" src="view.png" alt="">
    <span>700</span>
    <img src="消息.png" alt="">
    <span>10</span>
    </div>
    </div>



    <div class="foot">
    <div class="tb"><a href="../电影-待映/daiying.html"><img src="movie_icon_02.png" alt="">电影</a></div>
    <div class="tb"><a href="../影院/index.html"><img src="cinema_icon_01.png" alt="">影院</a></div>
    <div class="tb"><a href=""><img src="find_icon_02.png" alt="">发现</a></div>
    <div class="tb"><a href="../我的/index.html"><img src="mine_icon_01.png" alt="">我的</a></div>
    </div>
    </body>
    </html>
  • 相关阅读:
    【赵强老师】使用Docker Compose进行服务编排
    【赵强老师】Weblogic域和域的组成
    【赵强老师】管理Docker镜像
    3. 清理统一审计 AUD$UNIFIED 基表部份数据
    4. AUD$UNIFIED 基表及 分区键创建索引
    2.更改统一审计AUD$UNIFIED基表 默认表空间
    1.更改统一审计AUD$UNIFIED 分区为1天
    9. 将APEX18.2 升级到 APEX19.2 详细步骤
    1.2 安装中文语言包
    通过VBOX 导入系统工具 搭建APEX开发环境
  • 原文地址:https://www.cnblogs.com/gao2/p/11375349.html
Copyright © 2020-2023  润新知