html寫網頁如何佈局

墨辰丷原創: 2018-05-09 11:34:374969瀏覽

html常用的佈局有兩種。第一種一是div佈局，優點是比較方便簡潔，程式碼比較少，製作和維護也比較容易，就是有些地方不同的瀏覽器相容性不一樣，可能會有不同的顯示。第二種是table佈局，程式碼比較多，到後期維護起來是非常頭痛的，但是table佈局規避了許多瀏覽器不相容的問題。

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>

總結：

table佈局比較局限，div 比較開放，設計樣式比較多，效果美觀，table好處是所有瀏覽器都相容div缺點是相容性很麻煩。

相關建議：

HTML佈局之計算器(div css)_html/css_WEB-ITnose

html佈局的問題。 _html/css_WEB-ITnose

HTML佈局_html/css_WEB-ITnose

html佈局問題_html/css_WEB-ITnose

以上是html寫網頁如何佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5取得裝置資訊下一篇：HTML5取得裝置資訊

看更多