YOYO的最新BLOG文章

在用CSS给表格定义1像素的边框的时候，是个比较棘手的问题，在定义的时候，很容易把边框定义重复了，很多人问过我这个问题，今天我把我为表格添加的方法给大家，其实方法很简单的，就是逻辑关系比较难懂。

表格里面的单元格都是四条边的，那这单元格里面的四条边怎么定义好呢？我们拿一个只有四个单元格的表格（下面用1，2，3，4来表示四个单元格）来做模型，我是先定义的两个临边，任意两个临边都可以，我这里假定定义的是上边框和右边框。1定义之后是上边和右边有了边框，2定义之后也是上边和右边有了边框，而2同时也有了1的右边框作为它的左边框，所以2已经有了三个边框。我们再看3，当定义了上边和右边之后，那1就有了下边框，后面的4也有了左边框，然后4被定义之后，上面的2就有了下边框，也就是说2的四个边框都定义了，然后我们再观察这四个单元格，你会发现只剩下1的左边框、3的单元格的左边框和下边框及4的下边框没有定义了，而这四个边框正好是表格的左边框和下边框（图片上面红色的边框），所以大家就明白了怎么定义了吧，再给整个的table定义一个左边框和下边框就可以了。

于是我们的CSS就出来了：

这样定义好之后，在我们以后用的时候只需要在table上面加上table_border这个class就可以了。

去掉框架横向滚动条的问题困扰了我很久了，一直都没有找到很妥善的办法来解决，网络上也是莫衷一是，没有一个完全正确的，而今天我终于解决了，这主要应该感谢SkyClan，他那一篇去掉横向滚动条的文章写的很棒，只是有点小小的错误，我在下面会提到。

框架代码：

这段代码在Firefox下面是正常的，但是在IE上运行总是有一个横向的滚动条，特别烦人。而你把mainFrame里面的scrolling设置为yes之后，IE是好了，而Firefox里面就出问题了，所以我首先考虑到的是用javascript解决，但是最终是失败的，而我代码是没有问题的，所以我也不知道为什么会是失败的。

这里还有一个办法，如果你的框架是用于动态网站上的话，你可以通过动态语言来控制在不同的浏览器下面现实不同的scrolling的值，不过不是动态网站的话就没办法了，继续往下看吧。

在用CSS来解决的时候，Skyclan给出的办法是在mainFrame的文件中（content.html）另外加一段CSS，如下：

而我测试的结果是失败的，而我把上面的CSS样式中的body{…}改为htm{…}却成功了。经过我的反复测试得出的结论是只有在不声明DTD的时候body{…}和html{…}才是都可以的，声明了DTD的情况下，只有html{…}是可以的。

通过上面的方法，丑陋的横向滚动条终于没有了，最后还是要再次感谢SkyClan。

这是上周为公司人员培训而准备的CSS教程，这次的教程比上次CSS培训详细了不少，希望对初学CSS的朋友有所帮助。

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

一、如何使用CSS样式

1、链接外部样式（推荐）

特点：样式与代码分离。2、定义内部样式块对象

特点：页面内部使用，方便，下载流量会适当减少。

3、内联定义。

特点：随意、方便。

推荐第一种调用方式。伪类的几种样式是无法通过第三种样式定义的。

二、语法
样式表语法 (CSS Syntax)
元素 { 属性:值 }
元素的写法将在下面第三部分讲到，属性和值将在第四部分讲到。

三、选择符
通配选择符、类型选择符、属性选择符、包含选择符、子对象选择符、类选择符、ID选择符、选择符分组、伪类和伪对象选择符。

1、类型选择符

<div>定义的样式</div>

特点：不用定义额外的元素，直接可以写CSS样式。

2、ID选择符（#）

<div id=”text”>定义的样式</div>

特点：可以为单独为某个元素定义的样式。

3、类选择符（点）

<div class=”text”>定义的样式</div>

特点：可以为一个页面里面多个应用此类的元素定义样式。

4、包含选择符

特点：精准定位到某个元素。

上面四种写法在我们平时用的都比较多，对于第四种是前三种的一种灵活的写法。具体用哪种方式，大家可以根据自己的情况来定。

阅读全文 ->

对于公司内部的CSS培训，营销部已经和我说过多次了，我也拖了好几周了，这次实在是不能再拖了，于是抽昨天和今天的时间把培训的内容整理了一下。

对于CSS的使用，应该说是还算熟练，但是让我来培训别人，还真有点不知道从何讲起。于是又学了很多人的老一套，从CSS是什么讲起（别笑，你得让我开头啊），不过后面的内容基本上是直奔主题了。讲完CSS是什么之后，就是CSS的调用方式和CSS的语法，然后就是CSS的一些属性了。

在搞这次培训之前，我一直都自以为是的认为自己的CSS应该相当不错了，今天才发现原来还有这么多不知道，真汗颜[emot]sweat[/emot]。不过通过这次整理培训讲稿，不但复习了之前学过的知识，又学到了一些新的知识，收获还是蛮多的。说实话，苏沈小雨的CSS文档做得相对好，无论是讲解还是实例都做得超级棒，可以说是我见过的最好的CSS文档了，我一直当宝贝保留着。

明天就要培训了，今天就到这里吧，明天就看我上台的了，呵呵。。。

之前我写过一篇文章－用伪对象:after清除浮动。对于firefox，这是个很好的办法。而今天，我偶然发现了一个问题，因为很多次用的时候都没发现，属于一个特殊现象。就是它把定义了:after这个属性的元素所包含的下面的所有元素都加了这个属性。
HTML代码是：

阅读全文 ->

昨天看了一篇文章，是讲CSS技巧的，有几个技巧很不错，拿过来给大家看看。

1、同时使用两个 class

对于一个网页元素中写一个class的情况我们经常见到，而你也可以为网页中的元素指定一个以上的 class，多少个都无所谓。（如果你看过 Google Mail 或 Google Reader 的代码会发现，他们大量应用这种方法控制显示），例如：

p 会同时被应用 text 和 side 两个 CSS 类。

2、为一个页面指定最小宽度和最大宽度
我们知道 CSS 中有个 min-width 属性，但并不是每个浏览器都能支持它（可恶的 IE），此外，我们也无法对 body 指定 min-width，因此我们可以使用下面的方案来解决：

当然，你也可以进一步发挥，同时指定一个 max-width

阅读全文 ->

经过最近一段时间的寻找和测试，我发现了用CSS实现圆角的三种方法：
第一种
CSS圆角效果，仅支持IE，不支持firefox

阅读全文 ->