html如何布局

互联网 18-5-16

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

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如何布局

相关资讯

标签推荐