本文介绍了一种网页布局方案——1-3-1布局，即页面由一个顶部栏、三个主要内容区域（左侧固定宽度区域、中间动态宽度区域、右侧固定宽度区域）和一个底部栏组成。通过浮动定位与负边距等技术实现各部分的精确布局。
<title>1-3-1左右固定中间动态的布局</title>
<style type="text/css">
#header,#content,#footer{
background-color:#ccc;
border:1px solid #0ca;
height:30px;
width:100%;
margin:10px auto;
}
#content{
height:500px;
}
#left{
width:100px;
height:500px;
float:left;
background-color:#0F0;
border:1px solid red;
}
#midd{
height:500px;
border:1px solid #F0F;
background-color:#00F;
padding-right:1px;
margin-left:104px;
}
#right{
width:100px;
height:500px;
border:1px solid green;
background-color:#FF0;
float:right;
}
#varleft{
margin-left:104px;
}
#varcontent{
width:100%;
float:left;
margin-left:-104px;
}
#varmidd{
width:100%;
float:right;
margin-left:-104px;}
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="varcontent">
<div id="varleft">
<div id="left"></div>
<div id="varmidd">
<div id="midd"></div>
</div>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
扫一扫
1514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
