HTML使用div和table進行佈局

乞力馬紮羅的雪CYF發表於2015-09-26
HTML

使用div佈局：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div佈局</title>
    <style type="text/css">

        body{
    /*去掉周圍的白邊*/
            margin: 0px;
        }

        #container{

            width: 100%;
            height: 950px;
            background-color: aquamarine;
        }

        #heading{

            width: 100%;
            height: 10%;
            background-color: gray;
        }

        #content_menu{

            width: 30%;
            height: 80%;
            background-color: antiquewhite;
            float: left;

        }

        #content_body{

            width: 70%;
            height: 80%;
            background-color: blueviolet;
            float: left;
        }

        #footing{

            width: 100%;
            height: 10%;
            background-color: blue;
            clear: both;
        }

    </style>
</head>
<body >

    <div id="container">
        <div id="heading">頭部</div>
        <div id="content_menu">內容選單</div>
        <div id="content_body">內容主體</div>
        <div id="footing">底部</div>
    </div>

</body>
</html>

使用table佈局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table佈局</title>



</head>


<body marginwidth="0px" marginheight="0px">

    <table width="100%" height="950px" style="background-color: gray">

    <tr>
        <td colspan="3" width="100%" height="10%" style="background-color: blueviolet">這是頭部</td>
    </tr>

        <tr>
           <td width="20%" height="80%" style="background-color: antiquewhite">

               <ul>
                   <li>iOS</li>
                   <li>Android</li>
                   <li>Win10</li>

               </ul>

           </td>

            <td width="60%" height="80%" style="background-color: yellow">中間主體</td>
            <td width="20%" height="80%" style="background-color: royalblue">右選單</td>
        </tr>

        <tr>
            <td colspan="3" width="100%" height="10%" style="background-color: red">這是底部</td>
        </tr>

    </table>

</body>
</html>


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章