您的位置：首页 > 其它

布局

2015-08-16 11:09 253 查看

一、使用<div>元素布局

头+体（左右）+尾

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#container{
min-width: 100%;
height: 950px;
background-color: burlywood;
}
div#heading{
width: 100%;
height: 10%;
background-color: aqua;
}
div#content_left{
width: 30%;
height: 80%;
background-color: brown;
/*从左到右的排序方式 必须有*/
float: left;
}
div#content_right{
width: 70%;
height: 80%;
background-color: darkorange;
/*从左到右的排序方式 必须有  不然会上下排列*/
float: left;
}
div#footing{
width: 100%;
height: 10%;
background-color: forestgreen;
/*上面设定了浮动，如果不清除浮动，则默认跟着做浮动 不会出现在最下面*/
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_left">内容菜单</div>
<div id="content_right">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>

二、使用<table>元素布局

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>table布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#container{
min-width: 100%;
height: 950px;
background-color: burlywood;
}
div#heading{
width: 100%;
height: 10%;
background-color: aqua;
}
div#content_left{
width: 30%;
height: 80%;
background-color: brown;
/*从左到右的排序方式 必须有*/
float: left;
}
div#content_right{
width: 70%;
height: 80%;
background-color: darkorange;
/*从左到右的排序方式 必须有  不然会上下排列*/
float: left;
}
div#footing{
width: 100%;
height: 10%;
background-color: forestgreen;
/*上面设定了浮动，如果不清除浮动，则默认跟着做浮动 不会出现在最下面*/
clear: both;
}
</style>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: aliceblue">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aqua">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: darkcyan">左菜单</td>
<td width="70%" height="80%" style="background-color: olivedrab">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" colspan="2" style="background-color: mediumpurple">这是底部</td>
</tr>
</table>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航