非常好的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(推荐)：顶行自适应页面宽度。左右列绝对定位，中间列自适应页面。

赞 (0)

相关推荐

  • 非常好的CSS基本布局16例

    非常好的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>

  • CSS网页布局入门教程1：一列固定宽度

    CSS网页布局入门教程1：一列固定宽度

    本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固

  • CSS网页布局入门教程6：左列固定，右列宽度自适应

    在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 3

  • CSS网页布局入门教程5：二列宽度自适应

    从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 300px;      w

  • CSS网页布局入门教程4：二列固定宽度

    CSS网页布局入门教程4：二列固定宽度

    有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 复制代码 代码如下: <div id="left">左列</div>  <div id="right">右列</div> 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示

  • div+css排版的样例

    div+css排版的样例 Div布局 body{text-align:center;margin:0;padding:0} /*text-align:center是ie中必须要有的*/ div { height:200px; color:red; } .title { margin:0 auto; width:776px; background-color:#abcdef; } .middle { margin:0 auto; width:776px; } .left { float:left;

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 使用CSS框架布局的缺点和优点小结

    现在好多网站都用了div+css来布局网页结构,优点是速度快了,可负面影响呢,来看下面的分析前端时间写了一篇<利用CSS框架进行高效率的站点开发>,有不少朋友问我相关的问题.很早5key就在公司进行CSS框架的架构,也对不少朋友提出CSS框架的建议.效果是很明显的.当然,CSS框架有利也有弊,最近也看了一些相关的文章.一些感想,与大家分享. CSS框架之利:  1.开发效率的提高.          如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作.定义好的框架可以大

  • CSS整体布局声明的一些使用技巧

    我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化.提高运行效率提供了途径.我们列举比较常用的形式,并加上解释.整体布局声明的作用在于将目标作一个整体的概括,声明一些完全相同或基本相同的属性及值,以免在后面的代码中每一个标签中都需要单独定义.若有不同的属性与值,后面的重新定义即可. 一.通配式整体布局声明. * { margin:0; padding:0; font-size:0.8em; ... } 这类形式的声明是针对整个页面的.可以设置页面元素共有的属性.而不必每一个元素单独的

  • div+CSS网页布局的意义与副作用原因小结第1/2页

    如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积

随机推荐