深山老林

2007-09-12[公告]本BLOG搬家了

谢谢各位同学一直以来的支持，以后的更新将会到新的地址：（http://www.cssforest.org/blog/）欢迎关注！:)

2007-08-22[原]由text-indent引起的问题

今天在做东西的时候不小心发现了由于定义了text-indent而引起的宽度问题，主要是定义了首页行缩进后宽度受影响。于是去群里问了一下，还是有收获的。豆豆猫提供了一个例子《IE显示宽度和高度的问题》，主要是说li奇、偶数时显示不同的问题，虽然他只是觉得这个Demo很奇怪，但后来我发现这个例子中的问题也是由于text-indent引起的，所以在这里也感谢豆豆猫，让我少走了不少路。

OK，相信大家也很想知道到底text-indent会引出什么bug，注意哦，在IE中才会出现。正常的情况下，定义首行缩进应该是不影响到宽度的，但从上面那个例子里可以看到，偶数列样例2（IE6下）的宽是比其它列要宽的。

问题很简单，我们以样例5为最终效果，让偶数列和奇数列两边的效果一样，重新做一次就知道了。具体看这里，看完你应该已经知道，text-indent会引起的问题还大的，因为我们还没有很好对付它的办法。所以，当遇到这种问题时，最好还是使用padding吧，至少还有解决方案。-_-||

2007-08-13[活动]WebRebuild.ORG对外成立日座谈会

WebRebuild从策划至今差不多有将近一年的时间，终于决定在8月18日正式对外成立。WebRebuild成立的目的是：在“页面制作”不为人所知、地位低的今天，让更多的人了解并知道“页面制作”的重要性，更有效的推动WEB标准在国内的发展，提高新一代WEB页面制作者的地位，提高业内同行的整体水平，提高行业竞争力。

事件：WebRebuild.ORG对外成立日座谈会
时间：2007-08-18 18:30 - 2007-08-18 23:30
地点：深圳-华侨城生态广场-大灰狼餐厅
说明：WebReBuild.ORG以8.18作为对外成立日，于深圳举办第一次聚会。
座谈会内容：相互见面、交流、公布WebReBuild.ORG发展路向，招收第一期委员会人员。
座谈会费用：AA制。
预定人数：20人。
参与条件：将本次活动相关内容做成页面（包括CSS），发送到twinsenliang@gmail.com，抄送到lovej1bz@gmail.com。

2007-08-08[原]背景半透明效果

做过活动页面的同学可能会遇到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现，我们有更简单的做法：

================HTML======================
<div class="alpha1">
  <div class="ap2">
      <p>背景为红色(#FF0000)，透明度20%。</p>
  </div>
</div>
==========================================
==================CSS======================
.alpha1{
    width:300px;
    height:200px;
    background-color:#FF0000;
    filter: Alpha(Opacity=30);
}
.ap2{
    position:relative;
}
==========================================

样就可以实现啦，也不用担心定位和自适应问题，最大的问题就是IEonly。
如果兼容FF、OP怎么写呢？首先，上面这种定法是不行的啦，那就只能用两个层重叠的方法啦。改下页面结构：

=================HTML======================
<div class="alpha1">
  <div class="ap2">
      <p>背景为红色(#FF0000)，透明度20%。</p>
  </div>
  <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>
==========================================

当然样式也得做修改啦：

==================CSS======================
.alpha1,.alpha2{
    width:100%;
    height:auto;
    min-height:250px;/* 必需 */
    _height:250px;/* 必需 */
    overflow:hidden;
    background-color:#FF0000;/* 背景色 */
}
.alpha1{
    filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
    background-color:#FFFFFF;
    -moz-opacity:0.8; /* Moz + FF 透明度20%*/
    opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/
}
.ap2{
    position:absolute;
}
==========================================

完整Demo

2007-07-20把图像热区跟链接关联起来

在《Sample XHTML 1.0 document》里看到图像热区也可以跟链接关联到一起，即点热区和点链接是一样的地址。看下具体的玩法。

正常的玩法：
=========================HTML===================================
<img src=”dot.png” alt=”image” usemap=”#map” height=”40″ width=”40″ />
<div> <map xml:lang=”en” dir=”ltr” id=”map” class=”map” title=”map” name=”map” lang=”en”> <area href=”#grouping.heading” id=”area” class=”area” title=”area” xml:lang=”en” dir=”ltr” shape=”rect” coords=”0,0,19,19″ alt=”Grouping elements: div and span” tabindex=”5″ lang=”en” /> <area href=”#” shape=”rect” coords=”20,0,39,20″ alt=”Headings: h1, h2, h3, h4, h5, h6″ tabindex=”6″ /> <area href=”#” shape=”rect” coords=”0,20,20,39″ alt=”Address: address” tabindex=”7″ /> <area shape=”rect” coords=”20,20,39,39″ nohref=”nohref” /> </map></div>
===============================================================
关联链接：
=========================HTML===================================
<img src=”dot.png” alt=”image” usemap=”#map2″ height=”40″ width=”40″ />
<div> <map xml:lang=”en” dir=”ltr” id=”map2″ class=”map” title=”map” name=”map2″ lang=”en”>
<ul>
<li><a href=”#” shape=”rect” coords=”0,0,19,19″>Grouping elements: div and span</a></li>
<li><a href=”#” shape=”rect” coords=”20,0,39,20″>Headings: h1, h2, h3, h4, h5, h6</a></li>
<li><a href=”#” shape=”rect” coords=”0,20,20,39″>Address: address</a></li>
</ul>
</map></div>
===============================================================