前端開發：HTML-佈局

HTML 佈局 - 使用<div> 元素

div 元素是用於分組 HTML 元素的塊級元素。html

下面的例子使用五個 div 元素來建立多列布局：框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試框架</title>
</head>
<body>

<div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bootom:0;">主要的網頁標題</h1>
    </div>
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>菜單</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>
    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        內容在這裏
    </div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        版權
    </div>

</div>

</body>
</html>

　　產生的效果：佈局

HTML 佈局 - 使用表格

使用 HTML <table> 標籤是建立佈局的一種簡單的方式。測試

大多數站點能夠使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者爲頁面建立背景以及色彩豐富的外觀spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試框架</title>
</head>
<body>
<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>主要的網頁標題</h1>
        </td>
    </tr>
    <td style="background-color:#FFD700;width:100px;">
        <b>菜單</b><br>
            HTML<br>
            CSS<br>
            JavaScript
    </td>

       
        <td style="background-color:#eeeeee;height:200px;width:400px;">
            內容在這裏
        </td>
    </tr>

    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:enter;">
            版權
        </td>
    </tr>
</table>
</body>
</html>

　　產生的結果：3d

前端開發：HTML-佈局

HTML 佈局 - 使用<div> 元素

HTML 佈局 - 使用表格

HTML 佈局標籤