溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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怎么布局 就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
