Dreamweaver 教程-div和span標(biāo)簽在CSS中的應(yīng)用

2022-05-05發(fā)布者：ylm大?。?/span> 下載：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內(nèi)，類為boxhead</div>
   <p>我在div內(nèi)</p>
   <p>我在div內(nèi)</p>
   <p>我在div內(nèi)</p>
   <p>我在div內(nèi)</p>
   </div>
   </body>
    </html>

上述例子中，首先在頁面內(nèi)定義了一個(gè)class為box的div，在它的內(nèi)部又定義了一個(gè)class為boxhead的div。

box屬性：width: 30%;表示這個(gè)box div占整個(gè)頁面寬度的30%，而浮動(dòng)屬性float: left; 則表示box div浮動(dòng)在頁面的左側(cè)。 

boxhead屬性：width: 100%;由于boxhead div在box div之內(nèi)，那么這里的100%是指box的寬度。 

行級(jí)標(biāo)簽<span>(行內(nèi)標(biāo)簽)

修改上個(gè)例子中的第一個(gè)“<p>我在div內(nèi)</p>”，修改后的代碼如下：

<p><span style="color:red">我在div內(nèi)，也在span內(nèi)，</span>屬性為box。</p>
發(fā)表評(píng)論(共0條評(píng)論)
請(qǐng)自覺遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)，評(píng)論內(nèi)容只代表網(wǎng)友觀點(diǎn)，發(fā)表審核后顯示！

版權(quán)聲明：

1 本站所有資源（含游戲）均是軟件作者、開發(fā)商投稿，任何涉及商業(yè)盈利目的均不得使用，否則產(chǎn)生的一切后果將由您自己承擔(dān)！

2 本站將不對(duì)任何資源負(fù)法律責(zé)任，所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線投稿、無法下載等問題，請(qǐng)與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等，請(qǐng)立刻聯(lián)系我們并具體說明情況后，本站將盡快處理刪除，聯(lián)系QQ:2499894784

返回頂部