-
使用<用div>元素布局
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
body{
margin:0px;
}
div#contain{
width:100%;
height:630px;} div#head{ width:100%; height:10%; background:#FF0; } div#leftmenu{ width:10%; height:80%; background:#60F; float:left; } div#webbody{ width:80%; height:80%; background:#F00; float:left; } div#rightmenu{ width:10%; height:80%; background:#60F; float:left; } div#foot{ width:100%; height:10%; background:#F0F; clear:both; } </style> </head> <body> <div id="contain"> <div id="head"> head</div> <div id="leftmenu"> leftmenu</div> <div id="webbody">webbody</div> <div id="rightmenu">rightmenu</div> <div id="foot"> foot</div> </div> </body> </html>
需要注意的:
在<head>里面用margin把<body>的邊框設(shè)為0
float:left;是把<div>從左到右浮動
在設(shè)置id="foot"這個區(qū)域的時候要用語句clear:both;把浮動取消
在寫標(biāo)簽屬性的時候才到加雙引號,加等號
在寫<style>的內(nèi)容時,要加上分號
在<head>中的div#foot可以把div去掉
-
使用<table>元素布局
代碼為:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table排版</title> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> <body marginheight="0px" marginwidth="0px"> <table height="630px" width="100%" style="background-color:#666" > <tr> <td colspan="3" width="100%" height="10%" style="background-color:#FF0">head</td> </tr> <tr> <td width="10%" height="80%" style="background-color:#60F">leftmenu</td> <td width="80" height="80%" style="background-color:#F00">body</td> <td width="10%" height="80%" style="background-color:#60F">rightmenu</td> </tr> <tr> <td colspan="3" width="100%" height="80%" style="background-color:#F0F">leftmenu</td> </tr> </table> </body> </html>
需要注意的:
- 在td中添加顏色要加style
附:效果圖
排版效果圖.png
