CSS基本布局16例

转载 2004年09月06日 16:30:00
作者:Owen Briggs 2004-6-25 13:44:32

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

单行单列

  • 单行单列 单行单列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:左右列绝对定位,中间列自适应。宽度满屏。

顶行三列

CSS基本布局16例

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

CSS基本布局16例

CSS基本布局16例作者:Owen Briggs 2004-6-25 13:44:32以下布局资料原作者:Owen Briggs单行单列 单行单列1:采用float浮在左上角,固定宽度。 单行单列2...
  • gzzzz
  • gzzzz
  • 2004-10-27 14:12:00
  • 755

CSS基本布局16例(转载)

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

CSS布局16例

  • 2011年11月25日 15:54
  • 29KB
  • 下载

CSS 基本布局类型

基本布局类型Web设计师注定要处理很多未知的东西,如访问者使用哪一种浏览器,访问者的显示器尺寸是多少,等等。但是,设计师面临的最大问题,可能是要针对不同的显示器尺寸来创建引人入胜的设计。针对这个问题,...
  • ixygj197875
  • ixygj197875
  • 2018-02-23 22:09:15
  • 41

CSS学习1——基本布局以及盒子模型

1. CSS选择器优先级: 行内样式>ID选择器>类别选择器>标记选择器; 两个类别选择器优先级相同时,以前者为主; 2. CSS盒子的浮动: 默认盒子没有浮动,按行排列,横向排列; 如果有两个盒子,...
  • u010484625
  • u010484625
  • 2015-06-16 15:47:58
  • 899

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

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

常见的CSS布局

  • 2016年11月14日 12:55
  • 87KB
  • 下载

css基本布局十六例

  • 2014年05月27日 11:35
  • 31KB
  • 下载

第十三讲 ionic css布局介绍

http://www.phonegap100.com/article-452-1.html 摘要: 学习要点: 1. ionic css基本布局 2. ionic css色彩、图标和边距3. i...
  • fangquan1980
  • fangquan1980
  • 2016-11-11 10:03:17
  • 694
收藏助手
不良信息举报
您举报文章:CSS基本布局16例
举报原因:
原因补充:

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