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 作用是清除浮动。运行之后可以看到效果,如图:
![](https://images0.cnblogs.com/blog2015/735908/201508/241101356394784.png)
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>为表格第三行,同样合并两个方格,只有一列。
如此布局运行之后得出的结果为下图:
![](https://images0.cnblogs.com/blog2015/735908/201508/241135487332282.png)
本站文章为 宝宝巴士 SD.Team 原创,转载务必在明显处注明:(作者官方网站: 宝宝巴士 )
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4754342.html
比大多数人的努力程度之低,根本轮不到拼天赋...
宝宝巴士 SD.Team