三行三列左右两栏布局中间自适应布局

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 3<html>
 4<head>
 5<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6<title>CSSBBS.COM</title>
 7<STYLE>
 8body {
 9font-family: Verdana, Arial;
10margin: 0;
11font-size: 12px;
12}

13#dyhead {
14margin-bottom: 5px;
15}

16#dyleft {
17float: left;
18width: 200px;
19}

20#dycenter {
21margin: 0 210px;
22}

23#dyright {
24float: right;
25width: 200px;
26}

27#dyfoot {
28margin-top: 5px;
29clear: both;
30}

31div {
32background-color: #eee;
33border: dotted 1px green;
34}

35</STYLE>
36</head>
37<body>
38<div id="dyhead">头部(3列布局,左右两栏宽度固定,中间栏自适应宽度)</div>
39<div id="dyleft"> 左栏固定宽度为200px<BR> <BR><BR><BR><BR><BR> </div>
40<div id="dyright">右栏固定宽度为200px<BR> <BR><BR><BR><BR><BR></div>
41<div id="dycenter">中间自适应宽度<BR> <BR><BR><BR><BR><BR></div>
42<div id="dyfoot">底部</div>
43</body>
44</html>

posted on 2009-04-20 13:41 郑桂斌 阅读(1132) 评论(0)  编辑 收藏 引用 网摘 所属分类: CSS+DIV第一步


只有注册用户登录后才能发表评论。
网站导航:
<2009年4月>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

导航

统计

留言簿(2)

随笔分类

随笔档案

文章分类

文章档案

最新随笔

搜索

最新随笔

最新评论

阅读排行榜

评论排行榜