html5 div布局与table布局

div布局：html+css实现简单布局。

#container中height不能写成百分数，必须为具体高度。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>div布局</title><style type="text/css">body{margin:0;padding:0;}#container{width:100%;height:650px;background-color: aqua;}#heading{width:100%;height:10%;background-color: azure;}#content-menu{width:30%;height:80%;background-color: chartreuse;float:left;}#content-body{width:70%;height:80%;background-color: chocolate;float:left;}#footer{width:100%;height:10%;background-color: darkgrey;clear: both;}</style>
</head>
<body><div id="container"><div id="heading">头部</div><div id="content-menu">内容菜单</div><div id="content-body">内容主体</div><div id="footer">底部</div></div>
</body>
</html>

效果图：

table布局：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>table布局</title>
</head>
<body marginwidth="0px" marginheight="0px"><table width="100%" height="650px" style="background-color: aqua"><tr><td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td></tr><tr><td width="20%" height="80%" style="background-color: antiquewhite">左菜单</td><td width="60%" height="80%" style="background-color: coral">内容</td><td width="20%" height="80%" style="background-color: cornflowerblue">右菜单</td></tr><tr><td colspan="3" width="100%" height="10%" style="background-color: crimson">这是底部</td></tr></table>
</body>
</html>

效果图：

html5 div布局与table布局相关推荐

html5绘制布局图,html5 div布局与table布局详解
本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下 div布局:html+css实现简单布局. #container中height不能写成百分数,必须为具体高度. d ...
html5 div布局table,H5的div布局与table布局详解
这次给大家带来H5的div布局与table布局详解,H5div布局与table布局的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例为大家解析了html5 p布局与table布局,供大家参考 ...
div+css布局与table布局比较
div+css布局与table布局比较一.背景介绍 table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本以及静态图片等组成的,类似于报纸的形式,分区分块显示,ta ...
HTML5布局—div布局和table布局
1.使用 <div> 元素的 HTML 布局注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. 这个例子使用了四个 <div> 元素 ...
div布局、table布局、flex布局、多列布局、网格布局示例
目录基础代码 demo.html css/common.css div实用布局示例代码效果图 table布局代码效果图 flex布局代码效果图多列布局代码效果图网格布局代码效 ...
div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
css布局：table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
html表格左右布局,css table布局大法，解决你大部分居中、多列等高、左右布局的问题...
1.table的一些特性与表现形式虽然table布局因为它的一些非语义化.布局代码冗余,以及不好维护改版等缺点被赶出了布局界.但是在css不给力时期,table布局也曾风靡一时,就算现在看来tabl ...
html网页 table布局实例,HTML用Table表格对网页布局
HTML是用于开发网页的"超文本标记语言",今天我们一起来学习一下HTML+CSS网页布局中Table布局方式. 常见的网页布局用CSS而言一般有经典行布局.经典列布局.双飞翼布局 ...

html5 div布局与table布局

html5 div布局与table布局相关推荐

最新文章

热门文章