CSS基本布局16例

原创 2004年10月27日 14:12:00
CSS基本布局16例
作者:Owen Briggs 2004-6-25 13:44:32

以下布局资料原作者:Owen Briggs

单行单列

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

单行两列

  • :两列都固定宽度。第一列浮在左上角,第二列浮在第一列右边。
  • :两列都百分比宽度,但不满屏。第一列固定在左上角,第二列浮在第一列右边。
  • :两列都百分比宽度,满屏。两列都采用绝对定位。
  • :两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在右上角。
  • :两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在第一列右边。

单行三列

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

顶行三列

http://www.w3cn.org/article/layout/2004/55.html

CSS基本布局16例

以下布局资料原作者:Owen Briggs单行单列300)this.width=300" border=0> 单行单列1:采用float浮在左上角,固定宽度。 300)this.width=300" ...
  • Orrico
  • Orrico
  • 2004年09月09日 18:52
  • 842

CSS基本布局16例

作者:Owen Briggs 2004-6-25 13:44:32以下布局资料原作者:Owen Briggs单行单列300)this.width=300" border=0> 单行单列1:采用floa...
  • lovered
  • lovered
  • 2004年09月06日 16:30
  • 901

CSS基本布局16例(转载)

 转自 网页设计师 教程: http://www.w3cn.org/article/layout/2004/55.html单行单列 单行单列1:采用float浮在左上角,固定宽度。 单行单列2:固定...
  • healybai
  • healybai
  • 2009年01月08日 17:57
  • 121

前端基础学习-常见CSS网页布局

常见的网页布局大致分为:一列布局,两列布局,三列布局以及混合布局一列布局 Document .header{ height: 8...
  • dingshuhong_
  • dingshuhong_
  • 2016年03月10日 11:12
  • 1105

Ionic Css简介与基本布局

@(Ionic)[ionic css]Ionic Css简介与基本布局Ionic简介  Ionic属于hybrid开发模式,本质上是讲移动web应用与浏览器打包,优点是采用标准的web技术进行开发,避...
  • Sean_css
  • Sean_css
  • 2016年06月21日 18:05
  • 3454

CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位:fr 简介及实例

网格布局支持弹性尺寸(flex-size),这是一个很好的自适应布局技术。 弹性尺寸使用fr尺寸单位,其来自 "fraction" 或 "fractional unit" 单词的前两个字母,表示整体空...
  • iefreer
  • iefreer
  • 2016年01月19日 23:03
  • 5309

布局之常用16例

单行单列1:采用float浮在左上角,固定宽度。 单行单列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位。 单行单列3:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面...
  • mfcnnui
  • mfcnnui
  • 2014年10月12日 17:43
  • 215

【CSS+DIV网页样式与布局】——基础知识总结

前言       很早之前就把CSS+DIV网页样式与布局这部分知识就学完了,为了一味的赶紧度,就忽视了对这一部分知识的总结,真的有一种捡了芝麻丢了习惯的感觉,而且总结有一个包袱压着自己,越往后就越...
  • u013044029
  • u013044029
  • 2015年12月11日 21:31
  • 618

CSS各种常用布局

三列布局自适应,高度占满 注意高度占满用100%时要对html和body先设置height:100%;因为每个元素的100%都是取决于父元素相同属性值。 宽度自适可以使用flex或width使用33....
  • mzzzzq
  • mzzzzq
  • 2016年04月22日 11:17
  • 2921

CSS基本布局

CSS基本布局盒子模型自动居中特点 块元素处于文档流中 通过设置margin属性的左右为auto时,就可以自动居中了 自动居中 ...
  • nieyongs
  • nieyongs
  • 2015年07月05日 15:32
  • 454
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS基本布局16例
举报原因:
原因补充:

(最多只允许输入30个字)