网页制作之CSS常用网站布局实例

转载 2007年09月22日 10:56:00
2007-09-19   作者: 佚名

     单行一列

以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; } 
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 

      两行一列

以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center;} 
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 

      三行一列

以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; } 
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 

  
      单行两列

以下是引用片段:
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } 
#bodycenter #dv1 {float: left;width: 280px;} 
#bodycenter #dv2 {float: right;width: 410px;} 

      两行两列

以下是引用片段:
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} 
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 
#bodycenter #dv1 { float: left; width: 280px;} 
#bodycenter #dv2 { float: right;width: 410px;} 

      三行两列

以下是引用片段:
#header{ width: 700px;margin-right: auto; margin-left: auto; } 
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; } 
#bodycenter #dv1 { float: left;width: 280px;} 
#bodycenter #dv2 { float: right; width: 410px;} 
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 


      单行三列
      绝对定位

以下是引用片段:
#left { position: absolute; top: 0px; left: 0px; width: 120px; } 
#middle {margin: 20px 190px 20px 190px; } 
#right {position: absolute;top: 0px; right: 0px; width: 120px;} 

      float定位

      xhtml:

以下是引用片段:
<div id="warp"> 
<div id="column"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div> 
</div> 
<div id="column3">这里是第三列</div> 
<div class="clear"></div> 
</div> 

      CSS:

以下是引用片段:
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;} 

      float定位二

      xhtml:

以下是引用片段:
<div id="center" class="column"> 
<h1>This is the main content.</h1> 
</div> 
<div id="left" class="column"> 
<h2>This is the left sidebar.</h2> 
</div> 
<div id="right" class="column"> 
<h2>This is the right sidebar.</h2> 
</div> 

      CSS:

以下是引用片段:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;} 
.column {position: relative;float: left;} 
#center {width: 100%;} 
#left {width: 180px; right: 240px;margin-left: -100%;} 
#right {width: 130px;margin-right: -100%;} 

      两行三列

      xhtml:

以下是引用片段:
<div id="header">这里是顶行</div> 
<div id="warp"> 
<div id="column"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div> 
</div> 
<div id="column3">这里是第三列</div> 
<div class="clear"></div> 
</div> 

      CSS:

以下是引用片段:
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;} 

      三行三列

      xhtml:

以下是引用片段:
<div id="header">这里是顶行</div> 
<div id="warp"> 
<div id="column"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div> 
</div> 
<div id="column3">这里是第三列</div> 
<div class="clear"></div> 
</div> 
<div id="footer">这里是底部一行</div> 

      CSS:

以下是引用片段:
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;} 
#footer{width:100%; height:auto;} 

      PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,都没有设置margin,padding,boeder等属性!

 

常用DIV+CSS网页制作布局技术

CSS布局常用的方法:float:none|left|right  取值: none:默认值。对象不飘浮 left:文本流向对象的右边 right:文本流向对象的左边  它是怎样工...

【6】CSS布局属性及简单网页制作

一:布局属性 普通文档流:元素从上至下排列的顺序 脱离文档流:元素从正常的排列顺序被抽离 浮动:将元素移动到父元素最左和最右(可以将元素按着我们的意思进行排列)float浮动:设置元素向哪个方向浮...

网页制作中CSS样式布局实用小技巧

作者:星狮创想  下面跟大家分享一下网页制作中CSS样式布局实用小技巧,希望对大家有所帮助。 1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 2、...

网页制作DIV+css之导航布局

Mini-Tab Preview

div布局 网页制作 网站开发

  • 2011年04月19日 11:59
  • 347KB
  • 下载

网页制作CSS命名规范整理

一、文件规范   1、文件均归档至约定的目录中。   具体要求通过豆瓣的CSS规范进行讲解:   所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:  ...

CSS常用网站布局实例

  • 2011年07月04日 17:36
  • 4KB
  • 下载

网页制作基础学习——HTML+CSS

网络是大家经常使用的东西,他帮助我们解决了很多问题,在我们生活中扮演着举足轻重的作用。但是如何制作呢,现在已经有很多专门的网页制作软件了(例如:Dreamweaver,Fireworks),而这些软件...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页制作之CSS常用网站布局实例
举报原因:
原因补充:

(最多只允许输入30个字)