深山老林

日志内容

2007-06-04[原]二栏宽高自适应布局

看了之前的《两列一边宽度固定,另一边宽度自适应布局》后，觉得iVane的方法还可以再优化一下的，比如可以少用一个div……

自适应的问题也是布局中常会遇到的问题，最早用负边界的方法解决了高度自适应，没想法现在用负边界同样可以解决宽度自适应的问题。来看看怎样做吧：

================HTML===================
<body>
<div id="top">top</div>
<div id="main">
<div id="midpart"><p>主要内容部分，宽高自适应。</p></div>
<div id="leftpart"><p>左栏宽200像素，高度自适应。</p></div>
</div>
<div id="bottom">bottom</div>
</body>
======================================

================CSS===================
#top,#bottom{
clear:both;
width:100%;
height:auto;
padding:10px 0;
background-color:#0099FF;
}
#main{
_width:100%;
height:auto;
overflow:hidden;
padding:0;
padding-left:200px;
color:#000000;
}
#leftpart,#midpart{
height:auto;
margin-bottom:-32767px;
padding-bottom:32767px;
}
#midpart{
float:right;
width:100%;
background-color:#00CC99;
}
#leftpart{
_display:inline;
float:left;
width:200px;
margin-left:-200px;
padding-top:30px;
background-color:#999900;
}
======================================

完整的Demo

这里对宽度自适应做了优化，并增加了高度自适应。如果要改成其它的二栏布局就很容易啦，比如可以改成“右栏定宽”或“左右栏都自适应宽高”。大家自己发挥吧~:)

注：此布局兼容IE5.5+、FF2、OP9+，其它版本的浏览没有测试过，有条件的同学帮忙看下吧。

风的影子 @ 23:07 | 看个仔细 | 有话要说 3 | 引用 0 | 编辑

2006-08-16[原]用DIV做九宫格

TAG：CSS 原创布局

表格的九宫格实在是很经典，可惜是属于表格布局，在用CSS布局的页面中实在不想使用，于是就做了一个DIV的九宫格。(*~v~*)代码如下：

--------------------------HTML----------------------------------
<div id="ot_right">
  <div class="right-tr"><div class="right-tl"><div class="right-tm"></div></div></div>
  <div class="right-mr"><div class="right-ml">内容</div></div>
  <div class="right-br"><div class="right-bl"><div class="right-bm"></div></div></div>
</div>
----------------------------------------------------------------

--------------------------CSS----------------------------------
/*====公用====*/
*{
/* 通用消除边距偏差 */
margin:0;
padding:0;
}
body{
/* 页面主体模块 */
font-size:75%;
line-height:1.5em;
font-family:tahoma, MingLiu, Verdana, Helvetica;
color:#333333;
}

/*==S==框====*/
#ot_right{
width:470px;
height:300px;
}
.right-tl{
/*左上框*/
width:auto;
height:16px;
padding-left:16px;
background:transparent url(bg_tl.gif) no-repeat left top;
}
.right-tm{
/*上框*/
width:auto;
height:16px;
background:transparent url(bg_tm.gif) repeat-x left top;
}
.right-tr{
/*右上框*/
width:auto;
height:16px;
padding-right:16px;
background:transparent url(bg_tr.gif) no-repeat right top;
}
.right-bl{
/*左下框*/
width:auto;
height:16px;
padding-left:16px;
background:transparent url(bg_bl.gif) no-repeat left bottom;
}
.right-bm{
/*下框*/
width:auto;
height:16px;
background:transparent url(bg_bm.gif) repeat-x left bottom;
}
.right-br{
/*右下框*/
width:auto;
height:16px;
padding-right:16px;
background:transparent url(bg_br.gif) no-repeat right bottom;
}
.right-ml{
/*左框*/
width:auto;
height:100%;
padding-left:16px;
background:transparent url(bg_ml.gif) repeat-y left top;
}
.right-mr{
/*右框内容*/
width:auto;
height:100%;
padding-right:16px;
background:transparent url(bg_mr.gif) repeat-y right top;
}
/*==E==框====*/
----------------------------------------------------------------

演示下载(1155699643.rar)

风的影子 @ 09:37 | 看个仔细 | 有话要说 0 | 引用 0 | 编辑

2006-08-14[原]老调重弹-三栏布局

TAG：CSS 原创布局

在之前的《[原]一个三栏布局(2)》中提到的不用JS制作自适应高度的页面，不过得改HTML为：

-----------------------------------------------------
<div id="top">top</div>
<div id="main">
    <div id="nojs">
      <div id="midpart"><p>midpart</p></div>
      <div id="leftpart"><p>leftpart</p></div>
    </div>
    <div id="rightpart"><p>rightpart</p></div>
</div>
<div id="bottom">bottom</div>
-----------------------------------------------------

其实是可以不用改的，就使用原来的那个HTML代码，也可以做到不加JS而自适应高度：

-----------------------------------------------------
<div id="top">top</div>
<div id="main">
    <div id="midpart"><p>midpart</p></div>
    <div id="leftpart"><p>leftpart</p></div>
    <div id="rightpart"><p>rightpart</p></div>
</div>
<div id="bottom">bottom</div>
-----------------------------------------------------

具体的CSS如下：

-----------------------------------------------------
body,html{
font-family:Arial;
font-size:12px;
background-color:#FFFFFF;
}
*{
margin:0;
padding:0;
}
#top,#bottom{
width:100%;
background-color:#0099FF;
height:50px;
margin:0 auto;
clear:both;
}
#main{
width:auto;
padding:0;
color: black;
height:100%;
overflow:hidden;
position:relative;
left:0;
}
#leftpart{
width:200px;
height:auto;
background-color:#999900;
padding-bottom: 32767px;
margin-bottom: -32767px;
position:absolute;
left:0;
top:0;
}
#midpart{
width:auto;
height:auto;
margin:0 200px;
background-color:#00CC99;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#rightpart{
width:200px;
height:auto;
background-color:#FF9900;
padding-bottom: 32767px;
margin-bottom: -32767px;
position:absolute;
right:0;
top:0;
}
-----------------------------------------------------

具体就不做解释了，原理还是一样，只是换了种方式。

注：由于年青气盛，头脑一时发热，犯了“自以为”的错，这个布局是有缺陷的，左右两边因为使用了绝对定位，所以无法自适应高度。Sorry

风的影子 @ 19:44 | 看个仔细 | 有话要说 0 | 引用 0 | 编辑

2006-03-30[原]一个三栏布局(2)

TAG：CSS 原创布局

在《一个三栏布局(1)》中讲到了一个三栏布局，里面使用了JS脚本的方法来达到栏目自适应高度，缺点很明显，当浏览器禁用脚本的时候，布局就会变得混乱，特别是当左边栏或右边栏的高度小于中间栏的时候。下面来看一种不使用脚本的方法，还是按原来的要求，不过得对HTML代码做一下修改：

这里是将中间栏跟左边栏放到了一个层里，这样总的结构就变成了是二栏了，然后再中左边里分出二栏。这样就可以不使用绝对定位了，也能使用负边界来解决栏目的高度自适应问题。来看下CSS样式部分：

-----------------------------------------------------
body,html{
font-family:Arial;
font-size:12px;
background-color:#FFFFFF;
text-align: center;
}
*{
margin:0;
padding:0;
}
#top,#bottom{
width:770px;
background-color:#0099FF;
height:50px;
margin:0 auto;
clear:both;
}
#main{
width:770px;
margin-right: auto;
margin-left: auto;
padding: 0px;
color: black;
height:auto;
overflow:hidden;
}
#nojs{
width:570px;
height:100%;
float:left;
}
#leftpart{
width:200px;
height:auto;
float:left;
background-color:#999900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#midpart{
width:370px;
height:auto;
background-color:#00CC99;
margin-right: auto;
margin-left: auto;
float:right;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#rightpart{
width:200px;
height:auto;
float:right;
background-color:#FF9900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
-----------------------------------------------------

使用负边界的方法来实现栏目的自适应高度，不过这里就不然需要JS脚本了。 good

风的影子 @ 12:25 | 看个仔细 | 有话要说 1 | 引用 125 | 编辑

2006-03-29[原]一个三栏布局(1)

TAG：原创 CSS 布局

用CSS布局做一个页面：
首先要一个top，下面是一个bottom，中间是一个三列块的模式，leftpart，midpart，rightpart，整个页面宽度770px，HTML代码顺序为先中间再两边。

首先，按要求写出HTML代码部分，如下：

加了个id为“main”的层，是为了控制中间宽度，下面写最基本的CSS样式：

-----------------------------------------------------
body,html{
font-family:Arial;
font-size:12px;
background-color:#FFFFFF;
text-align: center;
}
*{
margin:0;
padding:0;
}
#top,#bottom{
width:770px;
background-color:#0099FF;
margin:0 auto;
clear:both;
}
#main{
width:770px;
margin:0 auto;
padding: 0;
color: black;
background-color:#00CC99;
}
#leftpart{
width:200px;
height:auto;
float:left;
background-color:#999900;
}
#midpart{
width:370px;
height:auto;
background-color:#00CC99;
float:left;
margin:0 auto;
padding: 0px;
}
#rightpart{
width:200px;
height:auto;
float:right;
background-color:#FF9900;
}
-----------------------------------------------------

上面的样式是最常见的三栏布局所用的样式，但在这里，中间部分跑到最左边了，这可不是我们所要的效果。怎样改呢？想要让中间跟左边的位置调换，只能用到绝对定位了，看看修改后的样式：

----------------------------------------------------
#main{
width:770px;
margin:0 auto;
padding: 0px;
color: black;
position: relative;/*让中间栏的定位从层的左边开始*/
height:auto;
background-color:#00CC99;
}
#midpart{
width:370px;
height:auto;
background-color:#00CC99;
position: absolute;
/* margin:0 auto; 因为使用了绝对定位，所以这一句可以去掉*/
padding: 0px;
left: 200px;/*距离为左边栏的宽*/
}
----------------------------------------------------

这样，看起来就像是三栏的了，不过还有个问题，往栏里面加内容试试，出问题了，栏目不会自动适应高度的变化。还是用负边界的方法：

----------------------------------------------------
#main{
width:770px;
margin:0 auto;
padding: 0px;
color: black;
position: relative;
height:100%;
overflow:hidden;
background-color:#00CC99;
}
#leftpart{
width:200px;
height:auto;
float:left;
background-color:#999900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#rightpart{
width:200px;
height:auto;
float:right;
background-color:#FF9900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
----------------------------------------------------

不过这样也只是让左右两栏自适应高度，对于中间那一栏，因为使用了绝对定位，所以负边界的方法不起做用，只能用JS脚本啦：

----------------------------------------------------
<script type="text/javascript">
document.getElementById("leftpart").style.height=document.getElementById("midpart").scrollHeight+"px";
document.getElementById("rightpart").style.height=document.getElementById("midpart").scrollHeight+"px";
</script>
----------------------------------------------------

我觉得这个方法的缺点是用到了JS脚本，如果浏览器禁用了脚本，那页面布局就会乱了。再看看另一个不用JS的方法吧《一个三栏布局(2)》

风的影子 @ 16:36 | 看个仔细 | 有话要说 0 | 引用 0 | 编辑