您的位置：首页 > Web前端 > HTML5

html5学习之路_003

2015-08-24 11:40 573 查看

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>为表格第三行,同样合并两个方格，只有一列。
如此布局运行之后得出的结果为下图：

本站文章为 宝宝巴士 SD.Team 原创，转载务必在明显处注明：（作者官方网站：宝宝巴士 )

转载自【宝宝巴士SuperDo团队】 原文链接: /article/6669152.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航