您的位置：首页 > 其它

自适应宽度，左右两栏固定宽度，中间栏优先加载

2012-04-21 10:46 357 查看

<!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>
<style type="text/css">
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}

.content{
width:100%;
height:100%;
position:relative;
background:#000 url(background.jpg) no-repeat;
overflow:hidden;
}

.left{
width:200px;
height:100%;
background:#8CCA12;
position:absolute;
z-index:3;
top:0;
left:0;
}

.center-ct{
height:100%;
background:#CCCCCC;
position:absolute;
z-index:1;
top:0;
left:0;
margin:0;
width:100%;
}

.center{
margin:0 200px;
}
.right{
width:200px;
height:100%;
background:#6600FF;
position:absolute;
z-index:2;
right:0;
top:0;}
</style>
</head>
<body>
<div class="content">
<div class="center-ct">
<div class="center">
center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航