使用HTML布局web页面的方法是什么

发布时间：2020-08-31 13:48:04 作者：小新
来源：亿速云阅读：153

这篇文章主要介绍了使用HTML布局web页面的方法是什么，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

一，效果图。

使用HTML布局web页面的方法是什么

二，代码。

<!DOCTYPE html>
<html>

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

<body>
    <!--使用div元素的网页布局-->
    <div id="container" style="width:500px">
        <div id="header" style="">>
            <h2 style="margin-bottom:0">main title o f web page</h2>
        </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元素的网页布局-->
        <table width="500" border="0">
            <tr>
                <td colspan="2" style="">>
                    <h2>main title of web page</h2>
                </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页面的方法是什么内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!

使用HTML布局web页面的方法是什么

相关阅读