很久没有做资源分享了，趁过年回家之前先来分享一个，资源和图全是别人做的，我自知从整站中精简了下，然后再css里面做了一下注释，供懒虫们使用。节约开发成本 = = ，可以这么理解。以后决定做成分享专题，把自己觉得不错的资源都分享出来，希望对大家有所帮助！

这次为大家带来一个漂亮的导航。直接看资源分享图。

核心CSS代码：

/*-- nav css start --*/ 
#channel-nav {background:transparent url("catalogbar.png") no-repeat;height: 33px;margin: 0 auto;overflow: hidden;padding: 1px 2px 3px;position: relative;width: 980px; margin-top:40px;} 
#channel-nav ul {font-size: 14px;height: 33px;left: 4px;line-height: 33px;overflow: hidden;position: absolute;top: 1px;width: 100%;} 
#channel-nav li {background: transparent url("catalogbar.png") no-repeat 0 -40px ;float: left;height: 33px;left: -2px;overflow: hidden;padding-left: 2px;position: relative;list-style:none;} 
#channel-nav li a {color: #FFFFFF;float: left;padding: 0 16px;text-decoration: none;} 
#channel-nav li a:hover {background: url("catalogbar.png") no-repeat 50% -41px; text-decoration: none;} 
#channel-nav li.selected a {background: url("catalogbar.png") no-repeat 50% -40px; text-decoration: none;} 
/*-- nav css end --*/ 

直接观看效果：点击观看

素材下载：点击下载

也可以看看以前分享的：

1. 动网官网-Left-ShowTip效果分析
2. 动网官网-Top-banner效果分析

沉寂了好久哇，今天出了冒个泡，证明我还活着，然后再有模有样来篇技术稿，然后继续沉寂。

今天在CSS88的博客看到一篇有趣的文章《用css的border属性实现三角》。首先我会站在自己角度思考一下，如果要实现这样的三角效果，我会采取哪种方法？

于是出于优化的思想考虑，看到用CSS来解决三角应该属于最佳解决方案吧，至少节约了三角图片的下载时间和便于换肤。但是也有他的缺点，因为是CSS的，所以必须考虑到各个浏览器对css的兼容状态。

当然本文仅讨论如何用border实现三角。首先来看下面以副图片：

有同学经常遇到html页面里加载的js与css文件带有参数，比如： 

<script type="text/javascript" src="base.js?1217128319"></script> 
<link rel='stylesheet' href='http://liupeng.us/base.css?version=2.3.3' type='text/css' /> 
<link rel='stylesheet' href='http://liupeng.us/base.css?version=20080727182553' type='text/css' /> 

使用参数有两种可能，

    * 脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。
    * 客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新下载新的js或css文件

第二种情况最多，也可能两种同时存在。

版本号，可以是一个随机数，也可以是一个递增的值，大版本小版本的方式，或者根据脚本的生成时间书写，比如 20080727182553 就是精确到了生成脚本的秒，而 2.3.3 就是大版本小版本的方式。

写js时会用到，如果发现自己想要的效果没有实现，而程序没问题的话，就参照下此表对应看下标签是否正确。

博客模板又更换了，这次更换的比较简单，才用了简单清爽的设计。太多的图片看起来有视觉疲劳。上次的模板mtime看多了就会发现视觉疲劳很严重。

这次博客采用了YDN的YUI css Foundation构架。用的是#doc2的950px centered布局，用的样式为.yui-t5，右侧240px的sidebar。学习了yui CSS，是在看了Nate Koechley的视频后开始感兴趣的。YUI CSS分四个文件，Base.css,Fonts.css,Reset.css,Grids.css。从字面上就能理解CSS文件的作用，当用过之后才发觉，YUI CSS应用在小型的博客和网站还是有点大才小用。YUI CSS的强大在于Grid.css的布局，它提供了四种布局和六种模板，每种模板中又可以实现Grids和Utils布局，div盒子中可以实现6种格式的分栏。

这次模板的更改，侧边拦减少了图片，优化了内容，做模板也减少了相应的功能页面。没必要用到的功能没必要去做，虽然说做上了很完美，但是工作效率和质量是最重要的。于是去掉了搜索页面，标签云页面，列表显示页面。

一句话精简的人生，很轻松。现在越看这个模板越喜欢。可能因为简单的让人看起来，心里没那么大的压力！马上也要工作了，从现在开始换一种态度来生活，写博，做设计，做程序。人生，简单就好。

更多的YUI Theater视频地址：http://developer.yahoo.com/yui/theater/

下载来自时光博客的YUI CSS Foundation pdf 

上次翻译的一篇文章How to Use CSS to Solve min-width Problems in Internet Explorer中已经找到了非JavaScript和css expression 实现ie中的min-width。

这次我们看看CSS expression的实现方法：

#content{   
_width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');   
}  

这里的 

((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700  

只是个判定条件，判定页面body的宽度，如果页面body的宽度小于700（这个要根据具体的页面来指定），就把content的宽度指定为600，否则就让它自适应宽度。这里的content宽度，可以根据自己的情况来设定。

项目中用到min-width，找了很多解决方案，都不管用，上蓝色经典问了些高人。版主推荐了一篇国外技术文章，觉得价值比较大，就翻译一下，收藏起来。英文比较差，如果翻译有错，还请指正。

介绍
min-width这个属性除了IE6，以及IE5.X以外的浏览器一般都支持.所以本文主要是针对IE的css hack!
对网页设计人员来说，缺乏支持的最小宽度min-width在Internet Explorer中造成了许多问题.到现在为止，唯一模拟min-width的方法是使用JavaScript或Internet Explorer的expressions语法（间接的JavaScript）.经过几个小时的尝试，我发现了一个纯CSS的方法.我的方法需要额外的一些div控制宽度和最小宽度，但我相信这是一个很小的代价，一个非 JavaScript方法工程跨浏览器（甚至在Mac IE5）

方法
基本思想是为那些理解min-width的浏览器提供如下正常的方法，对IE提供他独特的风格（我会解释一下教程）

The Css

body {  
 background:#fff url(rule.gif) 20px 0;  
 color:#000;  
 font-family:"trebuchet ms", "times new roman", times, serif;  
 margin:20px;  
 padding:0;  
}  
.width {  
 width:50%;  
 min-width:300px;  
 background:#fff;  
}  
 
.content {  
 border:1px solid #c00;  
 padding:5px;  
}  
 
.rule {  
 width:300px;  
 background:#c00;  
 color:#fff;  
 margin:1em 0;  
}