CSS中的 float 和 clear
[
2006/04/18 16:41 | by 土豆 ]
最近在使用 DIV+CSS 制作网页的过程中，遇到了许多问题，这段时间里会断续的列出一些要点。
在页面里的排版中，多栏的形式十分多见，以前使用表格排版的时候非常容易实现，但使用了DIV后，就必须用到 float 的属性，当然你的页面是全部居左的可以不用。
比如一个简单的页面：
这里 Left 的DIV就会使用 float: left ，而 Right 的DIV则 float:right
此时 footer 的DIV会在一些浏览器中，比如 FireFox 中会同样的 float 在right之下，而不是在 Main 的下边。
解决方法就是在 footer 的CSS里加上如下定义：
clear的其他值：
在页面里的排版中，多栏的形式十分多见，以前使用表格排版的时候非常容易实现，但使用了DIV后，就必须用到 float 的属性，当然你的页面是全部居左的可以不用。
比如一个简单的页面：
<div id="Header"></div>
<div id="Main">
<div id="Left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
<div id="Main">
<div id="Left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
这里 Left 的DIV就会使用 float: left ，而 Right 的DIV则 float:right
此时 footer 的DIV会在一些浏览器中，比如 FireFox 中会同样的 float 在right之下，而不是在 Main 的下边。
解决方法就是在 footer 的CSS里加上如下定义：
clear: both
clear的其他值：
clear属性：
left：清除左边浮动对象
right：清除右边浮动对象
both：两边都不允许有浮动对象
none：两边都可以有浮动对象
left：清除左边浮动对象
right：清除右边浮动对象
both：两边都不允许有浮动对象
none：两边都可以有浮动对象
对CSS的Class及Id的规范化命名[转]
[ 2006/04/13 18:21 | by 土豆 ]
Web开发人员可以通过创建CSS的Class及id名称并使用这些名称来对div以及其他的格式页面元素进行标识。对开发人员来说，在命名重新定义XHTML标记（tags）的CSS selectors时，必须保证其与预定义的标记准确匹配，但就类以及id选择器名称而言，则仁者见仁，智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。
在阅读了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰写的关于CSS的Class以及id命名规范的系列文章之后，我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。
直观命名
当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：
这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。
但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。
结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名：
这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对Web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。
惯例
Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：
如果要查看完整的列表，可以看看最常见命名惯例表
这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢？尽管这是我所希望的，但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时，使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便，尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。
review:
大的布局div可以以外观的方式命名(如header,footer)，其他的我觉得还是应该以描述所含内容的标准来命名（如menu，news）
在布局上不要出现left, right等有关位置的词语为好……支持Shark，根据其内容来命名是最科学的。
一开始我觉得后半句不合适，我觉得标记应该和内容和显示完全分开
回过头来又想想，sharkui的话也有一定道理
比如同样结构的列表（分别在不同页面）
一个是新闻news，一个是技术文档tech
我们该如何给这个列表命名呢？
是分别为id=“news”和id="tech"
还是class="articleList"呢？
如果是前者，假如这两个列表完全是一样的，我要定义两种完全一样的CSS是不是很浪费？两种还好，如果还有很多这样的列表呢？
如果是后者，那这两个的样式就只能定义成一样的了，如果我需要两者有些区别，如颜色，那我地重新写一段CSS并且修改布局中的代码
解决方案很简单啊，id和class都用上：
CSS有很多类似OOP中的概念，class在这里可以理解为“继承”，id则可理解为“重载”。CSS的C不就是这个意思么？
在阅读了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰写的关于CSS的Class以及id命名规范的系列文章之后，我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。
直观命名
当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：
top-panel
horizontal-nav
left-side
center-column
right-col
horizontal-nav
left-side
center-column
right-col
这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。
但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。
结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名：
branding
main-nav
subnav
main-content
sidebar
main-nav
subnav
main-content
sidebar
这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对Web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。
惯例
Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：
header
content
nav
sidebar
footer
content
nav
sidebar
footer
如果要查看完整的列表，可以看看最常见命名惯例表
这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢？尽管这是我所希望的，但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时，使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便，尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。
review:
大的布局div可以以外观的方式命名(如header,footer)，其他的我觉得还是应该以描述所含内容的标准来命名（如menu，news）
在布局上不要出现left, right等有关位置的词语为好……支持Shark，根据其内容来命名是最科学的。
一开始我觉得后半句不合适，我觉得标记应该和内容和显示完全分开
回过头来又想想，sharkui的话也有一定道理
比如同样结构的列表（分别在不同页面）
<ul>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
</ul>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
<li>今天你吃了吗</li>
</ul>
一个是新闻news，一个是技术文档tech
我们该如何给这个列表命名呢？
是分别为id=“news”和id="tech"
还是class="articleList"呢？
如果是前者，假如这两个列表完全是一样的，我要定义两种完全一样的CSS是不是很浪费？两种还好，如果还有很多这样的列表呢？
如果是后者，那这两个的样式就只能定义成一样的了，如果我需要两者有些区别，如颜色，那我地重新写一段CSS并且修改布局中的代码
解决方案很简单啊，id和class都用上：
<ul id="news" class="articleList"></ul>
<ul id="tech" class="articleList"></ul>
<ul id="tech" class="articleList"></ul>
CSS有很多类似OOP中的概念，class在这里可以理解为“继承”，id则可理解为“重载”。CSS的C不就是这个意思么？
网页中DIV里ID和CLASS的区别
[ 2006/04/13 18:19 | by 土豆 ]
class是设置标签的类
id是设置标签的标识
class属性用于指定元素属于何种样式的类。
如样式表可以加入
id属性用于定义一个元素的独特的样式。如一个CSS规则#binbin { font-size: larger } 使用方法：
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
------------------------------------------
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。
id是设置标签的标识
class属性用于指定元素属于何种样式的类。
如样式表可以加入
.baobao { color: lime; background: #ff80c0 } 使用方法：class="baobao"
id属性用于定义一个元素的独特的样式。如一个CSS规则#binbin { font-size: larger } 使用方法：
id="binbin"
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
------------------------------------------
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。
用你的蓝牙手机遥控你的电脑-Salling Clicker
[
2006/04/10 19:33 | by 土豆 ]
今天买了份《新民晚报》，在B18版里有个蓝牙的专题－《乐趣无限的蓝牙应用》－－“躺在床上看大片－蓝牙手机变身电脑影音遥控器”，其中介绍了一款软件：Salling Clicker。感觉挺好玩的，晚上回家立即到网上搜了一下，到官方网站下载了最新版，感觉不错哦！Salling Clicker目前最新版本是：V3.0.1.347 官方网站：http://www.salling.com/
Salling Clicker支持MAC和PC机，网上大多介绍了是MAC版本的。该软件是需要花钱购买的：$23.95。软件内置了对：iTurners/Windows Media Player/PowerPoint/BSPlayer/系统关机/系统静音等的支持。
该软件需要分别在电脑端和手机端分别安装，首先在电脑上安装程序，安装完成后设置选择手机型号，可以生成相应型号的手机端软件，通过蓝牙或数据线将手机端软件传送到手机进行安装。安装后可以进行连接，然后就可以通过手机打开电脑上相应的程序并进行控制。当在播放音乐的时候，如果有电话打进来，软件会自动将电脑系统静音，软件自带的功能似乎有BUG。我到官方论坛上下载了别人改进的Call Notifier (v2)，安装后可以实现打电话或有电话进来时，系统自动调低音量，电话挂机后音量自动恢复，并在电脑屏幕上有显示。另外也可以去下载别的SCRIPT，或者你根据自己的需要自己写一个：）
除了蓝牙连接方式，Salling Clicker 3.0现在还提供了WiFi作为另一种选择，另外，通过它最新的网络共享特色，Salling Clicker 3.0的Mac版本增强了Salling Clicker在家庭或办公室中与其他电脑连接的能力。Salling Clicker与许多手机、手持电脑和其他需要蓝牙和WiFi的硬件兼容。Mac OS X 10.3.9和Windows XP SP1或以后版本可以使用。
本站提供V3.0.1.347版本的注册机（需注册用户权限），仅供试玩使用，请在下载后24小时内删除，如果喜欢请购买正版！
更新：2007-04-12 以下数据是一年前的数据了，至今“土豆”的关键词位置一直靠前，所以您想用“土豆”的关键词做广告，赶快来找我吧。截图是一年前的截图，现在有些区别。
推荐广告（当然也欢迎其他行业广告）：
关键词：土豆
GOOGLE排名：结果页第一页的第4个位置。
百度排名：结果页第一页最后一个位置。前2个位置为推广客户。
广告投放联系：
QQ: 2379186
MSN/EMAIL: info@vdit.com
推荐广告（当然也欢迎其他行业广告）：
关键词：土豆
GOOGLE排名：结果页第一页的第4个位置。
百度排名：结果页第一页最后一个位置。前2个位置为推广客户。
广告投放联系：
QQ: 2379186
MSN/EMAIL: info@vdit.com