html5学习之路

html5学习之路_003

html布局

使用<div>元素布局
使用<table>元素布局

<div>元素布局

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>div布局</title><link rel="stylesheet" type="text/css" href="mycss03.css">
</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>

<div id="container"> 设置div布局，给一个id为"container"；
接下去设置div头部、内容菜单、内容主体、底部；
<link rel="stylesheet" type="text/css" href="mycss03.css"> ，引入css样式。

body{margin: 0px;
}
div#container{width: 100%;height: 950px;background-color: green;
}
div#heading{width: 100%;height: 10%;background-color: red;
}
div#content_menu{width: 30%;height: 80%;background-color: yellow;float: left;
}
div#content_body{width: 70%;height: 80%;background-color: firebrick;float: left;
}
div#footing{width: 100%;height: 10%;background-color: black;clear: both;
}

在这里设置各个部位的宽、高、背景颜色。
body{ margin: 0px; }的作用是去空边，使背景能充满全屏；
float: left 的作用是加浮动，形成从左到右的排列方式；
clear: both 作用是清除浮动。运行之后可以看到效果，如图：

table元素布局

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>table布局</title>
</head>
<body marginheight="0px"><table width="100%" height="700px" style="background: green"><tr><td colspan="2" width="100%" height="10%" style="background: yellow">头部</td></tr><tr><td width="30%" height="80%" style="background: fixed;"><ol><li>苹果</li><li>香蕉</li></ol></td><td width="70%" height="80%" style="background: magenta;">底部</td></tr><tr><td colspan="2" width="100%" height="10%" style="background: honeydew">底部</td></tr></table>
</body>
</html>

 marginheight="0px" 去空边，填充全屏；
table width="100%" height="700px" style="background: green"> 设置table宽高及背景颜色； 
<td colspan="2" width="100%" height="10%" style="background: yellow">头部</td> ，其中colspan="2"表示两个方格合并成一个，设置宽高及背景颜色；
第二个<tr></tr>为表格第二行，有两列；第三个<tr></tr>为表格第三行,同样合并两个方格，只有一列。
如此布局运行之后得出的结果为下图：