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网页布局

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

CSS模块化基本思想

模块化的基本概念1.什么是模块模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。 模块化用来分割,组织和打包软件。每个模块完成一个特定的子功能,所有的模块按某种方式组装起来,成为一...
  • dangnian
  • dangnian
  • 2016年03月14日 17:48
  • 1135

Ionic Css简介与基本布局

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

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...
  • bingkingboy
  • bingkingboy
  • 2016年04月11日 00:29
  • 14689

布局之常用16例

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

CSS各种常用布局

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

css的3种布局方式

1.文档流布局方式,这是最基本的布局方式,就是按照文档顺序一个一个地显示,块元素独占一行,内联元素共享一行。 2.浮动布局方式,某个元素浮动之后,其后面的元素就当其不存在而占用其原来的地方,按照原来文...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2015年10月14日 20:18
  • 2628

第十三讲 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
  • 553

css-水平和垂直布局

1. 盒子模型margin外边距,border边框,padding内边距,element元素2. 水平布局2.1 盒子模型理解水平布局父元素width=子元素margin-left+border-le...
  • github_34514750
  • github_34514750
  • 2016年04月02日 17:06
  • 1999

css sticky footer布局+流式布局

css sticky footer布局参考地址:张鑫旭老师-css sticky footer布局 结合项目具体场景给出介绍:点击信息,弹出浮层,显示详细信息。浮层最下面有个关闭按钮,一直处在底部,...
  • u013217071
  • u013217071
  • 2017年06月06日 10:35
  • 706
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS基本布局16例
举报原因:
原因补充:

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