当前位置:  编程技术>WEB前端

非常好的CSS基本布局16例

    来源: 互联网  发布时间:2014-09-06

    本文导语:  单行单列 单行单列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 { widt...

单行单列

单行单列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(推荐):顶行自适应页面宽度。左右列绝对定位,中间列自适应页面。

:宽度满屏


    
 
 

您可能感兴趣的文章:

  • CSS网页布局框架 Elastic
  • 非常漂亮的Div+CSS布局入门教程第1/5页
  • CSS布局中可以用javascript判断浏览器版本
  • DIV+CSS布局教程大全与pdf电子书 下载
  • css网页布局中注意的几个问题小结
  • DIV+CSS布局的网站对网站SEO的影响分析
  • CSS整体布局声明的一些使用技巧
  • 用CSS实现表单form布局
  • css布局网页水平居中常用方法
  • div+CSS网页布局的意义与副作用原因小结第1/2页
  • CSS顶级技巧大放送,div+css布局必知
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • CSS网页布局入门教程2:一列自适应宽度
  • DIV CSS网页布局 最小高度(min-height)的妙用
  • 用CSS floats创建三栏页布局
  • 布局用CSS+DIV的优点总结
  • CSS网页布局入门教程3:一列固定宽度居中
  • div+css布局必了解的列表元素ul ol li dl dt dd详解
  • 左侧固定宽度,右侧自适应宽度的CSS布局
  • div+css布局必须要知道的css条件注释理论及实践第1/2页
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3