div+css页面布局

港控/mmm° 2022-06-14 00:08 409阅读 0赞

### 1、什么是 DIV ###

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。它是一个容器，DIV的起始标签和结束标签之间所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

在页面中插入div标签，其代码如下：

在页面上显示为一行的效果。它是一个块状元素，在其中放置页面内容。

因此在 div+css页面制作中只需要2个步骤，首先使用div将内容标记出来，然后为这个div编写需要的CSS样式。

### 2、盒子模型 ###

盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！  
什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子应该很熟悉，这里提到的盒子模型就可以理解成现实生活中的盒子就可以了。  
既然和现实生活中的盒子一样，那想一下，生活中的盒子里面存放东西的区域给他起个名字叫“content(内容)”，而盒子的纸壁给它起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，称这部分距离叫“padding(内边距)”，如果需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离称之为"margin(外边距)"。  
这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图7-2所示：

![0_1329966731acjh.gif][]

图7-2 盒子模型

页面就是由许许多多的盒子组成的，但是和现实生活中的盒子会忽略外边距(margin)，但是在页面中，是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，也不要忽略它，要知道它是存在的。

### 3、块状元素和内联元素 ###

在用CSS布局页面的时候，会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。

l 块状元素

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

l 内联元素

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。

举例说明，例如要求：ID为div1的红色(\#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2。

CSS代码如下：

\#div1\{width:300px; height:300px; background:\#900;\}

\#div2\{width:100px; height:100px; background:\#090;\}

HTML代码如下：

</div>

## 4 Div+CSS布局实例一 ##

本实例使用的布局类型为封面型，实例中 box是整个页面的容器，main是主体内容，bottom是页面中的版底信息，如图7-16所示：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>bottom</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

图7-16 页面布局结构

在实例的设计制作过程中，首先分析页面的结构，制作出页面的大体布局，接着制作页面的顶端部分和页面的背景部分，然后再制作页面的主体内容、底部内容，最后完成整个页面的制作，最终页面效果图如图7-17所示：

图7-17 页面最终效果

制作步骤如下：

【步骤1】 打开Dreamweaver软件，建立站点，新建网页，保存命名为index.htm，另外新建1个css文件，分别保存为divcss.css。

【步骤2】 打开窗口菜单，选择css样式子菜单，打开CSS样式面板，单击该面板上的“附加样式表”按钮 ，打开链接外部样式表对话框，将刚刚建立的css文件链接到页面中，如图7-18所示：

图7-18 链接外部样式表

【步骤3】 打开divcss.css文件，创建代码如下所示：

\*\{

margin:0px;

border:0px;

padding:0px;

body\{

font-family:"宋体";

font-size:12px;

color:\#fff;

background-image:url(images/5401.jpg);

background-repeat:repeat-x;

上述代码中， \*为通配选择符，表示所有对象，包括所有不同id不同class的所有标记。

【步骤4】 返回设计页面，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，如图7-19所示。

图7-19 插入div标签

打开插入div标签对话框，**在“插入”下拉列表中选择“在插入点”选项，在ID下拉列表框中输入box，在页面中插入box层**，如图7-20所示。

图7-20 插入标签对话框参数设置

切换到divcss.css文件，创建一个名为\#box的CSS规则，如下代码所示。返回设计页面中，页面效果如图7-21所示。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#box{ </p> 
     <p>&nbsp;&nbsp;&nbsp; width:1007px;</p> 
     <p>&nbsp;&nbsp;&nbsp; height:605px;</p> 
     <p>&nbsp;&nbsp;&nbsp; background-image:url(images/5402.jpg);</p> 
     <p>&nbsp;&nbsp;&nbsp; background-repeat:no-repeat;</p> 
     <p>}</p> 
     <p>&nbsp;</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

图7-21 插入box层后的效果

【步骤5】 将光标移至box层中，将多余的文字内容删除，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，**在“插入”下拉列表中选择“在开始标签之后”选项，在标签下拉列表中选择<div id=“box”>选项，在ID下拉列表框中输入top-menu**，单击确定按钮，在 box层中插入top-menu层。如图7-22所示，

图7-22 插入top-menu层

切换到divcss.css文件中，创建一个名为 \#top-menu的css规则，代码如下，返回设计页面中，将多余文字删除，页面效果如图7-23所示。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#top-menu{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height:20px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin:10px 0px 0px 30px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:250px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:left;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

图7-23 插入top-menu层后的效果

【步骤6】 光标移至top-menu层中，转换到代码视图中，在该层中插入如下文字代码：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#top-menu span{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-left:5px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-right:5px;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

切换到divcss.css文件中，创建一个名为“\#top-menu span”的CSS规则，代码如下，返回设计页面中，效果如图7-24所示。

图7-24 新建“\#top-menu span”的CSS规则后的效果

【步骤7】 将光标移至页面设计视图中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，**在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择<div id=“top-menu”>选项，在ID下拉列表框中输入main**，单击确定按钮，在top-menu层之后插入main层。如图7-25所示。

图7-25插入main层

切换到divcss.css文件中，创建一个名为“\#main”的CSS规则，代码如下，返回设计视图中，页面效果如图7-26所示。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#main{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:428px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:376px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:right;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin:190px 50px 0px 0px;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

图7-26 新建“\#main”的CSS规则后的效果

【步骤8】 光标移至main层中，将多余文字删除，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，**在“插入”下拉列表中选择“在开始标签之后”选项，在标签下拉列表中选择<div id=“main”>选项，在ID下拉列表框中输入main-top**，单击确定按钮，在main层之后插入main-top层。如图7-27所示。

图7-27 插入main-top层

切换到divcss.css文件中，创建一个名为“\#main-top”的CSS规则，代码如下，返回设计视图中，页面效果如图7-28所示。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#main-top{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:428px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:121px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image:url(images/5407.gif);</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat:no-repeat;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-position:center;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

图7-28新建“\#main-top”的CSS规则后的效果

【步骤9】 光标移至main层中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，**在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择<div id=“main-top”>选项，在ID下拉列表框中输入main-main**，单击确定按钮，在main层之后插入main-main层。

切换到divcss.css文件中，创建一个名为“\#main-main”的CSS规则，代码如下，返回设计视图中，页面效果如图7-29所示。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#main-main{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:428px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:25px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image:url(images/5406.gif);</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat:no-repeat;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

图7-29新建“\#main-main”的CSS规则后的效果

【步骤10】 光标移至main层中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，**在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择<div id=“main-main”>选项，在ID下拉列表框中输入main-bottomn1**，单击确定按钮，在main层之后插入main-bottomn1层。

切换到div.css文件中，创建一个名为“\#main-bottomn1”的CSS规则，同时创建一个名为“\# main-bottomn1 img” 的CSS规则，代码如下，返回设计视图中，在main-bottomn1层中将多余文字删除，在该层中插入图像5403.jpg，选择该图片，在图像属性面板上，将该图片对齐方式设置为右对齐，在该图像左侧输入相应的文字，页面效果如图7-30所示。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#main-bottomn1{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:428px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:72px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-bottom:#fff solid 1px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-top:10px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height:20px;</p> 
     <p>}</p> 
     <p>#main-bottomn1 img{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:right;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin:4px 15px 0px 0px;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

图7-30新建“\# main-bottomn1”的CSS规则后的效果

【步骤11】 根据步骤10的制作方法，完成后面的main-bottomn2和main-bottomn3层的内容，页面效果如图7-31所示。

图7-31新建“\# main-bottomn2”和“\# main-bottomn3”的CSS规则后的效果

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#main-bottomn2{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:428px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:72px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-bottom:#fff solid 1px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height:20px;</p> 
     <p>}</p> 
     <p>#main-bottomn2 img{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:right;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin:4px 15px 0px 0px;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#main-bottomn3{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:428px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:72px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-bottom:#fff solid 1px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; line-height:20px;</p> 
     <p>}</p> 
     <p>#main-bottomn3 img{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:right;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin:4px 15px 0px 0px;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

【步骤12】 光标移至页面设计视图中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，**在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择<div id=“main”>选项，在ID下拉列表框中输入bottom**，单击确定按钮，在main层之后插入bottom层。

切换到divcss.css文件中，创建一个名为“\#bottom”的CSS规则，同时创建一个名为“\#bottom img” 的CSS规则，代码如下所示，返回设计视图中，在bottom层中将多余文字删除，在该层中插入图像logo.jpg，页面效果如图7-32所示。

图7-32 插入bottom层

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#bottom{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:1007px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height:28px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image:url(images/5408.jpg);</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat:repeat-x;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:right;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-top:9px;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color:#000;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>#bottom img{ </p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float:left;</p> 
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin:2px 20px 0px 300px;</p> 
     <p>}</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

至此，页面的制作全部完成，保存该页面，预览该页面，即可得到如图7-17所示效果。

[0_1329966731acjh.gif]: /images/20220614/34f43d1c7a504c128cade56068483635.png