明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

如何使用HTML布局web頁面？（代碼示例）

發(fā)表時間：2023-08-30 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是介紹如何使用HTML布局web頁面？（代碼示例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。一， 效果圖。二，代碼。<!DOCTYPE html> <html><head><meta charset=&quo...
本篇文章給大家?guī)淼膬?nèi)容是介紹如何使用HTML布局web頁面？（代碼示例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

一， 效果圖。

如何使用HTML布局web頁面？（代碼示例）

二，代碼。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html 列表</title>
</head>

<body>
    <!--使用div元素的網(wǎng)頁布局-->
    <div id="container" style="width:500px">
        <div id="header" style="">>
            <h1 style="margin-bottom:0">main title o f web page</h1>
        </div>
        <div id="menu" style="height:200px;width:100px;float:left">
            <b>menu</b>
            <br> html
            <br> css
            <br> javascript
        </div>
        <div id="content" style="height:200px;width:400px;float:left">
            ontent goes here
        </div>
        <div id="footer" style="clear:both;text-align:center">
            Copyright ? W3CSchool.cc
        </div>
        <!--使用table元素的網(wǎng)頁布局-->
        <table width="500" border="0">
            <tr>
                <td colspan="2" style="">>
                    <h1>main title of web page</h1>
                </td>
            </tr>
            <tr>
                <td style="width:100px">
                    <b>menu</b>
                    <br>html
                    <br>css
                    <br>javascript</td>
                <td style="height:200px;width:400px">
                    content goes here</td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center">
                    Copyright ? W3CSchool.cc</td>
            </tr>
        </table>
</body>

</html>


參考資料：《菜鳥教程》

以上就是如何使用HTML布局web頁面？（代碼示例）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。