开发者学堂课程【移动 Web 前端开发:准备-流式布局】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8395
准备-流式布局
一、准备-流式布局介绍
新建一个项目名为 jdMsite(尽可能使用英文目录和名字)
用 WebStom打开,在目录中新建一个 demo 文件夹,专门用来讲解从事移动 web 开发所遇到的问题。
先做一个经典网页布局:
<body>
<div class= "container"></div>
<body>
接着写入:
<style>
body{
margin: 0;
top: 0;
}
container{
-
width: 1200px;
height: 1200px;
background: red;
margin: 0 auto;
}
</sty1e>
经典页面布局就完成了。
对于移动端,做成非固定布局,只需要:
width:100%
接着写入一些内容,这时候缩小屏幕里边内容没有少,但是会发生自适应,意味着版本容器默认有让内容自适应的功能。
它的特点是:
(1)内容是流动的
(2)当进行网页尺寸改变的时候,网页的内容和液体一样向两侧填充。
这种叫做流式布局,也叫百分比自适应布局。
流式布局:
非固定像素布局,
内容自适应
像液体一样向两侧填充