前沿视频教室————最好的CSS和Web设计与开发的视频教程

《精通 Javascript + jQeury》光盘中遗漏了两个案例，请这里下载：

第14章，使用jQuery读取xml和json的案例代码

我们的《精通CSS+DIV网页样式与布局》和《CSS设计彻底研究》两本书配套的视频教程中，配套的ppt文件供大家下载：

《精通CSS+DIV网页样式与布局》ppt文件（PowerPoint 2003格式的）

《CSS设计彻底研究》ppt文件（PowerPoint 2007格式的）

下载后请先解压后再用Poerpoint打开。

我们十分感谢所有向我们提出问题的读者，你们使我们的书更加完善，谢谢你们！

勘误

（1）第54页第一段代码的第二行为“border-width:1px 2px 3px”，下面的解释段落“上边框为1px，下边框为2px，左右边框为3px”，正确的应该是：“上边框为1px，下边框为3px，左右边框为2px”。

（2）第27页，正文第5个圆点：这里显示为紫色，是因为在前面定义样式的时候,‘.purple’定义在’.red’的后面，覆盖了在.red中的定义，而不是在HTML设置类别的时候的前后关系，例如把“class=”后面的purple和red交换顺序，先是的仍然是紫色，而不是红色。

（3）第74页，第2行，“……就是……”，应改为“……加上……”

（4）第132页，中间代码部分的第1行，gte应改为lte。然后将它下面一段正文中的第二行：“并且在IE6以上”改为“等于或低于IE 6 版本时”。

（5）第98页，第一段代码的导数第2行,”Box-7″应改为”Box-8″。

（6）第113页，第二段代码的导数第2行,”boeder:1px #666 solid″应改为”border:1px #666 solid″。

（7） 第107页，不算代码的倒数第3行,”注意在字体和行高之间…″应改为”注意在字号和行高之间…″

（8）第127页，正文倒数第1行，“……第五章/图像/shaow……”应该为“……第五章/阴影/shaow……”

（9）第127页，图5.33中给出的Word图片是正确的，但是印刷后的图书中的效果不对，图片的边界很实，没有渐变了。

（10）第127页，正文倒数第2行，“……图像的上面和下面……”应该为“……图像的上面和左面……”

（11）第171页，代码上面一行，“方法是,在’#menu a:hover span{’这段样式中…” ，应该为“方法是,在’#menu a, #menu a:visited {’这段样式……”

（12）第204页，分析段落第二段开头，“解决办法是实现…”应该为“解决办法是事先………”

（13）第216页，倒数第二行“设置微…”应该为“设置为…”

（14）第73页，倒数第三行，修改并补充文字如下：

k：li的上下padding加上文本的行高，即10+14+10=34像素，上下padding都是10px，需要注意的是，中间的行高是14px，并不等于文字高度12px。文字的高度是12px，但是行高在默认情况是1.2倍于文字高度，12*1.2这里等于14，所以是34px。

（15）第73页，顶部代码第1行，改为：margin:20px 20px 20px 20px; /*margin为20像素*/

（16）第73页，顶部代码第8行，改为：border-width:5px; /*设置边框为5像素*/

（17）第205页最下一段代码，以及20页嘴上一段代码，在row4 和{ 之间多了一个逗号，加入此逗号会导致IE8 和Firefox将这一段CSS样式忽略，从而无法出现彩色的效果。注意本书光盘的源代码中其他相应的段落都需要做相同的处理。

（18）第21页，下端，对后代选择器的说明中，所举的代码例子存在问题。这段案例代码应该做一些修改，才能说明这个问题，将22页最上面的CSS代码修改为：

p b{
clolor:Blue;
}

这时的效果是，“这是最内层文字”为蓝色，说明里面的b元素被这个选择器选中了，接下来要说明“后代选择器”与“子选择器”的区别，我们可以将上面的CSS代码，修改为：

p > b{
clolor:Blue;
}

这时再看效果（用Firefox/IE7等支持子选择器的浏览器），可以发现，原来蓝色的文字变为黑色了，这就是因为由于b元素是p元素的孙子，而不是p元素的“儿子”，所以它不会被选中，也就不会设置蓝色，这就说明了“子选择器”的含义。

这样，效果是“这是中间层文字”，以及“这是最内层文字”都以蓝色显示，

（19）彩图中的第二个，合资模型结构图印错了，正确应该是图3.2才对，彩图的应该是对应于低版本的IE的情况，对于高版本的IE和标准的浏览器，都应该是图3.2中的描述。

补充说明

（1）第132页，最后一行，关于为什么要设置width:1px，当时写书的时候没有找到资料，是试验出来的，后来在微软的msdn上找到根据了，msdn上是这样说的：

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true。

意思是说：

这个滤镜要生效，那么使用这个滤镜的对象，比如这里的div，必须是定位过的。所谓“定位”过，可以使用以下几种方式实现：(1)设置了height或width属性；(2)或设置为绝对定位；(3)或将writingMode属性设置为tb-rl，(4)或将contentEditable属性设置为true。

第264页，正文倒数第2行，“-200px”应为“200px”，即应该去掉负号。其下面的代码是正确的，光盘中的代码也是这正确的。

下面将《CSS设计彻底研究》书中出现的参考网站列出来，读者可以直接复制到浏览器地址栏，以避免输入的麻烦。

2.1节：CSS禅意花园 http://www.csszengarden.com

2.2节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=149/149.css，设计师的个人网站是http://www.mariocarboni.com/。

2.3节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=193/193.css，设计师的个人网站是http://www.gr0w.com/

2.4节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=201/201.css，设计师的个人网站是http://tulips4rose.com。

2.5节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=088/088.css，设计师的个人网站是http://arkitrave.com/log。

2.6节：访问这个作品的网址是http://homepages.vub.ac.be/~cschrett/zengarden/dayandnight，设计师的个人网站是http://homepages.vub.ac.be/~cschrett。

2.7节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=044/044.css，设计师的个人网站是http://www.shauninman.com。

2.8节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=124/124.css，设计师的个人网站是http://www.frausampl.at。

2.9节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=170/170.css，设计师的个人网站是http://www.april-design.de。

2.10节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=057/057.css，设计师的个人网站是http://www.shauninman.com/。

2.11节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=146/146.css。

2.12节：该作品的网址是http://www.csszengarden.com/?cssfile=099/099.css。设计师的个人网站是http://www.make-believe.org。

2.13节：该作品的网址是http://www.csszengarden.com/?cssfile=059/059.css。它是由荷兰设计师Marc LA van den Heuvel设计的。设计师的个人网站是http://www.mlavdh.nl。

2.14节：该作品的访问网址是http://adjustafresh.com/zen，由美国设计师Scott Kiekbusch设计，他的个人网站是http://www.adjustafresh.com。

2.15节：访问这个作品的网址是
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css，由德国设计师Kai Laborenz设计，他的个人网站是http://www.css-praxis.de。

2.16节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=148/148.css，设计师的个人网站是http://www.info.fundp.ac.be/~sma/。

2.17节：访问这个作品的网址是http://www.csszengarden.com/?cssfile=202/202.css，设计师的个人网站是http://space-sheeps.info。

5.1.3节：如果读者对颜色的表示方法还不熟悉，或者希望了解各种颜色的具体名称，请参考网页http://learning.artech.cn/20061130.color-definition.html。

5.1.8节：捷克的设计师Dušan Janovský和aka Yuhů给出一个比较完善的解决方案，其中的逻辑比较复杂，需要对不同的浏览器，使用不同的代码，然后合并在一起。这里仅给出一个最终的代码，供读者直接使用在自己的网页中，如果读者有兴趣深入研究其中原理，请访问网址http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

11.4节：这种方法是由丹麦的设计师Søren Madsen，于2003年12月发表在著名的Web设计与开发电子杂志“A List Apart”的第165期上。A List Apart的网址是http://www.alistapart.com，Søren Madsen本人的网站网址是http://www.picment.com。

12.1节：网上随处可见各式各样的Tab菜单，图12.1所示的是雅虎网站首页上可以看到的Tab面板，网址是http://www.yahoo.com。图12.2显示的是微软网站上的Tab菜单，网址是http://office.microsoft.com。

13.6节：先来看一个有趣的网页，网址是http://www.uxmag.com，

13.6.2节：这个JavaScript程序是一位英国程序员Andrew Clover在2003年编写的，他的个人网站的网址是http://www.doxdesk.com。

14.2.3节：这里所讲的案例是基于荷兰设计师Gerben提出来的方法实现的。该设计师的网站的网址是http://algemeenbekend.nl/misc/challenge_gerben_v2.html

14.2.4节：本书关于“任意列排序”的介绍只能到此为止了，建议读者仔细研究Alex Robinson的文章《Any Order Columns》，它详细地介绍了任意列排序的意义、原理和方法，请参见网页http://positioniseverything.net/articles/onetruelayout/anyorder。

14.3节：实际上，关于三列布局的方法还有很多，各有优缺点，适用的范围也各不相同。如果读者有兴趣深入研究，可以参考下面网址http://css-discuss.incutio.com/?page=ThreeColumnLayouts，

15.3.1节：下面以191号作品为例，来进行一些讲解。图15.12所示的是第191号作品的效果图。这是俄罗斯设计师Alexander Shabuniewicz（个人网站地址http://beholder-eye.info）的作品。