准备-流式布局 |学习笔记

简介: 快速学习 准备-流式布局

开发者学堂课程【移动 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)当进行网页尺寸改变的时候,网页的内容和液体一样向两侧填充。

这种叫做流式布局,也叫百分比自适应布局。

流式布局:

非固定像素布局,

内容自适应

像液体一样向两侧填充

相关文章
|
6月前
|
前端开发 容器
前端CSS居中布局
前端CSS居中布局
63 0
|
7月前
|
前端开发 容器
前端页面布局之【Flex布局】详解
前端页面布局之【Flex布局】详解
80 0
|
14天前
|
前端开发
前端三栏布局(包括圣杯,双飞翼)
前端三栏布局(包括圣杯,双飞翼)
|
5月前
|
Android开发
Android Studio入门之常用布局的讲解以及实战(附源码 超详细必看)(包括线性布局、权重布局、相对布局、网格布局、滚动视图 )
Android Studio入门之常用布局的讲解以及实战(附源码 超详细必看)(包括线性布局、权重布局、相对布局、网格布局、滚动视图 )
161 0
|
1月前
|
前端开发
【零基础入门前端系列】—圆角和阴影(二十一)
【零基础入门前端系列】—圆角和阴影(二十一)
|
5月前
移动端开发—流式布局
移动端开发—流式布局
|
6月前
|
前端开发 容器
前端CSS居中布局(上)
前端CSS居中布局
36 0
|
6月前
|
前端开发 开发者 容器
前端CSS居中布局(下)
前端CSS居中布局
38 0
|
7月前
|
UED 容器
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
45 0
|
9月前
|
前端开发
前端经典圣杯布局和双飞翼布局
圣杯布局和双飞翼布局解决的问题是一样的 就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染
74 0