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

2022-05-05发布者：ylm大小：下载：0

文件大小:

软件介绍

源代码如下：

<!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>

发表评论(共0条评论)

版权声明：

1 本站所有资源（含游戏）均是软件作者、开发商投稿，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！

2 本站将不对任何资源负法律责任，所有资源请在下载后24小时内删除。

3 若有关在线投稿、无法下载等问题，请与本站客服人员联系。

4 如侵犯了您的版权、商标等，请立刻联系我们并具体说明情况后，本站将尽快处理删除，联系QQ:2499894784

热门软件

最近更新