非常好的CSS基本布局16例_基础教程

单行单列

单行单列1:采用float浮在左上角,固定宽度。

#content { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\\"}\\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }

单行单列2

:固定在左上角,固定宽度,采用的是绝对(absolute)定位。

#content { position: absolute; top: 0px; left: 0px; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\\"}\\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }

单行单列3

:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面。
单行单列4

(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。

单行两列

单行两列1:两列都固定宽度。第一列浮在左上角,第二列浮在第一列右边。

单行两列2

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

单行两列3

:两列都百分比宽度,满屏。两列都采用绝对定位。
单行两列4

:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在右上角。

单行两列5

:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在第一列右边。

单行三列

单行三列1:左右列都绝对定位(右列定位在右上)。左列和右列固定宽度,中间列自适应页面。

单行三列2

:左列定位在左上,右列定位在右上,中间列浮在左列右面。左列和右列固定宽度,中间列自适应页面。
单行三列3

:三列都绝对定位。左列和右列固定宽度,中间列根据内容自适应。
单行三列4

(推荐):类似样式2,只是将margin: 20px属性增加在body样式中,解决了中间列在Netscape6.0中置顶的问题。
单行三列5

:左右列绝对定位,中间列自适应。宽度满屏。

顶行三列

顶行三列1(推荐):顶行自适应页面宽度。左右列绝对定位,中间列自适应页面。

顶行三列2:宽度满屏

时间: 2024-10-24 23:07:06

非常好的CSS基本布局16例_基础教程的相关文章

CSS基本布局16例

css 单行单列 单行单列1:采用float浮在左上角,固定宽度. 单行单列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位. 单行单列3:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面. 单行单列4(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中. 单行两列 单行两列1:两列都固定宽度.第一列浮在左上角,第二列浮在第一列右边. 单行两列2:两列都百分比宽度,但不满屏.第一列固定在左上角,第二列浮在

div+css与xhtml+css分别是什么意思?_基础教程

不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难道就是传说中的标准重构吗?标准从最简单的根源来说不是合理使用xhtml的标签吗?可为什么还是有这么多div+css呢?既然可以div+css,那为什么不可以叫span+css ul+css li+css等等呢? 疑问,满脑子的疑问!为了这个疑问,我把自己脑子里的东西从最底层翻了一遍. 在几年前大家都是用table来布局,一层套一层,没发现什么不妥,一直用到<网站重构>这本书出来后的不久开始看到很多人讨论重构

从零学CSS系列之文本属性_基础教程

1.line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, 复制代码 代码如下: body {  font-size: 12px;  line-height: 1.5;} h1 {  font-size: 36px;} 这里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 则是 54px(36 * 1.5). 就算使用

惊现学习CSS应该注意的方法_基础教程

学习任何东西都是一样,从小学.中学.大学,除了学习知识外就是去学习方法!  要想掌握CSS, 首先要学会HTML,我刚开始是从零开始学习的,花了一个月时间学习HTML,没有老师,书就是我唯一的老师,也没有上网的条件!一个月过后,我就开始学习CSS,刚开始看的第一本CSS书是<CSS网页样式设计>看了几天后发现根本看不懂!,之后换了一本<HTML参考大全>,这本书是网页制作师的案头常备之书!之所以更换这本书来学习CSS,是因为这里面有一部分是CSS,就成了我的CSS启蒙书.看了几段后

CSS的color颜色使用说明_基础教程

red红色 等同于 rgb(255,0,0) 等同于 rgb(100%,0%,0%) 等同于 #ff0000 等同于 #f00 有17个预先确定的颜色,它们是: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,  olive, orange, purple, red, silver, teal, white, and yellow. transparent 也是一个正确的值. rgb的三个值都是从0到255,0是最低级,25

css滤镜效果(一)_基础教程

1.Alpha 滤镜      语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}     "Alpha"属性是把一个目标元素与背景混合.设计者可以指定数值来控制混合的程度.这种"与背景混合"通俗地说就是一个元素的透明度.通过指定坐标,可以指定点.线.

css滤镜效果(二)_基础教程

7.Gray ,Invert,Xray 滤镜 语法:{filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把一张图片变成灰度图:Invert滤镜是把对象的可视化属性全部翻转,包括色彩.饱和度.和亮度值:Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的"X"光片. 效果如下: 8.Light  滤镜 语法:Filter{light} 这个属性模拟光源的投射效果.一旦为对象定义了"LIGHT"滤镜属性,那

CSS网页布局入门教程9:用CSS设计网站导航——横向导航_基础教程

网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具.网站导航从形式上主要由横向导航.纵向导航.下拉及多级菜单导航第三种形式. 横向导航 作为门户网站的设计而言,主导航一般采用横向导航.由于门户网站下方文字较多,且每个频道均有一同的样式区分,因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择,国内大部分门户均采用这种形式. 纵向导航 目前在门户网站的设计中已经不再流行,纵向导航更倾向于表达产品分类. 下拉导航 主要用于功能复杂的网站.在有些网站上也

第8天:CSS布局入门_基础教程

CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid;BORDER-R