html写网页如何布局

互联网 18-5-9

html常用的布局有两种。第一种一是div布局，优点是比较方便简洁，代码比较少，制作和维护也比较容易，就是有些地方不同的浏览器兼容性不一样，可能会有不同的显示。第二种是table布局，代码比较多，到后期维护起来是非常头疼的，但是table布局规避了许多浏览器不兼容的问题。

1.div布局

<!DOCTYPE html>    <html>    <head lang="en">        <meta charset="utf-8">        <title></title>        <style>            body{margin: 0; padding: 0;}            #header{width:100%; height: 90px; background: #b19f9d; }            #nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}            .content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}            .left{width:30%; height: 900px; background: #decfd4; float: left;}            .right{width: 70%; height: 900px; background: #b3a19d; float: left;}            footer{width:100%; height: 150px; background: #a8817a;}        </style>    </head>        <body>        <header id="header">            <nav id="nav">空空</nav>        </header>        <div class="content">            <div class="left"></div>            <div class="right"></div>        </div>        <footer></footer>    </body>            </html>

2.table布局

<!DOCTYPE html>    <html>    <head lang="en">        <meta charset="utf-8">        <title></title>        <style>                    </style>    </head>        <body marginheight="0px" marginwidth="0px">        <table width="100%" height="950px" style="background-color:gray">            <tr>                <td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td>            </tr>            <tr>                <td  width="20%" height="80%" style="background-color: blue" ><td>                <td  width="80%" height="80%" style="background-color: blue" ><td>            </tr>            <tr>                <td colspan="2" width="100%" height="10%" style="background-color: black" ><td>            </tr>                </table>    </body>            </html>

总结：

table布局比较局限，div 比较开放，设计样式比较多，效果美观，table好处是所有浏览器都兼容div缺点是兼容性很麻烦。

相关推荐：

HTML布局之计算器(div+css)_html/css_WEB-ITnose

html布局的问题。_html/css_WEB-ITnose

HTML布局_html/css_WEB-ITnose

html布局问题_html/css_WEB-ITnose

以上就是html写网页如何布局的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：网页