用代码实现html的简单布局
用代码实现html的简单布局
1.div布局
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
body{margin: 0; padding: 0;}
#header{width:100%; height: 90px; background: #b19f9d; }
#nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}
.content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}
.left{width:30%; height: 900px; background: #decfd4; float: left;}
.right{width: 70%; height: 900px; background: #b3a19d; float: left;}
footer{width:100%; height: 150px; background: #a8817a;}
</style>
</head>
<body>
<header id="header">
<nav id="nav">空空</nav>
</header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>
2.table布局
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color:gray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: blue" ><td>
<td width="80%" height="80%" style="background-color: blue" ><td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: black" ><td>
</tr>
</table>
</body>
</html>
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
body{
<span style="white-space:pre;"> </span>margin: 0 auto;
}
table{
<span style="white-space:pre;"> </span>width: 100%;
<span style="white-space:pre;"> </span>height: 950px;
<span style="white-space:pre;"> </span>background: gray;
<span style="white-space:pre;"> </span>}
<span style="white-space:pre;"> </span>#header{
<span style="white-space:pre;"> </span>width: 100%;
<span style="white-space:pre;"> </span>height: 10%;
<span style="white-space:pre;"> </span>background: aqua;
<span style="white-space:pre;"> </span>}
<span style="white-space:pre;"> </span>#content{
<span style="white-space:pre;"> </span>width: 100%;
<span style="white-space:pre;"> </span>height: 80%;
<span style="white-space:pre;"> </span>background: blue;
<span style="white-space:pre;"> </span>}/**如果这里的父元素定了高度，子元素就不要定高度，然后table标签的属性在样式里面是不通用**/
<span style="white-space:pre;"> </span>.content_left{
<span style="white-space:pre;"> </span>width: 30%;
<span style="white-space:pre;"> </span>background: #f60;
<span style="white-space:pre;"> </span>}
<span style="white-space:pre;"> </span>.content_right{
<span style="white-space:pre;"> </span>width: 70%;
<span style="white-space:pre;"> </span>background: #fcc;
<span style="white-space:pre;"> </span>}
<span style="white-space:pre;"> </span>#footer{
<span style="white-space:pre;"> </span>width: 100%;
<span style="white-space:pre;"> </span>height: 10%;
<span style="white-space:pre;"> </span>background: aqua;
<span style="white-space:pre;"> </span>}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr id="header">
<td colspan="2"><td>
</tr>
<tr id="content">
<td class="content_left"><td>
<td class="content_right"><td>
</tr>
<tr id="footer">
<td colspan="2"><td>
</tr>
</table>
</body>
</html>
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻