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

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


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


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


一、介绍

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

二、注意事项

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

三、简单举例

样式如图

【60】移动WEB开发(7)——布局常见方式①流式布局(附实践案例)_第1张图片

代码如下


<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布局

你可能感兴趣的:(前端学习中,css,html,web,移动开发)