深山老林

2006-04-17[原]属性选择符的使用

在CSS的选择符中，除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”，试了一下属性选择符，感觉很不错，如果使用到页面中的话，会让CSS的定义更加的强大，可惜现在IE并不支持这一选择符。

属性选择符可分为下面几种：

Attribute Selectors
E[attr] 属性选择符。
选择具有attr属性的E。

Attribute Selectors
E[attr=value] 属性选择符。
选择具有attr属性且属性值等于value的E。

Attribute Selectors
E[attr~=value] 属性选择符。
选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E。

Attribute Selectors
E[attr|=value] 属性选择符。
选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E。

下面看看例子：

--------------------HTML code----------------------
<div class="demo">E[attr=value] 属性选择符</div>
<div title="Attribute Selectors">E[attr] 属性选择符</div>
<h1 class="dem demo">E[attr~=value] 属性选择符</h1>
<h2 class="demo-demo2">E[attr|=value] 属性选择符</h2>
---------------------------------------------------

--------------------CSS code-----------------------
body{line-height:1.3em;color:#000000;}
.demo-demo2{background-color:#FFA500;}
div[title]{color:#FFFFFF;background-color:#0000FF;}
div[class=demo]{color:#FF0000;}
h1[class~=demo]{color:#0000FF;}
h2[class|=demo]{color:#008000;}
---------------------------------------------------

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

在《一个三栏布局(1)》中讲到了一个三栏布局，里面使用了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>
-----------------------------------------------------

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

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

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

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

-----------------------------------------------------
<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>
-----------------------------------------------------

加了个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)》

2006-03-17改版心得

这两天又给BLOG换了个衣裳，主要是想改变下那灰色的调调，也许现在看上去感觉更爽一点。

这次修改主要遇到的问题是背景的问题，因为页面是动态的，高度不确定，所以没办法定高度，这在FF的问题就是：当里面的对象浮动时，背景不能填满。看了《CSS布局自适应高度解决方法》一文后，使用了文章里提到的方法，效果不错。

在这里补充一下文章中的方法对IE5/IE5.5的兼容方案：

-----------------------------------------------
#wrap{
height:100%;/*将高设为100％，可同时兼容IE/WIN的几个版本*/
overflow: hidden;/*IE5*/
}
#wrap/*IE5.5+*/{
overflow:hidden !important;/*IE6、FF*/
overflow /*IE5.5*/:visible;/*当高设为100％时，在IE5.5中须把overflow属性设为visible*/
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
-----------------------------------------------

原理就不多说了，这个方法很实用，推荐。

2006-03-17CSS兼容要点(IE vs FF)

IE vs FF

CSS 兼容要点：

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

转自netvtm.com