当前位置：主页 > 查看内容

【60】移动WEB开发(7)——布局常见方式①流式布局（附实践案例）

发布时间：2021-08-02 00:00| 有 位朋友查看

简介：★文章内容学习来源拉勾教育大前端就业集训营 本篇学习目标了解流式布局方法 目录 一、介绍 二、注意事项 三、简单举例 四 、实践 一、介绍 流式布局也称为百分比布局、非固定像素布局 实现方式通过将盒子的宽度设置为百分比从而实现屏幕宽度变化其盒子宽度……

★文章内容学习来源：拉勾教育大前端就业集训营

本篇学习目标：了解流式布局方法

目录：
一、介绍
二、注意事项
三、简单举例
四 、实践

一、介绍

  • 流式布局：也称为百分比布局、非固定像素布局；
  • 实现方式：通过将盒子的宽度设置为百分比，从而实现屏幕宽度变化其盒子宽度也相应变化，不受固定像素限制；
  • 是移动web开发常见的布局方式。

二、注意事项

  • 制作时要设置页面支持的最大、最小宽度；
/*比如*/
max-width:540px;
min-width:320px;

三、简单举例

样式如图

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流式布局简单举例</title>
    <style>
        body {
            max-width: 750px;
            min-height: 320px;
        }
        section {
            width: 100%;
            height: 300px;
            background-color: hotpink;
            margin: 0 auto;
        }
        section div {
            float: left;
            height: 300px;
            width: 50%;
            border: 20px solid skyblue;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>
</html>

四 、实践

具体可查看我上传的资源：
用流式布局实现一个京东移动端.zip

下篇继续：【61】移动WEB开发(8)——布局常见方式②flex布局

；原文链接：https://blog.csdn.net/weixin_47640160/article/details/115752476
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：JavaScript web编程 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐