html写网页怎么布局?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
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写网页怎么布局大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。