溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html寫網(wǎng)頁(yè)怎么布局

發(fā)布時(shí)間：2020-09-28 16:58:58 來(lái)源：億速云 閱讀：182 作者：小新 欄目：web開(kāi)發(fā)

html寫網(wǎng)頁(yè)怎么布局？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

html常用的布局有兩種。第一種一是div布局，優(yōu)點(diǎn)是比較方便簡(jiǎn)潔，代碼比較少，制作和維護(hù)也比較容易，就是有些地方不同的瀏覽器兼容性不一樣，可能會(huì)有不同的顯示。第二種是table布局，代碼比較多，到后期維護(hù)起來(lái)是非常頭疼的，但是table布局規(guī)避了許多瀏覽器不兼容的問(wèn)題。

1.div布局

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <title></title>  
    <style>  
        body{margin: 0; padding: 0;}  
        #header{width:100%; height: 90px; background: #b19f9d; }  
        #nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}  
        .content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}  
        .left{width:30%; height: 900px; background: #decfd4; float: left;}  
        .right{width: 70%; height: 900px; background: #b3a19d; float: left;}  
        footer{width:100%; height: 150px; background: #a8817a;}  
    </style>  
</head>  
  
<body>  
    <header id="header">  
        <nav id="nav">空空</nav>  
    </header>  
    <div class="content">  
        <div class="left"></div>  
        <div class="right"></div>  
    </div>  
    <footer></footer>  
</body>  
  
  
</html>

2.table布局

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <title></title>  
    <style>  
          
    </style>  
</head>  
  
<body marginheight="0px" marginwidth="0px">  
    <table width="100%" height="950px" style="background-color:gray">  
        <tr>  
            <td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td>  
        </tr>  
        <tr>  
            <td  width="20%" height="80%" style="background-color: blue" ><td>  
            <td  width="80%" height="80%" style="background-color: blue" ><td>  
        </tr>  
        <tr>  
            <td colspan="2" width="100%" height="10%" style="background-color: black" ><td>  
        </tr>  
      
    </table>  
</body>  
  
  
</html>

總結(jié)：

table布局比較局限，div 比較開(kāi)放，設(shè)計(jì)樣式比較多，效果美觀，table好處是所有瀏覽器都兼容div缺點(diǎn)是兼容性很麻煩。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)html寫網(wǎng)頁(yè)怎么布局大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)
推薦閱讀：
  1. HTML布局
  2. HTML如何布局

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手