Entries (RSS)
Comments (RSS)

Archive for January, 2005

Pages (11): 1 2 3 4 » ... Last »

样式表区分链接类型(no ie support)

Jan 31, 2005 Author: | Filed under: Uncategorized

大致写了一个,可以帮助用户来决定是否需要点击这个链接。

</p> <style type="text/css"> <p>a {color:#ccc;}</p> <p>a:not([href$=".htm"]) {background:green;}</p> <p>a[target] {background:blue;}</p> <p>a[target]:after {content:”新窗口显示”}</p> <p>a[href^="#"] {background:red;}</p> <p>a[onclick] {background:purple;}</p> <p>a[href^="javascript"] {background:orange}</p> </style> <p><a href="111.htm">aaaaa</a></p> <p><a href="111.htm" target="22">aaaaa</a></p> <p><a href="#anchor">aaaaa</a></p> <p><a href="1.zip">aaaaa</a></p> <p><a href="##" onclick="">aaaaa</a></p> <p><a href="javascript:">aaaaa</a></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2005-1-31 14:12:54 By guoshuang]

border-collapse 居然可以干掉 cellspacing

Jan 30, 2005 Author: | Filed under: Uncategorized

分别用IE 和 firefox 察看效果。IE 默认的 cellspacing 应该是 2，但如果设置 border-collapse: collapse 这个2 就会被干掉，昏倒，这都是什么乱78糟的“兼容性”啊…

</p> <style type="text/css"> <p></p> </style> <p></head></p> <p><body> </p> <table id="data" cellspacing="8"> <caption> <p> 如何通过CSS去除表格默认样式的间距</p> </caption> <thead> <tr> <th>dfsa</th> <th>dsfdf</th> <th>sdfsdf</th> <th>sdfdfssdf</th> </tr> </thead> <tr> <td>dfsdsfsdf</td> <td>dsfdf</td> <td>dsfsdf</td> <td>dsfsdfsdfa</td> </tr> <tr> <td>sdfsdf</td> <td>sdsdf</td> <td>dfssdf</td> <td>dsfdfs</td> </tr> <tr> <td>sdfdfsdf</td> <td>sdfdfs</td> <td>sdfsdf</td> <td>dfsdfs</td> </tr> </table> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

在 IE 隐藏图片下载

Jan 29, 2005 Author: | Filed under: Uncategorized

在 mmommo 的 Blog 看到这样一段代码，但只对IE起作用，因为 DXImageTransform 是微软自定义的滤镜控件，Firefox 根本就不予理睬。AlphaImageLoader 用来在图片和背景之间加入一张图片，这个图片是不能用右键菜单另存的。但这个 this.不能去掉是干什么的?一会 bath 以后研究看看…

</p> <style type="text/css"> <p>* html img {</p> <p> filter:expression(</p> <p> this.不能去掉 ? "" :</p> <p> (</p> <p> (!this.complete) ? "" :</p> <p> this.runtimeStyle.filter = ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')") + String(this.不能去掉 = true).substr(0, 0) + (this.src = "clear.gif").substr(0, 0)</p> <p> )</p> <p> );</p> <p>}</p> </style> <p><img src="http://www.sxpcrazy.com/blog/templates/dreammaker/image/title.jpg"></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2005-1-29 9:36:43 By guoshuang]

关于 lang 属性

Jan 28, 2005 Author: | Filed under: Uncategorized

</p> <style type="text/css" media="screen"> <p>div {font-size:350%;}</p> </style> <div>雪</div> <div lang="zh-CN">雪</div> <div lang="zh-TW">雪</div> <div lang="zh-HK">雪</div> <div lang="ja">雪</div> <div lang="ko">雪</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

分别指定为中国大陆、台湾、香港、日本和韩国语言。IE 也可以看出部分区别，firefox 的显示更准确一些。

更多相关知识：

http://www.w3.org/International/tutorials/tutorial-lang.html

[Edit on 2005-1-28 14:30:20 By guoshuang]

dl dt dd 用法小例

Jan 28, 2005 Author: | Filed under: Uncategorized

见到几个不常见的写法，研究下…

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></p> <p><head></p> <p> <meta http-equiv="content-type" content="text/html; charset=utf-8" /></p> <style type="text/css"> <p> /* Key style rules */</p> <p> dl, dl * { margin: 0; }</p> <p> dt { display: run-in; }</p> <p> dt::after { content: "AA"; } /* the line-breaks */</p> <p> dd { display: block; }</p> <p> /* Your own style rules */</p> <p> dl {</p> <p> font-family: Verdana; font-size: small; display: block; width: 400px;</p> <p> }</p> <p> dt {</p> <p> border-bottom: 1px dotted #000;</p> <p> }</p> <p> dd {</p> <p> background-color: lightgrey;</p> <p> outline: 1px solid darkgrey;</p> <p> padding: 10px 50px 10px 10px;</p> <p> }</p> </style> <p></head></p> <p><body></p> <dl> <dt>CSS</dt> <dd>A styling language by the W3C to facilitate semantic markup.</dd> <dt>XSL</dt> <dd>An alternative styling language based on XML by the W3C.</dd> <dt>SVG</dt> <dd>A markup language for describing vector graphics by the W3C.</dd> </dl> <p></body></p> <p></html></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2005-1-28 15:56:20 By guoshuang]

float 对象的 margin 问题

Jan 28, 2005 Author: | Filed under: Uncategorized

很奇怪的现象，想不通怎么解释。（IE或者 Firefox 下都有问题）

</p> <style type="text/css"> <p>ul#eg1 sup{float:right;padding-top:1px;}</p> <p>ul#eg2 sup{float:right;padding-top:10px;}</p> <p>li {border:1px dotted #eee;}</p> </style> <ul id="eg1"> <li><sup>(2004-12-25)</sup>news title </li> <li><sup>(2004-12-25)</sup>news title </li> <li><sup>(2004-12-25)</sup>news title </li> <li><sup>(2004-12-25)</sup>news title </li> </ul> <ul id="eg2"> <li><sup>(2004-12-25)</sup>news title </li> <li><sup>(2004-12-25)</sup>news title </li> <li><sup>(2004-12-25)</sup>news title </li> <li><sup>(2004-12-25)</sup>news title </li> </ul> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Pages (11): 1 2 3 4 » ... Last »

Flickr PhotoStream

ubuntu_avant_window_navigator

ubuntustudio theme

GNU-xga

Screenshot-x-session-manager

Screenshot-synaptic-1

Recent Posts

Recent Comments

James on 简单的 php+mysql 留言板代码
OK on opera 安装 flash 插件的另类方法
lroncoffee on 用 flocker 转换 firefox 的插件到 flock
ff on swfupload 文件上传
ff on 简单的 php+mysql 留言板代码

Pages

关于这里

Categories

Tags

css flickr javascript

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries