全部栏目

首页 旅游资讯 线路攻略 景点大全 国内游 境外游 美食特产
您的当前位置：首页正文

html如何布局

2020-11-27 来源：客趣旅游网

本篇文章主要介绍html如何布局 ，感兴趣的朋友参考下，希望对大家有所帮助。

  1. p布局

<!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>
<p class="content">
<p class="left"></p>
<p class="right"></p>
</p>
<footer></footer>
</body>
</html>

2.div布局

<!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>

3.table布局

<!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>
<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="utf-8"> 
 <title></title> 
 <style> 
 body{
 	margin: 0 auto;
 }
 table{
 	width: 100%;
 	height: 950px;
 	background: gray;
 	}	#header{	width: 100%;	height: 10%;	background: aqua;	}	#content{	width: 100%;	height: 80%;	background: blue;	}/**如果这里的父元素定了高度，子元素就不要定高度，然后table标签的属性在样式里面是不通用**/	.content_left{	width: 30%;	background: #f60;	}	.content_right{	width: 70%;	background: #fcc;	}	#footer{	width: 100%;	height: 10%;	background: aqua;	}
 </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>

相关推荐：

问题：关于一个坛友的html布局实现_html/css_WEB-ITnose

HTML布局之计算器(div+css)_html/css_WEB-ITnose

，html布局的问题。_html/css_WEB-ITnose

显示全文