-
使用<用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>无标题文档</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>的边框设为0
float:left;是把<div>从左到右浮动
在设置id="foot"这个区域的时候要用语句clear:both;把浮动取消
在写标签属性的时候才到加双引号,加等号
在写<style>的内容时,要加上分号
在<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
