使用Div和CSS来排版页面布局

最新推荐文章于 2021-12-20 20:42:58 发布

T_Mac_one

最新推荐文章于 2021-12-20 20:42:58 发布

阅读量1.4k

点赞数

分类专栏： CSS 文章标签： css div布局

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了网页布局的基本概念，使用div元素进行布局的方法，并详细解释了如何通过CSS设置div的宽度、大小、位置及内部元素的样式。文章还展示了如何根据不同页面结构将div分为上、中、下或左右布局，以及如何使用CSS样式实现这些布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}
应该很清楚了吧？只要看懂了最外层的到里面都是一样的道理。