当前位置: 移动技术网 > IT编程>网页制作>Html5 > 【代码笔记】Web-HTML-布局

【代码笔记】Web-HTML-布局

2018年10月26日  | 移动技术网IT编程  | 我要评论
一, 效果图。 二,代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html 列表</title> </head> <body> <!--使用div元素的网页布局--> <div id="container" style ...

一, 效果图。

二,代码。

复制代码
<!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>
复制代码

 

参考资料:《菜鸟教程》

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网