深山老林

2006-10-19[原]用CSS画简单的圆角

近来总看到圆角：有用图做的、用JS打出来的。不太愿意用，不过有时也是真的没办法，这里介绍一种用CSS画的简单的圆角，只用于抛砖引玉，大家可以再发挥。

----------------------------------------------HTML---------------------------------------------------------
<div class="bim212">
 <!-- S top -->
 <div class="bim-t">
  <div class="bim-tt"></div>
  <div class="bim-tm"></div>
  <div class="bim-tb"></div>
 </div>
 <!-- E top -->
 <!-- S main -->
 <div class="bim-m">
  测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
 </div>
 <!-- E main -->
 <!-- S bottom -->
 <div class="bim-b">
  <div class="bim-bt"></div>
  <div class="bim-bm"></div>
  <div class="bim-bb"></div>
 </div>
 <!-- E bottom -->
</div>
----------------------------------------------------------------------------------------------------------------

----------------------------------------------CSS---------------------------------------------------------
 .bim212{
 /*定义框大小*/
  width:auto;
  height:auto;
 }
  .bim-tt,.bim-bb,.bim-tm,.bim-bm,.bim-tb,.bim-bt,.bim-m{
  /*定义框颜色*/
   border-color:#FF6347;
  }
  .bim-t,.bim-b{
  /*上部和下部*/
   width:auto;
   height:4px;
   font-size:0;
   line-height:0;
  }
   .bim-tt,.bim-bb{
    width:auto;
    height:0;
    margin:0 4px;
    border-top-width:1px;
    border-top-style:solid;
   }
   .bim-tm,.bim-bm{
    width:auto;
    height:1px;
    margin:0 2px;
    border-left-width:2px;
    border-right-width:2px;
    border-left-style:solid;
    border-right-style:solid;
   }
   .bim-tb,.bim-bt{
    width:auto;
    height:2px;
    margin:0 1px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
   }
  .bim-m{
   width:auto;
   height:auto;
   padding:3px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
  }
----------------------------------------------------------------------------------------------------------------

其实跟九宫格差不多，只是把上面两部分换成了圆角，不过想画不同的圆角，所用到的样式是不相同的，所以这个方法的灵活性不好，唯一的优点也许就是没用到图片跟脚本吧。:P

2006-10-08方向

天啊，又开始找不到方向了。对自己信心不足，看来自己的目标还是不够明确……

近来看了一些朋友的小站，突然觉得自己的水平很菜，发现自己要学的东西好多，但不知从何学起。

方向？

又开始胡言乱语了……

2006-09-29对标准的一点想法

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

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

想搞点别的玩玩……

2006-09-12[原]8月工作总结

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

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

一、编码问题

有些时候你可能会发现网页加了样式表文件后显示不正常，而且样式表文件也并没有错，这时就得找找编码的问题的，因为如果用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，真的很感谢你们。(*~-~*)

2006-08-16[原]用DIV做九宫格

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