深山老林

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

在之前的《[原]一个三栏布局(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

2006-08-04[原]7月工作小结

终于也算是结束了一个项目，对我来说，这是我进TC后的第一个项目。没有什么新鲜感，写出的代码还是一样垃圾，一直自己提倡的东西自己却做不好，不过我相信，现在“丑”只是为了更快的看到进步。OK，牢骚发完，还是说点有用的吧。

一，宽度的问题。

auto 默认值。无特殊定位，根据HTML定位规则分配。 length 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。

二，浮动的问题。

当该属性不等于 none 引起对象浮动时，对象将被视作块对象，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。

跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框、内补丁、外补丁或者另一个块对象为止。 div 和 span 对象假如没有指定宽度会被分配默认的宽度，在IE5之前的浏览器版本中则必须指定宽度值才可以呈递此属性。

三，样式的重用问题。

样式的名称真是个头大的问题，太多了也不好维护，虽然可以使用包含选择符，但同时也会带来继承的问题。

一直都知道样式有继承的特点，可什么时候会继承，怎么继承就不得而知了，还好在《HTML与XHTML权威指南》里发现了这么一段“类继承了它们的一般基本标签的样式属性……”、“类无法继承其他类的属性，只能从它们代表的标签的未分类版本中继承。”也就是说类之间没有继承的关系，只有当它代表了某个标签后才会继承那个标签的样式。基本标签样式会继承它的“父元素”的样式。

四，边界的auto问题。

对于盒模型，只有宽与左右边界可以使用auto，表示让浏览器自动确定宽度。此外，如果宽和左右边界都定义了宽度，而且它们之和小于父元素的宽，会向左对齐；如果左右边界为auto，会居中；都为auto时会向左对齐。

以上只是把这段时间里想到的做了下总结，会在以后再分别展开讨论。

2006-06-07[原]定义小于18px的高

在IE中定义height时，如果值小于18px的默认行高时，得到的结果总是18px的高，这是个已经困扰了很多人的问题，这里我总结了相关的解决方法，希望能对你有所帮助吧。

一，使用overflow:hidden隐藏多出的部分。这个方法被大部分人所使用，效果还是不错的。

---------------------------CSS----------------------------------
.E{height:10px;overflow:hidden;}
------------------------------------------------------------------

二，使用小于12px的字号来强制IE改变默认的行高，同样可以实现效果，但在做CSS检查时会出现“字号太小”的警告。

---------------------------CSS----------------------------------
.E{height:10px;font-size:1px;}
------------------------------------------------------------------

三，定义小行高来实现效果。个人觉得这种方法更方便使用，而且不会有警告，推荐使用。

---------------------------CSS----------------------------------
.E{height:10px;line-height:1px;}
------------------------------------------------------------------

不要奇怪定义那么小，有文字怎么办，因为一般会用这么小的高，都是不会再加文字的，如果非要加，那就用第二种方法吧，相信也没人会看到你写了什么。

注意：如果你想让宽度也小于默认值的话，就得使用定义小字号的方法了。

2006-06-07[原]关于CSS样式命名中的下划线

长久以来，一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符，这也是在写JS时惯用的写法。

用过CSS hack的朋友应该知道，用下划线命名也是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。

为此得找一个能代替下划线而又合规范的符号，当然不是一定要用这种分隔符之类的，只是个人习惯问题。

做了个小测试，将下划线分别用了“~”、“$”、“`”、“&”和“－”去代替，结果只有“－”号是可以使用的，而且对JS的支持也正常，看下测试：

-------------------------------CSS---------------------------------
 .try-a{ color:#00f; }
 .try~a{ color:#00f; }
 .try`a{ color:#00f; }
 .try&a{ color:#00f; }
 .try$a{ color:#00f; }
 
 .try-b{ color:#f00; }
 .try~b{ color:#f00; }
 .try`b{ color:#f00; }
 .try&b{ color:#f00; }
 .try$b{ color:#f00; }
----------------------------------------------------------------------

-----------------------------HTML----------------------------------
<div id="a" class="try-a">try1</div>
<div id="b" class="try~a">try2</div>
<div id="c" class="try`a">try3</div>
<div id="d" class="try&a">try4</div>
<div id="e" class="try$a">try5</div>

<input type="button" value="ok" onclick="b();" />
----------------------------------------------------------------------

---------------------------------JS----------------------------------
function b(){
  document.getElementById("a").className="try-b";
  document.getElementById("b").className="try~b";
  document.getElementById("c").className="try`b";
  document.getElementById("d").className="try&b";
  document.getElementById("e").className="try$b";
 }
----------------------------------------------------------------------

结果是“try1”变成了红色，显示正常。不过在CSS定义里，经常会用到ID选择符，如果在页面中的ID命名中使用了“_”，就免不了在CSS样式里出现下划线“_”了，所以在此还得注意在ID的命名上也要避免使用下划线。

注：由于在JS脚本里有时会用到document.idName这样的调用，如果ID中使用“－”号的话会被解释成是减的操作，所以使用ID选择符时不在此建议范围，当然在写样式的时候，也不建议过多的使用ID选择符。

2006-05-11[原]用CSS实现图片说明提示2

今天发呆的时候才想到，把一种更直接简单的方法给忘记了，因为这里使用了绝对定位，所以可以使用z-index属性。

------------------------HTML------------------------------
<ul>
<li class="photo1"><q>text1</q><a href="#"></a></li>
<li class="photo2"><q>text2</q><a href="#"></a></li>
</ul>
----------------------------------------------------------

看起来没什么不同，就是把说明文字提了出来，这样<a></a>的状态变化对说明文字就没影响了，不明白？来看下去吧：

-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
z-index:2;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link, ul li a:visited, ul li a:active{
z-index:3;
}
ul li a:hover{
z-index:1;/*显示说明文字*/
}
.photo1, .photo1 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2, .photo2 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------

不过很可惜，在IE中还是不能正常显示。