CSS基本布局16例

简介:
+关注继续查看
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd>
单行单列
  • 单行单列 单行单列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:宽度满屏 
  • 本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2007/01/03/2912446.html  ,如需转载请自行联系原作者
相关文章
|
1天前
|
容器
css3 flex弹性布局详解
css3 flex弹性布局详解
12 0
|
2天前
|
前端开发
css flex布局
css flex布局
5 0
|
10天前
|
前端开发
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
15 0
|
10天前
|
前端开发
CSS布局:CSS三大特性、盒子模型
CSS布局:CSS三大特性、盒子模型
17 0
|
1月前
|
前端开发 数据可视化 容器
CSS 两栏布局和三栏布局的实现
CSS 两栏布局和三栏布局的实现
43 0
|
1月前
|
前端开发 容器
HTML&CSS Day07 CSS Flex布局
HTML&CSS Day07 CSS Flex布局
35 0
|
1月前
|
前端开发 容器
HTML&CSS Day06 CSS定位布局
HTML&CSS Day06 CSS定位布局
40 0
|
1月前
|
前端开发 数据可视化 容器
HTML&CSS Day05 CSS浮动布局
HTML&CSS Day05 CSS浮动布局
31 0
|
1月前
|
Web App开发 前端开发 算法
探索现代CSS布局技术:Flexbox和Grid
探索现代CSS布局技术:Flexbox和Grid
探索现代CSS布局技术:Flexbox和Grid
|
1月前
|
前端开发
CSS弹性布局是什么?
CSS弹性布局是什么?