html布局方式：div和table

来源：互联网发布：流行聊天软件编辑：程序博客网时间：2024/05/21 11:36

div

<!DOCTYPE html><html><head><meta charset="utf-8"><title>div布局</title><style type="text/css">body{margin: 0px;}#container{width: 100%;height: 950px;background-color: gray;}#heading{width: 100%;height: 10%;background-color: aqua;}#content_menu{width: 30%;height: 80%;background-color: bisque;float: left;}#content_body{width: 70%;height: 80%;background-color: #7FFF00;float: left;}div#footing{width: 100%;height: 10%;background-color: red;clear: both;}</style></head><body><div id="container"><div id="heading">头部</div><div id="content_menu">内容菜单</div><div id="content_body" >内容主体</div><div id="footing">底部</div></div></body></html>

table

<!DOCTYPE html><html><head><meta charset="utf-8"><title>table布居</title></head><body marginheight="0" marginwidth="0"><table width="100%" height="950px" style="background-color: gray;"><tr><!--colspan是合并单元格的意思--><td colspan="3" width="100%" height="10%" bgcolor="#00FFFF">这是头部</td></tr><tr><td width="20%" height="80%" bgcolor="#7FFF00"><ol><li>ios</li><li>android</li><li>html</li></ol></td><td width="60%" height="80%" bgcolor="brown">主体</td><td width="20%" height="80%" bgcolor="red">右</td></tr><tr><td colspan="3" width="100%" height="10%" bgcolor="darkblue">底部</td></tr></table></body></html>

0 0