Dreamweaver 教程-div和span标签在CSS中的应用

时间：2014-07-22 11:33
来源：下载吧
编辑：xfront

Dreamweaver CC 2015

AdobeDreamweaverCC2015官方中文版是Adobe公
软件大小：320 MB 详情
Adobe Dreamweaver CS6

AdobeDreamweaverCS6简体中文优化版由官方简
软件大小：278 MB 详情
Adobe Dreamweaver CS5

AdobeDreamweaverCS5软件使设计人员和开发人
软件大小：406 MB 详情

div和span是XHTML中比较特殊的标签。结合CSS他们可以实现许多方便的功能。

div和span是什么?

与其他XHTML标签相比，被div和span包含的元素是没有意义的。例如<h1></h1>标签代表标题，<p></p>标签代表新的自然段。但div和span标签并无此意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。

块级标签<div>

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>下载吧-div和span演示</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=gb2312" />
    <style type="text/css">
    <!－－
   .box {
    background-color: #EEFAFF;
    width: 30%;
    float: left; 
    }
    .boxhead {
    font-size: 14px;
    font-weight: bold;
    background-color: #AEC6FD; 
    text-align: center;
    width: 100%;
    color: #FFFFFF;
    }
    －－>
    </style>
    </head>
    <body>
   <div class="box">
   <div class="boxhead">我在div内，类为boxhead</div>
   <p>我在div内</p>
   <p>我在div内</p>
   <p>我在div内</p>
   <p>我在div内</p>
   </div>
   </body>
    </html>

上述例子中，首先在页面内定义了一个class为box的div，在它的内部又定义了一个class为boxhead的div。

box属性：width: 30%;表示这个box div占整个页面宽度的30%，而浮动属性float: left; 则表示box div浮动在页面的左侧。

boxhead属性：width: 100%;由于boxhead div在box div之内，那么这里的100%是指box的宽度。

行级标签<span>(行内标签)

修改上个例子中的第一个“<p>我在div内</p>”，修改后的代码如下：

<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p>