深山老林

早上起来的时候突然觉得“XHTML”没什么好玩的，标准是什么？能通过验证就算是标准？不是。标签正确的嵌套，该是标题的地方就用标题的标签，列表就用列表标签，等等。但这些也不能就说是标准了，每个人对页面的理解不同，所定义的标签就不同（XML更是可以自定义标签），而且都能通过验证，换句话说，标准只是一个“格式”的标准，不是内容的标准，只要格式正确，怎么写就是个人理解能力的事情了。

只写好格式真的就行吗？如果只是这样，那最多也就是一个页面仔。我一直在想如果有盲人朋友读我的页面会是怎样的一种感觉，发声的阅读器能否正确的把内容告诉盲人朋友。或许这就需要在内容上的标准了，因为标签是有语义的，不然也用不着那么多的标签来定义不同的样式。当然在这一块我并没有真正的去学习相关的知识，只是在做页面的时候会想到，也许是因为自己是“正常”人，所以并不能真正体会到“非正常人”的感受吧。

想搞点别的玩玩……

忙了一个月，终于也有点东东出来了，算是我较为满意的一个作品，不算最好，但足以见到自己的进步。这个月里也体会到一些蛮重要的东西，像样式的书写顺序、文件的结构、兼容性的问题等等。

这个月有蛮多东东可以跟大家分享的，不过因为时间太少，没能一个个的给出例子。就说说在写样式文件的时候要注意的地方吧：

一、编码问题

有些时候你可能会发现网页加了样式表文件后显示不正常，而且样式表文件也并没有错，这时就得找找编码的问题的，因为如果用UE等文本编辑器保存文件的时候，有时会不小心存成UTF-8编码的文件，而网页如果使用的是GB-3212编码，就会出现网页显示不正常的问题。

二、书写顺序

很多人不注意样式属性的书写顺序，想到什么写什么，虽然这个影响小到你查觉不到，但在带宽很小的时候，这个影响就会被放大了。因为样式表文件也是按文件的读取顺序去执行的，将属性分类并以一定的顺序书写，不但可以提高可读性，对于文件执行的优化是有帮助的。

当然这顺序不是你想怎么写就怎么写，也得有些依据才行。我们可以把属性分成两大类，布局属性和表现属性。很容易理解，布局属性就是用于布局的属性，表现属性就是用于显示效果方面的。先执行布局再执行表现属性，可以让页面先把布局显示完整。按《Mozilla建议的CSS书写顺序 》中所提到的“显示属性”、“自身属性”、“文本属性”的顺序，我觉得是很不错的，你会发现这个顺序是布局的属性在上方，表现的属性在下面。我是把“自身 属性”中的“border”之上的部分分为布局属性，其它的分为表现属性。从大的角度上，你可以把布局属性和表现属性分开，为“换肤”提供方便。

三、兼容问题

这 个问题也是最让人头大的问题，为不同的浏览器写hack，已经成为很多用CSS布局的页面仔常做的事，但很少会有人去想怎么做hack才是“正确”的，我 并不是说做“hack”是正确的，能不用还是不能的好。还是推荐使用IE条件注解。这里有个技巧，虽然不是我发现的，但的确是很有用：在网页代码的第一行 加上
<?xml version="1.0" encoding="UTF-8"?>
让IE7以下的IE版本使用旧的盒模型，先对FF、IE7和OP写样式，再对IE7以下的版本做hack，这个hack可以放在IE条件注解里：
<!--[if lte IE 7]>样式文件<![endif]-->
<!--[if lt IE 7]>样式文件<![endif]-->
这样就只有IE7及以下的IE版本才会用到hack了。同时也是使用了正确的XHTML文件格式。

其它的一些目前还没有成功的、有效的实现，在这里就不多说了。

停了这么长的时间没有更新BLOG，但还能看到每天都会有固定的一些访问，真的很高兴，是你们的支持让我有动力去写BLOG，真的很感谢你们。(*~-~*)

表格的九宫格实在是很经典，可惜是属于表格布局，在用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)

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

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

一，宽度的问题。

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

二，浮动的问题。

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

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

三，样式的重用问题。

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

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

四，边界的auto问题。

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

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

好久没更新BLOG了，也许是懒了，问题越来越多，像浮动、菜单、导行……之类的，总觉得应该可以更优化的。

看着自己写的代码，垃圾一般，本想写得容易复用，可结果却变得更难阅读，真想买块豆腐撞死算了。

做交互设计好呢？还是做页面制作好呢？鱼与熊掌不可兼得，选择总是让人烦恼啊……

现在很多人都用CSS制作导行菜单，像使用“滑动门技术”之类的方法，但都是使用了无序列表ul标签，其实HTML的标签里还有专门为菜单而设计的标签menu标签。 用法很简单，就像使用ul一样，只是把ul标签换成了menu标签，像这样： -----------------------------HTML---------------------------------

菜单项1

菜单项2

菜单项3

菜单项4

--------------------------------------------------------------------- 而样式的写法也跟原来的差不多，只是把对ul标签的定义改成对menu标签就行。 注：menu标签不是标准推荐的标签！！

在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;}
------------------------------------------------------------------

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

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