猫沙盆

IE7-/Win: 在浮动元素后的定义了“position:absolute”的元素框可能会消失

豆猫 — Thu, 11 Jun 2009 20:20:00 +0800

原文：IE7-/Win: A box with position:absolute next to a float may disappear
很久以前就看过这篇文章，当时写实例的时候正好遇到了这个问题。前几日再次看到这篇文章，就系统地翻译了一下。
另外增加了部分截图，方便阅读。
非技术性文字部分，就大概齐了，别在意那里。

IE7-/Win: 在浮动元素后的定义了“position:absolute”的元素框可能会消失[翻译]

不要使用@import

豆猫 — Sat, 18 Apr 2009 00:47:00 +0800

原文：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
猫鱼：本猫的英文水平有限，只能翻译个大概，如果有错误，请指正，万分感谢。

don’t use @import
April 9, 2009 12:32 AM

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo,creating several test pages and HTTP waterfall charts, all shown below.

元素类型

豆猫 — Mon, 13 Apr 2009 19:57:00 +0800

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而和
也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。

1. 替换和不可替换元素

从元素本身的特点来讲，可以分为替换和不可替换元素。

a) 替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据标签的type属性来决定是显示输入框，还是单选按钮等。
(X)HTML中的、、、、都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：

标示当前位置的导航

豆猫 — Thu, 19 Mar 2009 21:24:00 +0800

利用CSS在导航条上标示当前所在频道的技术，已经有很长时间了，在很多CSS的书中都介绍过，不过还是总被问到，因此写一个简单的示例来讲解一下。
其实原理非常简单：

1) 按照不同的频道（栏目），分别为body定义id。例如：首页：Blog频道：相册频道：
频道内的所有页面都要统一定义id。

2) 导航条的相应栏目，也定义id或者class：

首页
Blog
相册

[CSS]图片展示效果

豆猫 — Wed, 18 Mar 2009 19:57:00 +0800

本例对于完全支持:hover伪类的浏览器来说，只需要CSS即可，但是同以前做的一些效果一样，还是需要JS来应付史前怪兽IE 6。

[CSS+JS]同一页面可以重复使用的选项卡

豆猫 — Wed, 21 Jan 2009 21:06:00 +0800

“选项卡”经常会被混同为“滑动门”，滑动门只是一种背景自适应内容的实现方法，不只可以应用在导航菜单，一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。
“选项卡”一般和JavaScirpt及Ajax结合使用，以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合，完成切换的效果。

——>> 实例文件

例如有设计图如图1所示。
图1 选项卡设计图

在CSS 2规范中，伪类“:hover”（鼠标指向状态）可以应用在任何元素上，因此可以利用此伪类完成鼠标指向选项卡时的显示，但是当鼠标移开，显示效果会消失，因此还需要JavaScirpt配合实现选项卡状态及内容的显示和隐藏。
其结构化代码如下：

网站内容结构化探讨[2]--主导航的问题

豆猫 — Fri, 31 Oct 2008 21:08:00 +0800

结构化确实是个让人头疼的工作。为了追求一个好的结构（或者说比较好的），往往需要花费掉很多时间，这在追求效率的今天，也许是不被老板允许的。所以很多网站虽然看上去抛弃了表格布局，而其实质上，仍然是表格布局的div变种。

　　看过本文第1部分中笔者修改过的头部结构示例文件，大家会发现，里面不仅改动了所说的4点，同时，具体内容的结构也作了修改，下面就来说说具体的内容结构方面。

2、主导航的问题
　　网站的主导航的设计很漂亮，而且结构使用的是ul，没有套很多的div，还会有什么问题？
　　那么看看当我们屏蔽了样式表的时候，会是什么样子？如图4所示。

图4 主导航消失了

　　是的，主导航消失了，因为源代码是这样的：

网站内容结构化探讨[1]

豆猫 — Fri, 17 Oct 2008 23:45:00 +0800

　　无意间浏览到一个承接网页制作的公司的网站——唐宋中国。
　　首先网站的设计给我一个很好的印象，因此特意留意了一下它的源代码（做页面的职业病），结果发现了一些问题，而这些问题，可能正好是学习web标准的人常常会遇到的。
懒惰了很久，正在想该写些什么，正好可以以这个网站为例，来探讨一下结构化的一些问题。
特别声明：以此网站为例，纯属偶然，请不要有其他的想法，喵喵妙。

　　很多人抱怨CSS难学，其实CSS不是难点，真正难的是看似很容易的XHTML——即内容的结构化。
　　结构化是web标准中的重点，也是难点，因为结构化的结果并不是唯一的，也就是说，相同的内容不同的制作者会产生不同的结构。
　　但是，由于大部分网页的内容的分类比较固定，例如：新闻列表、标题、内容文字、导航菜单等等，所以其大体的结构化方法也可以基本固定下来，但是无论任何，需要明确的一点是：以有语意的XHTML标签来结构化内容，而不是、取代一切。

　　结构化的第一步，不要把重点

访客

豆猫 — Sat, 11 Oct 2008 06:03:00 +0800

2008年10月10日星期五 21:48:45

　　今天平淡的生活稍有不同。我家的小院子里来了位客人——住在附近的一只流浪猫。
　　年糕和白白都很好奇地蹲在玻璃门里向外看，外面的猫也好奇地往里看，却原来是那只白色有褐色花纹的猫。
　　人多了，院子里的流浪猫也渐渐多了起来，遛狗的时候经常会狭路相逢。有三只猫是在我家小院附近活动的，前几日我出门的时候，看到有好心的阿姨用箱子给他们在信报箱底下背风的地方搭了窝，窝里面有棉垫子，旁边有水碗和饭碗。
　　偶尔，我也拿猫粮去喂它们。

　　我赶走了家里俩个爱管闲事儿的狗，打开门出去给这位客人倒些猫粮，本来有些害怕地客人转身要走，听到猫粮落在碗里清脆的声音，立刻又掉头回来，不客气地吃了起来。
　　年糕和白白便在阳光房里看着他吃。
　　吃饱了，他也不着急走，仍旧蹲在玻璃外向内看，似乎等待回家的猫儿一般，搞得我差点儿就开门把他放进来，但是，我那该死的理智阻止了我。

　　冬天眼看就来了，这些流浪的动物们，失去了

样书拿到了

豆猫 — Sat, 11 Oct 2008 02:45:00 +0800

2008年9月17日星期四 14:35:49

　　昨天拿到了样书，有两个出乎意料。
　　第一个是，效果比我意料的好。
　　由于内容比较多（我写的时候也没有想到最后这么多），出版社排版花了大力气，每页都排得满满的，最后还是厚厚的有400多页。
　　之前编辑和我说，原料涨钱了，这次纸张不如上次好，而且大部分内容是黑白的，只有一部分内容是彩色的。但是看到样书，我觉得纸张并不算差，只是彩色部分稍微有些偏色。
　　不过忽然黑白忽然彩色的书，看着有些怪怪的感觉。
　　第二个出乎意料，是定价比我预料的贵。
　　之所以印部分彩色，就因为如果全彩的话，定价要80多，后来编辑说，只印部分彩色，定价是48左右。我觉得这个价位以读者的角度来看，还算可以接受，但是拿到书才发现定价是59元，比之前贵了，比上一本也贵。上一本还带1张cd，还是很多人说贵，这本不知道会怎样。

　　今年经济不好，估计这次真是赔了。不过我现在最担心的是这本会不会像第一本那样，有很多bu