如何使用HTML布局web页面?(代码示例)

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

如何使用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="">>            <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元素的网页布局-->        <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页面?(代码示例)的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:有关变幻的课程推荐4篇
下一篇:一文聊聊Node中的进程间通信

发表评论

关闭广告
关闭广告