Archive for March, 2005

Pages (4): « 1 2 3 4 »

不使用图片的圆角矩形

Mar 21, 2005 Author: | Filed under: Uncategorized

Nifty Corners: rounded corners without images

代码如下：

</p> <p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p> <p><html></p> <p><head></p> <p><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></p> <p><meta name="generator" content="HAPedit 3.1"></p> <style type="text/css"> <p>body{padding: 20px;background-color: #FFF;</p> <p> font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}</p> <p>h1,h2,p{margin: 0 10px}</p> <p>h1{font-size: 250%;color: #FFF}</p> <p>h2{font-size: 200%;color: #f0f0f0}</p> <p>p{padding-bottom:1em}</p> <p>h2{padding-top: 0.3em}</p> <p>div#nifty{ margin: 0 10%;background: #9BD1FA}</p> <p>b.rtop, b.rbottom{display:block;background: #FFF}</p> <p>b.rtop b, b.rbottom b{display:block;height: 1px;</p> <p> overflow: hidden; background: #9BD1FA}</p> <p>b.r1{margin: 0 5px}</p> <p>b.r2{margin: 0 3px}</p> <p>b.r3{margin: 0 2px}</p> <p>b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}</p> </style> <p></head></p> <p><body></p> <div id="nifty"> <p><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b></p> <h1>Nifty Corners</h1> <p>Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p> <h2>Rounded corners without images</h2> <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau</p> <p>ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p> <p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia</p> <p>uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p> <p>Iueuouii eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue</p> <p>auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu</p> <p>uaeuueuu eeue ieu.</p> <p><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></p> </div> <p></body></p> <p></html></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

大原理为： 一排高度为1像素的空 b 标签，左右两边的 margin 依次减少，形成圆角。然后为了通过验证以及漂亮干净的代码，通过外部引用css以及 js+DOM 方法加上这些修饰性标签。

有些细节不是很理解

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

这个干嘛要单独设置不同？改成

b.r4{margin: 0 1px;}

在 firefox 或者 IE 看不出区别。

[Edit on 2005-3-21 9:44:04 By guoshuang]

[Edit on 2005-3-21 11:05:52 By guoshuang]

0 Comments

样式表继承(inherit)的示例及cascading

Mar 18, 2005 Author: | Filed under: Uncategorized

基本概念了,这个例子说的更清楚。h1 的字体大小继承了 body 的12px；h1 内的 em 继承了 h1 的 12*5=60px 大小；后面的em 继承了 body 的 12/2=6px 。大部分元素都会继承父对象的样式表。

</p> <style> <p>body { font-size: 12px }</p> <p>h1 { font-size: 500% }</p> <p>em {font-size: 50% }</p> </style> <p><body></p> <h1>a <em>large</em> heading</h1> <p> <em>smalll</em> </p> <p></body></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

再看一个例子，关于属性值 “inherit”

</p> <style> <p>body { color: red; background: green ;}</p> <p>h1 { color: yellow; background: blue ;}</p> <p>p {color: white ; background: black ;}</p> <p>em {color: inherit ;} /*这个"继承"是默认的，可以不写*/</p> </style> <p><body></p> <h1>aaa <em>继承的文字</em> aaa</h1> <p>aaa <em>继承的文字</em> aaa</p> <p> <em>继承的文字</em> </p> <p> <a href="#test">一个链接测试</a></p> <p></body></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

对比下面两个例子，体会 inherit 的作用。

</p> <style> <p>body { color: red; background: #eee ;}</p> </style> <p><body></p> <p>普通文字</p> <p> <a href="#test">一个链接测试</a></p> <input value="测试文字" /> <p></body></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

</p> <style> <p>body { color: red; background: #eee ;}</p> <p>a {color: inherit;} /*默认 a 不继承样式*/</p> <p>input {color: inherit;} /*默认表单元素不继承样式*/</p> </style> <p><body></p> <p>普通文字</p> <p> <a href="#test">一个链接测试</a></p> <input value="测试文字" /> <p></body></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

使用这样的样式表，强制所有元素通通都是白底黑字。

</p> <p>BODY { </p> <p> color: black !important; </p> <p> background: white !important;</p> <p>}</p> <p>* { </p> <p> color: inherit !important; </p> <p> background: transparent;</p> <p>}</p> <p> 显示更多

样式表（Cascading Style Sheet）的继承（谁优先显示）关系，原则如下：

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question.

2. The primary sort of the declarations is by weight and origin: for normal declarations, author style sheets override user style sheets which override the default style sheet. For “!important” declarations, user style sheets override author style sheets which override the default style sheet. “!important” declaration override normal declarations. An imported style sheet has the same origin as the style sheet that imported it.

3. The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

4. Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

Apart from the “!important” setting on individual declarations, this strategy gives author’s style sheets higher weight than those of the reader. It is therefore important that the user agent give the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.

这是 W3C关于 cascading的说明

[Edit on 2005-3-18 14:56:30 By guoshuang]

0 Comments

为你的blog加上评论和trackback

Mar 18, 2005 Author: | Filed under: Uncategorized

如果你的blog没有留言或者不满意，可以换装 haloscan，支持 gravatar大头贴、trackback，而且应该有防 spam 机制（我还没有受到spam 留言的困扰，所以不是很清楚效果如何）。

tagsurf 可以解决以我为中心的评论系统。简单的说，你对一个页面的评论，记录在 tagsurf而不是这个页面上。你可以以下面几种方式来查看评论（hxxp 改成 http 即可）：

你（id）所有发表过的评论

hxxp://tagsurf.com/user/id

所有就某个tag发表的评论

hxxp://tagsurf.com/tag/tag

每条评论都有一个永久地址（id）

hxxp://tagsurf.com/message/id

所有对某个页面（url）发表的评论

hxxp://tagsurf.com/ref/?url=url

修改后添加的代码如下，你可以参考，为了方便观看，我加入了换行，请自行处理：

</p> <div id='haloscan'</p> <p><a href='http://www.tagsurf.com/post?tags=@guoshuang' target='tagsurf' title='用tagsurf给我留言'>tagsurf me</a> | <a href='http://tagsurf.com/post?tag=http://61.185.204.40/david/showlog.asp?cat_id="&cat_id&"&log_id="&log_id&"&trackback=http://61.185.204.40/david/tb.asp?blogArId="&log_id&"' onclick='tagsurfwin=window.open(this.href+encodeURIComponent(location.href)+""&trackback=http://www.haloscan.com/tb/guoshuang/guo"&log_id&"/"");return false;' title='用tagsurf评论这个页面' style='color:#c00'>tagsurf it</a></p> <p> | <script type='text/javascript' src='http://www.haloscan.com/load/guoshuang'></script><a href='http://www.haloscan.com/comments/guoshuang/guo"&log_id&"/' title='Haloscan Comment' target='haloscan'><script type='text/javascript'>postCount(""guo"&log_id&""");</script></a> | <a href='http://www.haloscan.com/tb/guoshuang/guo"&log_id&"/' target='haloscan' title='Haloscan Trackback'><script type='text/javascript'>postCountTB(""guo"&log_id&"""); </script></a></p> </div> <p> 显示更多

感谢 geneboy 这两天的留言（讨论）。我个人认为tagsurf是个伟大的创意。就是网站速度较慢，而且作者也说了，只是个人站点，可能随时关闭。

[Edit on 2005-3-18 10:05:43 By guoshuang]

0 Comments

众人拾柴，火焰高 - 看firefox为什么这么火

Mar 12, 2005 Author: | Filed under: Uncategorized

firefox 总是让人有很多新发现，可我突然想到，为什么firefox会这么有趣，这么火呢？

技术先进？未曾见的，单从技术上来说，IE的纠错处理其实需要更多的工作量，而firefox 跟随 w3c 的旗帜，省了很多力气去研究繁杂的Web应用新标准。opera无论在稳定性、w3c标准还有易用性方面都绝不输给firefox。而且，gecko 引擎本来是从netscape就已经开始了，为什么 netscape navigator 或者 mozilla 就火不起来呢？显然这不是问题的重点。

我倒是觉得 firefox 最大的聪明之处，在于“开放”，这不仅仅是“开源”的问题。除了源代码，firefox 的开发模式完全是开放的，任何人都可以轻易的 customize 它的外观和功能。而且，这样的开发都是脚本式的，容易理解，firefox 底层都做好了（XUL），你可以轻易的实现一些你想到的功能。大家都可以参与进来，这样firefox的开发就不仅仅是 mozilla组织或者firefox小组那几个人的事情了，不是 mozilla 在和 microsoft 竞争，是全世界的程序员，甚至非程序员在和 microsoft 竞争，谁的力量更大些呢？显然…

[Edit on 2005-5-10 9:30:50 By guoshuang]

0 Comments

CSS中 *选择器的另类用法

Mar 11, 2005 Author: | Filed under: Uncategorized

在 X5 看到css的三个秘密。其它秘密早已经不是秘密了，但这个子选择器（Descendant selectors）中使用 * （Universal selector）的用法有点意思。

* 号“隔”掉了一层，但子选择符同名时似乎不能“隔”掉，挺奇怪的逻辑。

</p> <style> <p>div#content * p {color:red;}</p> </style> <div id="content"> <p> 1111</p> <p>2222 <p>3333</p> </p> <div>4444 <p>5555</p> </div> <hr />复杂一点的例子，考虑继承关系。</p> <div>4444 <p>55<br /> <h5>88 <p>999</p> <p>88</h5> <p>55</p> </div> <div>4444 <p>55<br /> <h5>88<span>999</span>88</h5> <p>55</p> </div> </div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

给出W3C参考链接：

http://www.w3.org/TR/REC-CSS2/selector.html

[Edit on 2005-3-11 15:23:41 By guoshuang]

0 Comments

用来用去还是 firefox 安全模式最好

Mar 10, 2005 Author: | Filed under: Uncategorized

firefox 在我经常使用的三台电脑上前后也装了有十几遍了吧，也经常升级 Nightly。前前后后装了N个插件之后，单位电脑的 firefox 终于崩溃了，非常奇怪的样子，难以用语言描述。我越发觉得安全模式的firefox最好用，大不了用一些 bookmarklet 来实现一些功能，不象插件总是影响启动速度，还会经常导致长时间没有响应。

每次升级 firefox 要么插件不能用了，要么插件也要升级，firefox 本来就是一个工具，怎么还反过来让我伺候起她来了？我才不干呢…

现在要么用没有任何插件或者皮肤的firefox，要么直接用安全模式，偶尔也会用到 netscape 7.2。opera 和 IE,mozilla 对css,dom 的解释不太一样,中文看起来问题多多，使用较少。netscape 8.0 bata 跑起来木木的，还经常死掉，令人惆怅。Mozilla 又过于“庞大”，我只要浏览器而已，干嘛还给我搭了一套房子？

我连 feed 阅读器都不用了，只用 firefox 的 livemark，足够了。

看来看去，那些插件就那么不可缺少吗？用来用去还是 firefox 安全模式最好！

0 Comments

Pages (4): « 1 2 3 4 »

Flickr PhotoStream

郭爽的网页设计资料

Archive for March, 2005

不使用图片的圆角矩形

样式表继承(inherit)的示例及cascading

为你的blog加上评论和trackback

众人拾柴，火焰高 - 看firefox为什么这么火

CSS中 *选择器的另类用法

用来用去还是 firefox 安全模式最好

Flickr PhotoStream

Recent Posts

Recent Comments

Pages

Categories

Tags

Archives

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries