您的位置：首页 > Web前端 > CSS

css两栏全屏布局学习

2009-07-10 09:17 253 查看

见效果图：

代码：

<!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=gb2312" />
<title>无标题文档</title>
<mce:style type="text/css"><!--
html,body{margin:0;padding:0}

#container{}
#header{}
div#wrapper{float:right;width:100%;margin-left:-180px;}
div#content{margin-left:180px;}
div#navigation{float:left;width:180px;}
div#footer{clear:both;width:100%}

html,body{height:95%;}
#container{height:100%;}
#header{height:10%;min-height:60px;}
#wrapper{height:80%;}
#content{}
#navigation{height:80%;}
#footer{height:10%;min-height:40px;}

body{background-color:#000;}
#container{background-color:#eee;}
#header{background-color:#9999dd;}
#wrapper{background-color:#ddd;}
#content{background-color:#aaa;}
#navigation{background-color:#666;}
#footer{background-color:#88aa88;}
--></mce:style><style type="text/css" mce_bogus="1">	html,body{margin:0;padding:0}

#container{}
#header{}
div#wrapper{float:right;width:100%;margin-left:-180px;}
div#content{margin-left:180px;}
div#navigation{float:left;width:180px;}
div#footer{clear:both;width:100%}

html,body{height:95%;}
#container{height:100%;}
#header{height:10%;min-height:60px;}
#wrapper{height:80%;}
#content{}
#navigation{height:80%;}
#footer{height:10%;min-height:40px;}

body{background-color:#000;}
#container{background-color:#eee;}
#header{background-color:#9999dd;}
#wrapper{background-color:#ddd;}
#content{background-color:#aaa;}
#navigation{background-color:#666;}
#footer{background-color:#88aa88;}</style>
</head>

<body>

<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
</div>
<div id="navigation">side</div>
<div id="footer">footer</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航