网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.css层固定位置练习.
.如何查看CSS代码.
.让IE浏览器即时刷新CSS样式.
.解决IE6不能正常解析CSS文件的方.
.css应用笔记整理之结构编写.
.CSS的长度单位(em)与em标签.
.你应该知道的CSS的十八个技巧.
.CSS实现不定高度DIV绝对居中.
.IE7对css选择器的改进.
.CSS技巧DIV为空时占据空间的解决.
.CSS滤镜 详解.
.利用css里expression来实现界面对.
.css文字重复ie bug导致文字的奇怪.
.需要掌握的八个CSS布局技巧.
.css控制div置顶置底的例子.
.CSS仿淘宝首页导航条按钮布局效果.
.用CSS打造可折叠伸缩名片菜单.
.CSS Sprites技术以及图片优化.
.哀悼逝者 快速将你的网站变成灰色.
.CSS中权重的例子.

DIV+CSS常用的网页布局代码

发表日期:2008-4-10


  单行一列
  以下是引用片段:
  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:
  以下是引用片段:
  

  

  
这里是第一列

  
这里是第二列

  

  

  
这里是第三列

  

  


  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:
  以下是引用片段:
  

  

This is the main content.


  

  

  

This is the left sidebar.


  

  

  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:
  以下是引用片段:
  
  

  

  
这里是第一列

  
这里是第二列

  



  

  
这里是第三列

  

  


  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:
  以下是引用片段:
  
  

  

  
这里是第一列

  
这里是第二列

  

  

  
这里是第三列

  

  

  

  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技术,如何入门? 人气:5418
下一篇:CSS教程:CSS文件应该保持整洁和统一 人气:3540
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐