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  ,如需转载请自行联系原作者
相关文章
|
19天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
16 0
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
74 0
|
3月前
|
设计模式 前端开发 开发者
css 三栏布局的实现
css 三栏布局的实现
34 0
|
3月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
|
10天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
N..
|
29天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
1月前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧,包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧,开发者可以更加灵活地控制页面的布局,提升用户体验和界面的美观性。
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 013 HTML布局
编程笔记 html5&css&js 013 HTML布局
|
2月前
|
容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?