深山老林

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-04-14XL

经过这几天的适应，终于算是稳定下来了，不过经济上也出现了危机，算是我“浪费”的惩罚吧。

现在要见MM也要等到周末了，而且有时周末也得加班，老是让MM过来又心疼她太累了。

猪猪，X~L~

2006-04-10阳光

好久没写东东了，这些天到深圳办理入职手续，在南山区租了个房子，搬东西，清洗房间，一个字＂累＂．还有好多好多事想写，不过现在没时间写下，以后有机会再补上吧．

入职后还有一连串的培训等着，哈哈，学习的机会．

今天的２００６年４月１０号，入住深圳的第二天，希望以后每天都能被阳光叫醒！

2006-04-03数学游戏

有12个乒乓球特征相同，其中只有一个重量异常，现在要求用一部没有砝码的天平称三次，将那个重量异常的球找出来。

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脚本了。