如何用div+css布局页面

转载 2008年10月02日 17:55:00

如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合web2.0标准",以便让别人觉得他们的网站用的是最先进的技术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?
     实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:

     1.这里的div并不是我们所说的层,虽然他们的标签都是<div>,在这里你可以把div理
解成一个容器,它可以放文字,图片,表格等等.
     2.用div布局必须对页面的结构进行准确的分析,当然用table也要分析页面结构.用div要分清上下,左右,实际上div布局也只有上下,左右.分析结构要先整体再部分,先分析整体的页面布局,例如我们一般的页面是上(banner和导航),中(页面主体内容,新闻等等),下(版权信息块)结构.
+------------------------------------+
|                                     |
|              header                  |
|                                     |
|------------------------------------|
|                                     |
|                                     |
|               midbody                |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|------------------------------------|
|                                     |
|              foot                    |
|                                     |
+------------------------------------+
于是我们可以把整个页面放在一个大div内,于是我们可以这样来写<div>结构:
<div   id="container">/*大容器放全部内容*/
     <div id="header">/*上*/
     </div>
     <div id="midbody">/*中*/
     </div>
     <div id="foot">/*下*/
     </div>
</div>

解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可
以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。
下面看下这几个css的代码
/*页面主容器样式*/
#container{
     width:90%;/*宽度*/
     margin: 0 auto;/*边界auto为自动,这里用到了缩写形式意思为上下为0,
                           左右自动*/
     }
/*页面头*/
#header{
width:780px;
height: 130px;
margin: 0 auto;
overflow:hidden;/*防止div被撑开,超过div大小就隐藏*/
background:#999999;/*背景色*/
}
/*页面中间*/
#midbody{
width:780px;
height: auto;
height:auto;
margin:0 auto;
overflow:hidden;
background: #990000;
}
/*页面底部*/
#foot{
width:780px;
height:100px;
margin:0 auto;
background: #99FFCC;
}

看完整体就要研究部分了,对于部分来说无非就是上下或左右结构了,例如下面的中间又分
为左右。
+------------------------------------+
|                                     |
|              header                  |
|                                     |
|------------------------------------|
|         |                            |
|         |        midbody              |
|         |                            |
|leftside|       rightside             |
|         |                            |
|         |                            |
|         |                            |
|         |                            |
|------------------------------------|
|                                     |
|              foot                    |
|                                     |
+------------------------------------+

于是div结构可写成:
<div   id="container">
    <div id="header">
    </div>
    <div id="midbody">
       <div id="leftside">
       </div>
       <div id="rightside">
       </div>
    </div>
    <div id="foot">
    </div>
</div>
midbody中的leftside和rightside的css为
#leftside{
width:220px;
float:left;/*该层位于外层的左边*/
height:500px;
background:#167692;
}
#rightside{
width:558px;
height:500px;
float:right;/*该层位于外层的右边*/
background: #CCCC00;
}
如果是这样的结构:

+------------------------------------+
|                                     |
|              header                  |
|                                     |
|------------------------------------|
|         | rightside                  |
|         |             rtop            |
|         |                            |
|leftside|---------------------------|
|         |             |rbottom        |
|         |     left     |     right      |
|         |             |               |
|         |             |               |
|------------------------------------|
|                                     |
|              foot                    |
|                                     |
+------------------------------------+

div结构为:
<div   id="container">
    <div id="header">
    </div>
    <div id="midbody">
       <div id="leftside">
       </div>
       <div id="rightside">
          <div id="rtop">
          </div>
          <div id="rbottom">
              <div id="left">
              </div>
              <div id="right">
              </div>
          </div>
       </div>
    </div>
    <div id="foot">
    </div>
</div>
css为:
#rtop{
width:558px;
height:200px
margin:0 auto;
background: #CCCC00;
}
#rbottom{
width:558px;
height:300px;
margin:0 auto;
background: #CCee00;
}
#left{
width:258px;
float:left;
height:300px;
background: #CCCCed;
}
#rightside{
width:300px;
height:300px;
float:right;
background: #Cdfd00;
}
应该很清楚了吧?只要看懂了最外层的到里面都是一样的道理。

HTML CSS + DIV实现整体布局

HTML CSS + DIV实现整体布局 1、技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2、什么是W3C标准?     W3C:World Wide Web...
  • Mercop
  • Mercop
  • 2012年08月19日 00:15
  • 132703

[转]如何用div+css布局页面

如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大 知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合web2.0...
  • cbjcry
  • cbjcry
  • 2017年04月13日 10:26
  • 148

DIV+CSS布局和TABLE布局的优缺点讲解

TABLE布局是WEB早期CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。现在绝大多数的网站都是用...
  • qq_32609883
  • qq_32609883
  • 2015年12月18日 14:19
  • 4286

DIV+CSS首页布局练习

新建外部样式, html中设置表示文件格式,在加入 引入外部css链接 最先布局一个最外面的层,设置宽度960像素,临时高度800像素和背景颜色 布局整个body体 ,所有外边距和内填充变成...
  • Abenazhan
  • Abenazhan
  • 2017年05月31日 10:53
  • 420

Div+CSS布局入门

什么是样式表:CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。DIV结构如下:  │bo...
  • ZXKRK
  • ZXKRK
  • 2006年10月14日 15:03
  • 683

div+css常见布局结构定义

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器、页面头部、标志和站点名称、站点导航(主菜单)、主页面内容、子菜单、搜...
  • l275940071
  • l275940071
  • 2017年01月19日 15:22
  • 321

DIV+CSS布局的优势和弊端

DIV+CSS的优势 1、符合W3C标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、对浏览者和浏览器更具亲和力。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到...
  • wy_Blog
  • wy_Blog
  • 2017年02月25日 17:44
  • 981

DIV+CSS布局和Table布局对比

转自:http://www.toutiao.com/i6429288122151862786/ 虽然目前大多数网页都是采用的DIV+CSS布局的方式,但是也有少数的老式Web网页采用的是Ta...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017年06月14日 19:42
  • 623

一个好例子:DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用...
  • u014801801
  • u014801801
  • 2016年12月11日 22:20
  • 5474

十天学会web标准(DIV+CSS)系列(十)div+css网页标准布局实例教程

一、建立站点 前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问...
  • jarniyy
  • jarniyy
  • 2016年03月21日 14:46
  • 3893
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何用div+css布局页面
举报原因:
原因补充:

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