CSS基本布局16例

2019独角兽企业重金招聘Python工程师标准>>>

单行单列

单行单列1：采用float浮在左上角，固定宽度。
单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。
单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。
单行单列4(推荐)：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。

单行两列

单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。
单行两列2：两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边。
单行两列3：两列都百分比宽度，满屏。两列都采用绝对定位。
单行两列4：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在右上角。
单行两列5：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在第一列右边。

单行三列

单行三列1：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。
单行三列2：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。
单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。
单行三列4(推荐)：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。
单行三列5：左右列绝对定位，中间列自适应。宽度满屏。

顶行三列

顶行三列1(推荐)：顶行自适应页面宽度。左右列绝对定位，中间列自适应页面。
顶行三列2：宽度满屏

转载于:https://my.oschina.net/wanglei01hr/blog/174839

CSS基本布局16例相关推荐

CSS基本布局16例（原网页引自Owen Briggs）
以下布局资料原作者:Owen Briggs 单行单列单行单列1:采用float浮在左上角,固定宽度. 单行单列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位. 单行单列3:固定在左 ...
css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
css 网格布局_CSS网格布局三年
css 网格布局 As I was updating my slides for An Event Apart in San Francisco, I realised how much comple ...
CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
CSS 主流布局进阶
CSS 主流布局进阶前言一.CSS 还原 UI 设计 1.Photoshop 还原 UI 设计 (1)PhotoShop 下载安装 (2)添加辅助线 (3)尺寸.文字.颜色等信息的获取 (4)切图 ...
css中东布局rtl_如何将RTL支持添加到Flexbox和CSS网格
css中东布局rtl 逻辑属性定义了一种新方法,该方法改变了我们在CSS中使用布局的方式. 除其他优点外,它们还使我们能够基于逻辑属性(Flexbox和CSS网格)向布局添加RTL(从右到左)语言支持 ...
【图片版】CSS网格布局（Grid）完全教程
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
html图片文字网格布局,【图片版】CSS网格布局（Grid）完全教程
## 简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Ha ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...

CSS基本布局16例

单行两列

单行三列

顶行三列

CSS基本布局16例相关推荐

最新文章

热门文章